針對easyui中datagrid的使用總結

最近接手了一個實施週期比較長的項目，前臺使用技術是easyUI，而我現在需要修改現在一個組件，簡單來說就是一個刪選器。

由於代碼保密的問題，該頁面的圖不進行展示了。

頁面的刪選器是一個text後面跟着一個查詢的圖標，這裏原本是單選的篩選器。只能選擇一個。

根據客戶要求，修改爲多選放大鏡。而每一次刪選器打開要把上一次的查詢記錄顯示，並在前面打上勾，比如我第一次選了五條，再打開篩選器的，這五條要默認選中。

首先通過sql進行標識選中的數據，選中爲1  不選中爲null。

而後通過標識字段進行標識，其他代碼如下。

$("#accountNo").issMultipleMagnifier({
	    title:'活期賬戶',
	    nowrap: true,
		formid: 'form1',
		striped: true,
		url: '${systemctx}/publicMagnifier/publicMagnifier.json',
		linkName: 'accountNo',
		callSqlKey: 'magnify.accountmanager.currentaccquery',
		sortName: 'checkType',
		sortOrder: 'asc',
		remoteSort: false,
		idField:'ID',
		pagination:true,
		rownumbers:true,
		showFooter:true,
		singleSelect: false,
		columns: [[
				{field:'ck', checkbox:true},
				{title:'銀行賬號', field:'accountNo', width:160, sortable:true, align: 'left',formel: 'accountNo'},
				{title:'開戶行', field:'bankName', width:250, sortable:true, align: 'left'},
				{title:'賬戶用途', field:'accountPurpose', width:70, sortable:true, align: 'left'},
				{field:'ID', hidden:true,formel:'accountId'},
				{field:'checkType', hidden:true}
		]],
		onLoadSuccess : function(data){
			//獲取表格中的行
			var rows=$('#accountNo_datagrid').datagrid("getRows");
			var rowlength = rows.length;
			for(var i=0;i< rowlength;i++){
			   //如果當前行的checkType等於1 代表已經選中
			    if(rows[i].CHECKTYPE==1){
			       	$('#accountNo_datagrid').datagrid('checkRow', i);
			    }
			} 
		},
		onBeforeVaild:function(p){
			if('' == $("#agencyId").val()) {
				$.messager.alert('信息提示', "請先選擇單位放大鏡！");
				return false;
			}
			var exportStartDate = $("#exportStartDate").datebox("getValue");
			if('' == exportStartDate) {
				$.messager.alert('信息提示', "請先選擇查詢時間！");
				return false;
			}
		},
		onBeforeOpen:function(p){
			
			var exportStartDate = $("#exportStartDate").datebox("getValue");
			var accountIdArr = 4444444444;//僞賬戶，避免null
			if($("#accountId").val()!=""){
				accountIdArr = $("#accountId").val();
			}
		    var queryParams = {
		  		accountIdArr:  accountIdArr,
		  		agencyID:  $("#agencyId").val(),
				accountNO: '%' + $("#accountNo").val() + '%',
				exportStartDate: exportStartDate,
				statusId: '<%=RecordStatus.VALID %>'
		    };
		    return queryParams;
	    },
	    onClose:function(){
	        var accountNos = $("#accountNo").val();
	        var accountIds = $("#accountId").val();
	    	orgDatagrid(accountIds,accountNos);
	    	$("#accountNo").val('');
	    }
	});