当我点击全选按钮时,我想选中复选框。单击“获取选定”按钮时获取所选值。当 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(", "));
}
});
});
答案 0 :(得分:3)
声明col名称
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);
});