easyui-datagrid記錄checkbox選擇狀態
需求：javascript
(1) 分頁：即發送開始元素的索引(startNumber)和每頁顯示多少信息(pageSize)到後臺，後臺使用相似limit的函數查出數據後以json格式返回css
(2) 記錄checkbox的選擇狀態(第一頁選擇了A，翻到第二頁，回到第一頁，A仍是選中狀態)，點擊"導出"按鈕，後臺將選中的每一行導出爲excel ( 導出功能是須要知道哪些行被選中，哪些行沒被選中的 )html
(3) 點擊"全選"按鈕，全部行都被選中java
datagrid的配置項裏面jquery
frozenColumns:[[
{field:'checkbox_',checkbox:true},
{field:'Cedcode',title:'社會統一信用代碼',width:120,align:'center'},
]],
這樣field名爲checkbox_的這一列就會爲checkboxajax
在實際應用中發現，翻頁的時候，已選擇checkbox不會被記錄。也就是說，我在第一頁選中了1，點擊下一頁，而後回到第一頁，1仍是未選擇狀態。json
因此考慮用一個數組存放選中元素的ID,選中某一行時，就將這一行的ID放在數組中，當返回上一頁的時候，遍歷頁面中的每一行，若是某一行的id在數組裏面，那麼就更新其爲選中狀態。"導出"時，將ID數組傳到後臺便可。數組
可是對於"全選"功能，點擊"全選"按鈕，全部的行都被選中，但當總數據量(total)上萬的時候，不可能把上萬的數據ID都放在數組裏面，因此考慮增長一個標誌位ide
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
});
}
相關文章
- 1. 狀態選擇器
- 2. checkbox JS選擇
- 3. 選擇框checkbox
- 4. html中radio、checkbox選中狀態研究
- 5. checkbox點擊切換選中狀態
- 6. thinkphp5頁面checkbox選中狀態
- 7. 判斷input checkbox選中狀態
- 8. Android設置checkbox爲選中狀態
- 9. checkbox橫向選擇
- 10. 安卓狀態選擇器
- 更多相關文章...
- • HTTP狀態碼 - HTTP 教程
- • ADO 添加記錄 - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 狀態選擇器
- 2. checkbox JS選擇
- 3. 選擇框checkbox
- 4. html中radio、checkbox選中狀態研究
- 5. checkbox點擊切換選中狀態
- 6. thinkphp5頁面checkbox選中狀態
- 7. 判斷input checkbox選中狀態
- 8. Android設置checkbox爲選中狀態
- 9. checkbox橫向選擇
- 10. 安卓狀態選擇器