带有复选框的jqGrid列

时间:2012-02-19 20:09:19

标签: ajax checkbox jqgrid

我遇到了jqGrid的问题。我在jqGrid中有一个文档列表。第一列DocID,第二列是DocName,现在我想要两个带有复选框的列,以便用户可以订阅这些文档。因此我需要带有复选框的第3列和第4列,以便用户可以检查任意数量的复选框,然后每次单击复选框我需要使用文档ID进行AJAX调用,这样我就可以为用户订阅的用户保存选项那个具体的文件。

我可以使用复选框创建两列,并使用格式化程序启用它们但现在我不能再进一步了,我需要单击复选框获取rowID并选中行的文档ID点击了。

这是我的网格代码。

jQuery("#doc").jqGrid({
    url: urlDoc + docID,
    datatype: 'json',
    mtype: 'GET',
    colNames:[<?php echo (buildCSV(array(_(''), _('Document ID'), _('Document Name'), _('Subscribe'), _('Copy Locally')))); ?>],
    colModel:[
            {name:'fld_doc2comp_status',index:'fld_doc2comp_status', width:1, editable: false, align:"left", hidden:true},
            {name:'fld_comp_documentid',index:'fld_comp_documentid', width:70, editable: true, align:"left", sortable:false,
                 editrules:{required:true}, formoptions:{label:'<?php echo (_('Document ID') . ' *');?>'} },
            {name:'fld_documentname',index:'fld_documentname', editable: true, align:"left", sortable:false,
            editrules:{required:true}, formoptions:{label:'<?php echo (_('Document Name') . ' *');?>'} },
            {name:'fld_subscribe',index:'fld_subscribe', editable: true, formatter:'checkbox', edittype:"checkbox", formatoptions:{disabled:false}, sortable:false, width:60, align:"center"},
            {name:'fld_local',index:'fld_local', editable: true, formatter:'checkbox', edittype:"checkbox", formatoptions:{disabled:false}, sortable:false, width:60, align:"center"}
    ],
    loadComplete: function() {
        jQuery('#doc').setSelection(jQuery('#doc').getDataIDs()[0],true);
        $('.ui-jqgrid-titlebar-close').remove();
    },
    onSelectRow: function(id){
        docID=id;
    },
    width:650,
    height:430,
    rowNum:100,
    viewrecords: true,
    sortable: true,
    sortname: 'fld_comp_documentid',
    sortorder: 'asc',
    pager:"#docpgr",
    pgbuttons:true,
    pginput:true,
    editurl: urlDoc + docID,
    caption: '<?php echo _('Document');?>'
});

我想在主屏幕上保存数据库中的fld_subscribe和fld_local字段,而不是通过编辑记录屏幕。我需要用户能够通过简单地点击复选框来更改任何文档的fld_local和fld_subscribe。

期待您的快速回复。

1 个答案:

答案 0 :(得分:1)

我建议您查看the answer,其中显示了如何将复选框上的点击绑定到事件处理程序。该演示使用Tree Grid,但代码与任何jqGrid完全相同。

顺便说一句,this内的loadComplete<table>的DOM。它具有rows属性。 jqGrid的第一行是隐藏的空行。因此,第一个可见行的id将为this.rows[1].id。您可以验证this.rows.length > 1,然后使用this.rows[1].id代替  jQuery('#doc').getDataIDs()[0]