EasyUI框架DataGrid插件使用重新加载-清除勾选-首次不加载

easyUI在不对其进行源码级别的重写的情况下，无疑是界面粗糙功能好用的。为什么前提是不重写easyUI框架，因为easyUI的功能和css、js、图片依赖关联很高，简单修改样式，都有可能带来原生功能的不可用，所以与其花大把时间去重写，不如花一点微不足道的时间去适应新的框架，往往不愿改变而选择去重写easyui，这就意味着你在的公司的技术真的很菜，准备跑路把。

谈到easyUI，就不得不提到使用最多的组件Datagrid插件，用别人代码，怎么能不看官方写的api解释了，下面链接是Datagrid的官方api地址http://www.jeasyui.net/plugins/183.html，但有时候官方的文档往往不够详细，可能个别属性和方法，需要依赖百度去查询。

easyUI因为其样式不美观，所以很多功能其实是用不到的。所以在这里简单记录一下常用的方法把。

以下是，我正在用的比较多的Datagrid的demo，一般是直接复制扒拉的。

drid=$('#drid').datagrid({
	method: "get",  //http请求类型，get/post
	url:'getData', //url地址
	fit : true, //自适应大小，填充容器
	fitColumns : false,//设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。 如果失效的话，可以去掉fitColumns属性
	//border : false,// 忘了
	idField : 'A', //标识字段
	sortOrder:'desc,asc', //定义列的排序顺序，只能用 'asc' 或 'desc'。
	sortName:'sort1,sort2',//	定义可以排序的列。
	striped:true,//设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
    //nowrap:true,//设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
	pagination:true,//设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
	rownumbers:true,//	设置为 true，则显示带有行号的列。
	pageNumber:1, //第一页
	queryParams: obj, //当请求远程数据时，发送的额外参数。这里非常重要好用，涉及到异步的下拉框参数，可以事先传值 obj.name='陈';
	pageSize : 20,    //页面显示条数
	pageList : [ 10, 20, 30, 40, 50 ],//可选择的页面显示条数
	//singleSelect: true,//设置为 true，则只允许选中一行。
	//singleRow:false, //忘了
	frozenColumns : [[//数据类型:array,列（column）属性一样，但是这些列将被冻结在左边。 
		{field:'c',checkbox:true,width:10},
		{field:'A',title:'主键',width:10,sortable:true,hidden:true},
		{field:'B',title:'标题1',width:10,sortable:true,hidden:true},
		{field:'C',title:'标题2',width:90,sortable:true}
	]],
	columns:[[//数据类型:array,数据网格（datagrid）的列（column）
		{field:'D',title:'标题3',width:40,sortable:true,
			formatter:function(value,row,index){ //这里来转换值
				if(row.CAIN_SEX==45){
				    return '值1'
				}else if(row.CAIN_SEX==46){
					return '值2'
				}else{
					return '值3'
				}
		}},
		{field:'CAIN_AUDIT_OPINION',title:'标题4',width:90,sortable:true,
			formatter:function(value,row,index){//这里来转换值
				if(row.A==0 ){
					return '值1';
				}else ( row.B==1){
					return '值2';
				}
			},styler: function(value,row,index){//这里来控制单元格的css
				if( row.A==0){

				}else if( row.B==1){
					return 'color:green;';
				}else if( row.C==2){
					return 'color:red;font-weight:bold;';
				}
			}
		},
		{field:'cz',title:'操作',width:200,sortable:true,
			formatter:function(value,row,index){
				return '&nbsp;<input type="button" class="link-button" value="浏览" onclick="view(\''+row.A+'\')" />';
			} 
										 
		}
	]],
	enableHeaderClickMenu: true,//忘了
	enableHeaderContextMenu: true,//忘了
	enableRowContextMenu: false,//忘了
	toolbar:'#tb', //工具栏，这里处理不好，会出现datagrid无法铺满整个页面，页面最好由工具栏div和表格div两个组成，按钮也放工具栏中
	onBeforeLoad: function (param) { //请求之前触发的方法，主要用来控制第一次加载页面，加不加载表格
		var firstLoad = $(this).attr("firstLoad");
		if (firstLoad == "false" || typeof (firstLoad) == "undefined") {
			$(this).attr("firstLoad", "true");
			return false;
		}
		return true;
	},
	rowStyler: function(index,row){//能够改变一行的样式，返回'background:red' 的样式。该函数需要两个参数
		if(row.A==0){

		}else if( row.B==1 ){
			return 'background-color:#a9dec2;';
		}else if( row.C==2){
			return 'background-color:#ecbbbb;font-weight:bold;';
		}
	},
	onLoadSuccess:function () {//加载完成后清除上次勾选的内容，很重要
		$("#drid").datagrid('clearSelections');
	}

});	

1.点击下一页，查询，怎么清除上次勾选的记录？

2.浏览、修改、删除后，怎么返回之前页面，且查询条件一致？

//查询
function search(){
   var obj=$("#tb").serializeObject();
   dg.datagrid("reload",obj);   //这里切记不要用load,会定位到第一页
}

这是官网提供的记录，但我更喜欢加入查询条件div的序列化参数；

3.怎么首次进入不加载datagrid,呈现空白页面？（百度这个很傻逼，往往出现在技术很菜的开发手中）

4.工具栏的下拉框条件首次加载表格，不发送参数到后台，导致查询范围变大？

<select id="orgName" name="orgName" class="easyui-combobox" data-options="width:150,prompt: '请选择单位'">

假设你的tb，工具栏里有这么一个需要请求后台的下拉框组件，此时，它和datagrid首次加载的请求实际是异步的，即datagrid还没有获取到orgName的条件参数值，就已经发送请求至后台了。然后两者同时加载完。这里就需要queryParams属性来发送额外的参数orgName，但这个值一般是锁死的，一般可以在页面加载的时候就可以拿到了。

第一步：页面加载时

<script type="text/javascript">
   var obj=$("#searchForm").serializeObject();
   obj.orgName='七七七幼儿园';

第二步：Datagrid初始化

5.修改、删除、批量删除，怎么获取当前选中内容？

function batchDel(){
   var rows = $('#drid').datagrid('getSelections'); //获取选中列
   var count = rows.length;
   if(count>0){
      var ids = []; //这里以数组形式往后台传值，不要超过1000个，因为数据库in不能超1000，后台用List<String>接收
      var nameStr="";
      for(var i=0;i<count;i++){
          ids.push(rows[i].ID);
          if(i==0){
             nameStr+=""+rows[i].NAME;
          }else{
             nameStr+=","+rows[i].NAME;
          }
      } 
      $.messager.confirm('确认','您确认要删除如下名单吗？'+nameStr,function(r){    
             if (r){   
                $.ajax({
                    type: "post",
                    url: 'url/'+ids,
                    success: function (data) {
                       successTip(data,dg,d);
                    },
                    error:function(){
                      $.messager.alert('提示','操作失败！','warning'); //这里弹出会自动消失
                    }
               })
             }    
     });
   }else{
      $.messager.alert('提示', '请选中要删除的内容');
      return;
   }
}