jqgrid复选框全选，全部清除

Posted 2023-02-15

【中文标题】jqgrid复选框全选，全部清除

【英文标题】：jqgrid checkbox select all, clear all

【发布时间】：2014-05-26 09:48:06

【问题描述】：

当我单击全选按钮时，我想选中复选框。单击获取选定按钮时获取选定的值。当 multiselect 为 true 时，我可以做到这一点。但是我正在使用 IsEmployeeActive 的复选框，而没有多选为真。如何使用自定义复选框实现此功能。

<div style="float: left;">
    <input id="getSelected" type="button" value="Get Selected" />
    <input id="selectAll" type="button" value="Select All" />
    <input id="clear" type="button" value="Clear Selection" />
    <div id="names"></div>
 </div>

jqGrid代码

 colModel: [//Column details
                         name: "Id", index: "Id", width: "220px" ,
                         name: "Name", index: "Name", width: "220px" ,
                        //Do not allow sorting on Action Column
                         name: "Action", index: "Action", sortable: false, width: "220px" ,
                         name: "IsEmployeeActive", index: "IsEmployeeActive", sortable: false, width: "220px" ,
                            editable:true, edittype:'checkbox', editoptions:  value:"true:false",
                            formatter: "checkbox", formatoptions: disabled : false,
                        
            ]

        $("#selectAll").click(function()
            $("#jqEmpGrid").jqGrid('resetSelection');
            var ids = $("#jqEmpGrid").jqGrid('getDataIDs');
            for (var i=0, il=ids.length; i < il; i++) 
                $("#jqEmpGrid").jqGrid('setSelection',ids[i], true);
            
        );
        $("#clear").click(function()
            $("#jqEmpGrid").jqGrid('resetSelection');
        );
        $("#getSelected").click(function()
            var ids = $("#jqEmpGrid").jqGrid('getGridParam','selarrrow');
            if (ids.length>0) 
                var names = [];
                for (var i=0, il=ids.length; i < il; i++) 
                    var name = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'Id');
                    names.push(name);
                
                //alert ("Names: " + names.join(", ") + "; ids: " + ids.join(", "));
                $("#names").html(names.join(", "));
            
        );

);

【参考方案1】：

声明列名

colNames: ['Employee Id', 'Employee Name', 'Action','<input type="checkbox" id="selectallCB"/>'],//Column Names
        colModel: [//Column details
                     name: "Id", index: "Id", width: "220px" ,
                     name: "Name", index: "Name", width: "220px" ,
                    //Do not allow sorting on Action Column
                     name: "Action", index: "Action", sortable: false, width: "220px" ,
                     name: "IsEmployeeActive", index: "IsEmployeeActive", sortable: false, width: "220px" ,
                        editable:true, edittype:'checkbox', editoptions:  value:"true:false",
                        formatter: "checkbox", formatoptions: disabled : false,
                        cellattr: function(rowId, val, rawObject) 
                            return " class='cbEmpActive'";
                        
                    
        ],

并编写代码以选择所有并获取所选项目

/* use when custom checkbox is required    */

    $("#selectAll").click(function()
        var td = $('.cbEmpActive');
        for(var i=0;i<td.length; i++)
            var checkbox = $('input[type="checkbox"]', $( td[i]).closest('td')).get(0).checked=true;
        
    );
    $("#clear").click(function()
        var td = $('.cbEmpActive');
        for(var i=0;i<td.length; i++)
            var checkbox = $('input[type="checkbox"]', $( td[i]).closest('td')).get(0).checked=false;
        
    );
    $("#getSelected").click(function()

        var ids = $("#jqEmpGrid").jqGrid('getDataIDs');
        if (ids.length>0) 
            var names = [];
            for (var i=0, il=ids.length; i < il; i++) 
                var checkbox =  $("#jqEmpGrid").jqGrid('getCell', ids[i], 'IsEmployeeActive');
                if(checkbox=='true')
                
                    var name = $("#jqEmpGrid").jqGrid('getCell', ids[i], 'Name');
                    names.push(name);
                
            
            $("#names").html(names.join(", "));
        

        $("#clear").click();// clear the selection after retriving selected values
    );



    // add multiple select / deselect functionality
    $("#selectallCB").click(function (e) 
        var isSelectAllTrue = $('#selectallCB').is(":checked");
        e = e||event;/* get IE event ( not passed ) */
        e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;

        var td = $('.cbEmpActive');
        for(var i=0;i<td.length; i++)
        
            var checkbox = $('input[type="checkbox"]', $( td[i]).closest('td')).get(0);

            var checked = checkbox.checked;
            checkbox.checked = isSelectAllTrue;

        

        //          $('.case').attr('checked', this.checked);
    );