1、首先设置datagrid属性的idField主键,这里假如为id,若idField为其他的,记住下面的代码里的 id也要做相应的修改
2、建立一个全局的JavaScript数组var checkedItems = [],用来存放选中checkbox的值。
3、核心方法,addcheckItem()、removeAllItem(rows)、removeSingleItem(rowIndex, rowData)当选中或者取消checkbox时触发
用来将checkbox的主键值保存在checkedItems数组,或者从数组中删除对应的id值,findCheckedItem(ID)这个函数用来查找数组中
是否存在checkbox的值,存在则返回id值,不存在则返回-1.
4、什么时候调用这些方法呢?分别在datagrid的 onCheckAll: addcheckItem,onCheck: addcheckItem,onUncheckAll: removeAllItem,onUncheck: removeSingleItem 这四个事件中
调用对应的方法。
5、翻页后如何给checkbox赋值呢?关键就在这里,datagrid重写了$.fn.datagrid.defaults.view的onAfterRender事件,
因此在datagrid的view事件里绑定这个函数就OK了。onAfterRender事件是当easyui的元素渲染完毕后执行的事件,在这里会调用手写的ischeckItem函数来实现对checkbox的赋值!
6、代码展示
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ include file="/pageHead.jsp" %>
<%@page import="com.iss.itreasury.common.utils.SysConstant"%>
<script type="text/javascript">
document.onkeydown = function(e) {
var e = e || event;
if(e.keyCode == 13) {
setTimeout(function(){
$('#success').val("");
},0);
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
}
$(function(){
$("#hid").hide();
$("#allpeople").change(function () {
var aaa = $("#allpeople option:selected").text();
if(aaa == "所有人"){
//$('#dg2').datagrid('clearSelections');
$('#dg2').datagrid('reload');
$("#hid").hide();
}else{
//$('#dg2').datagrid('clearSelections');
$('#dg2').datagrid('reload');
$("#hid").show();
}
});
var fileview = $.extend({}, $.fn.datagrid.defaults.view, { onAfterRender: function (target) { ischeckItem(); } });
var checkedItems = [];
function ischeckItem() {
for (var i = 0; i < checkedItems.length; i++) {
$('#dg2').datagrid('selectRecord', checkedItems[i]); //根据id选中行
}
}
function findCheckedItem(ID) {
for (var i = 0; i < checkedItems.length; i++) {
if (checkedItems[i] == ID) return i;
}
return -1;
}
function addcheckItem() {
var row = $('#dg2').datagrid('getChecked');
for (var i = 0; i < row.length; i++) {
if (findCheckedItem(row[i].id) == -1) {
checkedItems.push(row[i].id);
}
}
}
function removeAllItem(rows) {
for (var i = 0; i < rows.length; i++) {
var k = findCheckedItem(rows[i].id);
if (k != -1) {
checkedItems.splice(i, 1);
}
}
}
function removeSingleItem(rowIndex, rowData) {
var k = findCheckedItem(rowData.id);
if (k != -1) {
checkedItems.splice(k, 1);
}
}
$('#dg2').datagrid({
idField: 'id',
view: fileview,
method: 'post',
//title: '用户列表',
width: '1000',
height: '325',
fitColumns: true,
singleSelect: true,
pagination: true,
url:'${systemctx}/userManager/userQuery.json',
pageSize: 15,
pageList: [ 20, 50, 100],
queryParams: formToJson("pageform"),
rownumbers:true,
singleSelect:false,
columns:[[
{field:'id',title:' ',checkbox:true,align:'center'},
{field:'username',title:'用户名',width:'15%'},
{field:'realname',title:'真实姓名',width:'15%'},
{field:'roleName',title:'角色',width:'15%'},
{field:'mobilePhone',title:'移动电话',width:'15%',align:'center'},
{field:'email',title:'电子邮件',width:'20%'},
{field:'sexName',title:'性别',width:'5%',align:'center'}
]],
toolbar:[],
onCheckAll:function(rows){
addcheckItem();
},
onCheck:function(rowIndex,rowData){
addcheckItem();
},
onUncheckAll:function(rows){
removeAllItem(rows);
},
onUncheck:function(rowIndex,rowData){
removeSingleItem(rowIndex,rowData);
}
});
//将查询项放入工具栏中
//$('#tb').insertBefore("table:first",'.datagrid-toolbar');
});
function saveInstant(){
}
</script>
<form id="pageform" class="easyui-form" method="POST" data-options="novalidate:true">
<div class="pageBody">
<table class="tableFrom">
<tr>
<th>推送标题:</th>
<td><input id="title" class="iss_text" name="title" data-options="required:true"/></td>
</tr>
<tr>
<th>推送内容:</th>
<td><textarea rows="8" cols="60" id="content" name="content" maxlength="150"></textarea></td>
</tr>
<tr>
<th>广播(所有人):</th>
<td>
<select panelheight="auto" name="allpeople" id="allpeople" style="width:142px; width:185px\9;">
<option value="1">所有人</option>
<option value="2">自定义</option>
</select>
</td>
</tr>
<tr id="hid">
<th>接收人:</th>
<td >
<table id="dg2" width="100%" height="100%"></table>
</td>
</tr>
<tr>
<td colspan="2" class="t-r">
<input type="button" class="button" οnclick="saveInstant()" value="保存"/>
<input value="取消" type="button" class="button" οnclick="$.closeWindow('dg');"/>
</td>
</tr>
</table>
</div>
</form>
7、效果展示