如何让 jQuery colorbox 模块在 Flexigrid 中工作？

Question

我正在使用 Flexigrid 在 CRM 中显示传入的潜在客户。在传入线索的行中，我添加了“查看联系人”和“查看注释”的链接。我试图让这些链接在单击时在彩盒模块中打开。当前单击时它们会在新窗口中打开。

HTML/Flexigrid 代码：

<div id="flex"></div>

<script type="text/javascript">  
$(document).ready(function(e){      
    $(".merchant_add_note").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"}); 
    $(".merchant_add_contact").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"}); 
    $(".merchant_view_notes").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"});   
    $(".merchant_view_contacts").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"}); 

    $("#flex").flexigrid({
        url: '/rep/get_leads',
        dataType: 'json',
        method: 'GET',
        colModel : [
            {display: 'Merchant', name : 'merchant_name', width : 220, sortable : true, align: 'left'},
            {display: 'Date Added', name : 'merchant_created', width : 150, sortable : true, align: 'left'},
            {display: 'Last Contacted', name : 'merchant_last_contacted', width : 150, sortable : false, align: 'left'},
            {display: 'Contact', name : 'merchant_contacts', width : 180, sortable : false, align: 'left'},
            {display: 'Notes', name : 'merchant_notes', width : 160, sortable : false, align: 'left'}
            ],      
        sortname: "merchant_name",
        sortorder: "asc",
        usepager: false,
        useRp: false,
        rp: 50,
        width: 950,
        height: 500
    });   

});
</script>

/rep/get_leads json 数组：

function get_leads(){
    $args = array(
        'id' => $this->session->userdata('rep_id'),
        'sort' => $_REQUEST['sortname'],
        'sortorder' => $_REQUEST['sortorder']
    );
    $leads = $this->reps->leads($args);

    foreach($leads as $lead){
        $row['id'] = $lead['merchant_id'];
        $row['cell'] = array(
            'merchant_name' => '<a href="/rep/merchant/'.$lead['merchant_id'].'">'.$lead['merchant_name'].'</a>',
            'merchant_created' => $lead['merchant_created'],
            'merchant_last_contacted' => $lead['merchant_last_contacted'],
            'merchant_contacts' => '<a href="/rep/merchant_contacts/'.$lead['merchant_id'].'" class="small_blue merchant_view_contacts">View</a> - <a href="/rep/merchant_add_contact/'.$lead['merchant_id'].'" class="small_blue merchant_add_contact">Add</a>',
            'merchant_notes' => '<a href="/rep/merchant_notes/'.$lead['merchant_id'].'" class="small_blue merchant_view_notes">View</a> - <a href="/rep/merchant_add_note/'.$lead['merchant_id'].'" class="small_blue merchant_add_note">Add</a>'
        );
        $array[] = $row;
    }   
    $data['rows'] = $array;
    print json_encode($data);
}

Answer 1

我想通了。我需要使用 onSuccess：

<script type="text/javascript">  
$(document).ready(function(e){      
    $("#flex").flexigrid({
        url: '/rep/get_leads',
        dataType: 'json',
        method: 'GET',
        colModel : [
            {display: 'Merchant', name : 'merchant_name', width : 370, sortable : true, align: 'left'},
            {display: 'Date Added', name : 'merchant_created', width : 150, sortable : true, align: 'left'},
            {display: 'Last Contacted', name : 'merchant_last_contacted', width : 150, sortable : true, align: 'left'},
            {display: 'Contacts', name : 'merchant_contacts', width : 100, sortable : false, align: 'left'},
            {display: 'Notes', name : 'merchant_notes', width : 100, sortable : false, align: 'left'}
            ],  
        searchitems : [
            {display: 'Merchant', name : 'merchant_name', isdefault: true}
            ],
        sortname: "merchant_name",
        sortorder: "asc",
        usepager: true,
        useRp: false,
        title: 'Your Leads',
        rp: 500,
        width: 950,
        height: 650,
        onSuccess: function() { 
            $(".merchant_add_note").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"}); 
            $(".merchant_add_contact").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"}); 
            $(".merchant_view_notes").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"});   
            $(".merchant_view_contacts").colorbox({width:"750px", overlayClose:false, height:"400px", transition:"none"}); 
        } 
    });  
});
</script>