需求： (1) 分页：即发送开始元素的索引(startNumber)和每页显示多少信息(pageSize)到后台，后台使用类似limit的函数查出数据后以json格式返回 (2) 记录checkbox
需求：
(1) 分页：即发送开始元素的索引(startNumber)和每页显示多少信息(pageSize)到后台，后台使用类似limit的函数查出数据后以json格式返回
(2) 记录checkbox的选择状态(第一页选择了A，翻到第二页，回到第一页，A还是选中状态)，点击"导出"按钮，后台将选中的每一行导出为excel ( 导出功能是需要知道哪些行被选中，哪些行没被选中的 )
(3) 点击"全选"按钮，所有行都被选中
datagrid的配置项里面
frozenColumns:[[ {field:'checkbox_',checkbox:true}, {field:'Cedcode',title:'社会统一信用代码',width:120,align:'center'}, ]], 这样field名为checkbox_的这一列就会为checkbox
在实际应用中发现，翻页的时候，已选择checkbox不会被记录。也就是说，我在第一页选中了1，点击下一页，然后回到第一页，1还是未选择状态。
所以考虑用一个数组存放选中元素的ID,选中某一行时，就将这一行的ID放在数组中，当返回上一页的时候，遍历页面中的每一行，如果某一行的id在数组里面，那么就更新其为选中状态。"导出"时，将ID数组传到后台即可。
但是对于"全选"功能，点击"全选"按钮，所有的行都被选中，但当总数据量(total)上万的时候，不可能把上万的数据ID都放在数组里面，所以考虑增加一个标志位
var isSelectAll = false;
翻页的时候只要isSelectAll = true，就将该页所有的行的checkbox为选中状态，"导出"功能时，不但将数组传到后台，还将isSelectAll标志位传到后台。后台判断如果isSelectAll=true，那么就没数组什么事了，全查出来就行。
但是用户点击了"全选"，然后又取消了某一行，怎么整？见下图
所以最终是这个样子解决的
定义两个全局变量，isSelectAll记录当前是否为全选状态，当非全选时，idArray记录勾选行的id，当全选时，idArray记录未被勾选行的id
效果：
部分前台代码：
HTML
<script src="easyui/js/jquery.min.js"></script><script src="easyui/js/jquery.easyui.min.js"></script><link href="easyui/css/manner.css" rel="stylesheet"><link href="easyui/css/icon.css" rel="stylesheet"><link href="easyui/css/easyui.css" rel="stylesheet"><table id="EnterNList" class="easyui-datagrid" style="height: 400px;" data-options="pagination:true,rownumbers:true,pageSize:10,pageList:[10,15,20]"><!-- data-options里面的参数也可以在js里面写 --> <thead> <tr> <th field="checkbox_" width="150" align="center" checkbox="true"></th> <th field="id" width="80" align="center" hidden="true" ></th> <th field="Aag" width="150" align="center">分析角度</th> <th field="YM" width="80" align="center">分析年月</th> <th field="Enum" width="120" align="center">企业数量（个）</th> <th field="detail" id="dataOption" width="80" align="center" formatter="formatOpt">操作</th> </tr> </thead></table>部分Javascript
// 请求参数var detailsInfo = { // 查询参数 analysisPoint : null, analysisTime : null, // 记录"全选"状态和数据id isSelectAll = false, idArray : [],}$(function(){ // datagrid进行初始化配置 configDatagrid();});/** * datagrid发送请求的一个封装 * @returns */function sendQueryRequest(obj){ $.ajax({ type:"POST", url:"./BEnterNum_Detail_Analysis", data:{ analysisPoint:obj.analysisPoint, analysisTime:obj.analysisTime, start:obj.start, size:obj.pageSize }, datatype:"json", success:function(data){ if(!obj.successCallback) return; obj.successCallback(data); }, error:function(){ if(!obj.errorCallback) return; obj.errorCallback(); } });}function formatOpt(val,row,index){ return '<a href="javascript:void(0)" name="opera" class="editcls" onclick="javascript:alert("查询详情");">查询详情</a>';}/** * "搜索" 按钮点击后的触发函数 * @returns */function search(aTag){ // 分析角度 detailsInfo.analysisPoint = $(aTag).parent().text(); // 分析时间 detailsInfo.analysisTime = $(aTag).parent().prev().text(); // 查询分页数据给datageid sendQueryRequest({ start:1, pageSize:10, successCallback:function(data){ var queryJson = jQuery.parseJSON(data); // datagrid显示内容 $('#buildingList').datagrid('loadData',queryJson); }, errorCallback:function(){ $.messager.alert('Ajax Request Error!'); } }); }/** * datagrid配置信息初始化 * @returns */function configDatagrid(){ $("#buildingList").datagrid({ toolbar:[{ text:'全选', id:'btn_excel_select', iconCls:'icon-select', handler:function(){ $('div.datagrid-toolbar a').eq(0).hide(); $('div.datagrid-toolbar a').eq(1).show(); // 是否全选标志位 isSelectAll = true; var rows = $("#buildingList").datagrid("getRows"); for(var i=0;i<rows.length;i++){ $('#buildingList').datagrid('selectRow',i); } detailsInfo.idArray = []; } },{ text:'取消全选', id:'btn_excel_notselect', iconCls:'icon-select', handler:function(){ $('div.datagrid-toolbar a').eq(1).hide(); $('div.datagrid-toolbar a').eq(0).show(); // 是否全选标志位 isSelectAll = false; $('#buildingList').datagrid('clearSelections'); detailsInfo.idArray = []; } },{ text:'导出', id:'btn_excel_out', iconCls:'icon-out', handler:function(){ excelOutput(); } }], onLoadSuccess:function(data) { // 隐藏表头的全选checkbox $("#buildingList").parent().find("div .datagrid-header-check").children("input[type=/"checkbox/"]").eq(0).attr("style", "display:none;"); // 隐藏"取消全选" 显示"全选" $('div.datagrid-toolbar a').eq(1).hide(); $('div.datagrid-toolbar a').eq(0).show(); }, onCheck:function(index, data){ var row = $('#buildingList').datagrid('getData').rows[index]; var Sco=row.id; // 如果此时是全选状态，那么取消记录未勾选的条目 if(isSelectAll){ if(!($.inArray(Sco,detailsInfo.idArray) == -1)) { var index = $.inArray(Sco,detailsInfo.idArray); detailsInfo.idArray.splice(index,1); } } // 如果此时是非全选状态，那么记录勾选条目的id if(!isSelectAll){ if($.inArray(Sco,detailsInfo.idArray) == -1) { detailsInfo.idArray.push(Sco); } } }, onUncheck:function(index, data){ var row = $('#buildingList').datagrid('getData').rows[index]; var Sco=row.id; // 如果此时是全选状态，那么记录取消勾选的条目 if(isSelectAll){ if($.inArray(Sco,detailsInfo.idArray) == -1) { detailsInfo.idArray.push(Sco); } } // 如果此时是非全选状态，那么取消记录勾选的条目 if(!isSelectAll){ if(!($.inArray(Sco,detailsInfo.idArray) == -1)) { var index = $.inArray(Sco,detailsInfo.idArray); detailsInfo.idArray.splice(index,1); } } } }); // datagrid的分页处理配置 var pageObject = $('#buildingList').datagrid('getPager'); $(pageObject).pagination({ beforePageText:'第', afterPageText:'页 共{pages}页', displayMsg:'当前显示{from} - {to} 条记录 共{total} 条记录', onSelectPage:function (pageNo, pageSize){ var start = (pageNo - 1) * pageSize + 1; var end = start + pageSize - 1; // 发送请求 sendQueryRequest({ start:start, pageSize:pageSize, successCallback:function(data){ $('#buildingList').datagrid('loadData',$.parseJSON(data)); $('#buildingList').datagrid('clearSelections'); // 翻页后处理每一行的勾选情况 rowAddSelections(); var rowNumbers = $('.datagrid-cell-rownumber'); $(rowNumbers).each(function(index){ var row = parseInt($(rowNumbers[index]).html()) + parseInt( start - 1 ); $(rowNumbers[index]).html(""); $(rowNumbers[index]).html(row); }); }, errorCallback:function(){ $.messager.alert('Ajax Request Error!'); } }); }, // 在触发onChangePageSize事件时,会同时触发onSelectPage事件 onChangePageSize:function(pageSize){} });}/** * datagrid翻页后给已选中行添加selected属性 * @returns */ function rowAddSelections(){ var rows = $("#buildingList").datagrid("getRows"); // 如果当前是全选状态,若某一行id不存在于idArray中，那么这一行会被勾选 if(isSelectAll){ for(var i=0;i<rows.length;i++){ if($.inArray(rows[i].id,detailsInfo.idArray) == -1) $('#buildingList').datagrid('selectRow',i); } // 如果当前是非全选状态,若某一行id存在于idArray中，那么这一行会被选中 }else{ for(var i=0;i<rows.length;i++){ if($.inArray(rows[i].id,detailsInfo.idArray) != -1) $('#buildingList').datagrid('selectRow',i); } }}/** * "导出" 按钮点击事件 导出为EXCEL并下载 * @returns */function excelOutput(){ $.messager.confirm("操作提示", "您确定要执行操作吗？", function (data) { if (!data) { return; } // 如果非全选状态 且idArray为空 或者 全选状态且idArray为满，那么提示用户 if(detailsInfo.idArray.length==0 && !isSelectAll){ $.messager.alert('提示','请选择要导出的信息'); return; } showProcess(true,'温馨提示','正在导出数据...'); var ids = detailsInfo.idArray.toString(); $.ajax({ type:"POST", url:'./OutData', data:{ analysisPoint : detailsInfo.analysisPoint, analysisTime : detailsInfo.analysisTime, isSelectAll : isSelectAll, ids : ids, }, datatype: "json", success: function(data){ showProcess(false); if (data.success) { window.location.href = "SessionFileExport?fileType=excelFile"; } else { $.messager.alert("操作提示", "操作失败！原因:" + data.failReason,"error"); } }, error: function(){ $.messager.alert("操作提示", "操作失败！","error"); } }); });}/** * 进度条显示 * @returns */function showProcess(isShow,title,msg){ if(!isShow){ $.messager.progress('close'); return; } var win=$.messager.progress({ title:title, msg:msg });}
