datagrid数据表格使用方法

将静态HTML渲染为datagrid样式：

<!-- 方式一：将静态HTML渲染为datagrid样式 --><table class="easyui-datagrid"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年龄</th></tr></thead><tbody><tr><td>001</td><td>小明</td><td>90</td></tr><tr><td>002</td><td>老王</td><td>3</td></tr></tbody></table>

发送ajax请求获取json数据创建datagrid

<!-- 方式二：发送ajax请求获取json数据创建datagrid --><table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'" class="easyui-datagrid"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年龄</th></tr></thead></table>

使用easyUI提供的API创建datagrid：

 <div><table id="mytable"></table></div>

<!-- 方式三：使用easyUI提供的API创建datagrid --><script type="text/javascript">$(function(){//页面加载完成后，创建数据表格datagrid$("#mytable").datagrid({//定义标题行所有的列columns:[[{title:'编号',field:'id',checkbox:true},{title:'姓名',field:'name'},{title:'年龄',field:'age'},{title:'地址',field:'address'}]],//指定数据表格发送ajax请求的地址url:'${pageContext.request.contextPath }/json/datagrid_data.json',rownumbers:true,singleSelect:true,//定义工具栏toolbar:[{text:'添加',iconCls:'icon-add',//为按钮绑定单击事件handler:function(){alert('add...');}},{text:'删除',iconCls:'icon-remove'},{text:'修改',iconCls:'icon-edit'},{text:'查询',iconCls:'icon-search'}],//显示分页条pagination:true});});</script>

如果数据表格中使用了分页条，要求服务端响应的json变为：

请求参数：page:1 当前第几页 rows:10 每页多少条。

响应：为上面的json数据，total 共多少条信息，rows当前页的信息集合。

介绍完毕，下面是扩展，会实际举例说明：

举例：扩展工具栏，点击事件，数据回显，带查询条件分页等；

先创建table:

 <div region="center" border="false"><table id="grid"></table></div>

页面加载完成后，根据id绑定成为datagrid：

     $('#grid').datagrid( {fit : true,border : true,rownumbers : true,striped : false,pageList: [10],pagination : true,toolbar : toolbar,url : "demoAction_pageQuery.action",idField : 'id',columns : columns,//为数据表格绑定双击事件onDblClickRow : doDblClickRow});

定义列：

 // 定义列var columns = [ [ {field : 'id',checkbox : true,},{field : 'name',title : '姓名',width : 120,align : 'center'}, {field : 'telephone',title : '手机号',width : 120,align : 'center'}, {field : 'deltag',title : '是否删除',width : 120,align : 'center',formatter : function(data,row, index){if(data=="0"){return "正常使用"}else{return "已删除";}}} ] ];

工具栏：

//工具栏var toolbar = [ {id : 'button-view', text : '查询',iconCls : 'icon-search',handler : doView}, {id : 'button-add',text : '增加',iconCls : 'icon-add',handler : doAdd}, {id : 'button-delete',text : '删除',iconCls : 'icon-cancel',handler : doDelete},{id : 'button-save',text : '还原',iconCls : 'icon-save',handler : doRestore}];

绑定工具栏事件：

 function doAdd(){//alert("增加...");$('#addStaffWindow').window("open");}

删除按钮点击事件，判断是否选中了数据，获取当前选中的数据信息：批量获取id属性

 function doDelete(){//获取数据表格中所有选中的行，返回数组对象var rows = $("#grid").datagrid("getSelections");if(rows.length == 0){//没有选中记录，弹出提示$.messager.alert("提示信息","请选择需要删除的信息！","warning");}else{//选中,弹出确认框$.messager.confirm("删除确认","你确定要删除选中的信息吗？",function(r){if(r){var array = new Array();//确定,发送请求//获取所有选中信息的idfor(var i=0;i<rows.length;i++){var data= rows[i];//json对象var id = data.id;array.push(id);}var ids = array.join(",");//1,2,3,4,5location.href = "demoAction_deleteBatch.action?ids="+ids;/**$.post("demoAction_deleteBatch.action",{"ids":ids},function(data){alert(data);});**/}});}}

上面还定义了一个双击事件：这里扩展一下回显

 //数据表格绑定的双击行事件对应的函数function doDblClickRow(rowIndex, rowData){//打开修改窗口$('#editdemoWindow').window("open");//使用form表单对象的load方法回显数据$("#editdemoForm").form("load",rowData);}

扩展：分页查询（带有过滤条件）

datagrid提供的方法：用于重新发送ajax请求，并且可以提交参数

使用：、

第一步：提供一个工具方法，可以将指定的form表单中所有的输入项转为json数据，用于参数提交

 //定义一个工具方法，用于将指定的form表单中所有的输入项转为json数据{key:value,key:value}$.fn.serializeJson=function(){  var serializeObj={};  var array=this.serializeArray();$(array).each(function(){  if(serializeObj[this.name]){  if($.isArray(serializeObj[this.name])){  serializeObj[this.name].push(this.value);  }else{  serializeObj[this.name]=[serializeObj[this.name],this.value];  }  }else{  serializeObj[this.name]=this.value;   }  });  return serializeObj;  };

第二步：为查询窗口中查询按钮绑定事件
注意这里调用的是数据表格的方法，页面并没有刷新。

$("#btn").click(function(){//将指定的form表单中所有的输入项转为json数据{key:value,key:value}var p = $("#searchForm").serializeJson();console.info(p);//调用数据表格的load方法，重新发送一次ajax请求，并且提交参数$("#grid").datagrid("load",p);//关闭查询窗口$("#searchWindow").window("close");});

服务端实现：

1.包装PageBean工具类：封装分页相关的属性，生成get，set方法，在SSH项目底层代码构建文章中，分页查询方法扩展里已实现，参考文章。

2.在BaseDao中扩展通用分页查询方法：在SSH项目底层代码构建文章中，分页查询方法扩展里已实现，参考文章。

第三步后端：修改Action中分页查询方法，这里是多条件的。

 public String pageQuery(){DetachedCriteria dc = pageBean.getDetachedCriteria();//动态添加过滤条件String addresskey = model.getAddresskey();if(StringUtils.isNotBlank(addresskey)){//添加过滤条件，根据地址关键字模糊查询dc.add(Restrictions.like("addresskey", "%"+addresskey+"%"));}Region region = model.getRegion();if(region != null){String province = region.getProvince();String city = region.getCity();String district = region.getDistrict();dc.createAlias("region", "r");if(StringUtils.isNotBlank(province)){//添加过滤条件，根据省份模糊查询-----多表关联查询，使用别名方式实现//参数一：分区对象中关联的区域对象属性名称//参数二：别名，可以任意dc.add(Restrictions.like("r.province", "%"+province+"%"));}if(StringUtils.isNotBlank(city)){//添加过滤条件，根据市模糊查询-----多表关联查询，使用别名方式实现//参数一：分区对象中关联的区域对象属性名称//参数二：别名，可以任意dc.add(Restrictions.like("r.city", "%"+city+"%"));}if(StringUtils.isNotBlank(district)){//添加过滤条件，根据区模糊查询-----多表关联查询，使用别名方式实现//参数一：分区对象中关联的区域对象属性名称//参数二：别名，可以任意dc.add(Restrictions.like("r.district", "%"+district+"%"));}}subareaService.pageQuery(pageBean);this.java2Json(pageBean, new String[]{"currentPage","detachedCriteria","pageSize","decidedzone","subareas"});return NONE;}

扩展：鼠标离焦事件，根据手机号查询数据库回显数据

<td>来电号码:</td>
<td><input type="text" class="easyui-validatebox" name="telephone" required="true" /><script type="text/javascript">$(function(){//页面加载完成后，为手机号输入框绑定离焦事件$("input[name=telephone]").blur(function(){//获取页面输入的手机号var telephone = this.value;//发送ajax请求，请求Action，在Action中远程掉调用crm服务，获取客户信息，用于页面回显$.post('noticebillAction_findCustomerByTelephone.action',{"telephone":telephone},function(data){if(data != null){//查询到了客户信息，可以进行页面回显var customerId = data.id;var customerName = data.name;var address = data.address;$("input[name=customerId]").val(customerId);$("input[name=customerName]").val(customerName);}else{//没有查询到客户信息，不能进行页面回显$("input[name=customerId]").val("");$("input[name=customerName]").val("");}});});});</script>
</td>

扩展方法：datagrid编辑功能使用方式

注意：数据表格编辑功能是以列为单位，通过数据表格中的列属性定区具体那一列具有编辑功能：

开始编辑：

结束编辑：

插入一行数据：

删除一行：

获得指定行对象的索引：

数据表格提供的用于监听结束编辑事件：

实际例子：增删改查，发送ajax请求。

<table id="mytable"></table><!--使用easyUI提供的API创建datagrid --><script type="text/javascript">$(function(){var myIndex = -1;//全局变量，值为正在编辑行的索引//页面加载完成后，创建数据表格datagrid$("#mytable").datagrid({//定义标题行所有的列columns:[[{title:'编号',field:'id',checkbox:true},{width:150,title:'姓名',field:'name',editor:{type:'validatebox',options:{}}},{width:150,title:'年龄',field:'age',editor:{type:'numberbox',options:{}}},{width:150,title:'日期',field:'address',editor:{type:'datebox',options:{}}}]],//指定数据表格发送ajax请求的地址url:'${pageContext.request.contextPath }/json/datagrid_data.json',rownumbers:true,singleSelect:true,//定义工具栏toolbar:[{text:'添加',iconCls:'icon-add',//为按钮绑定单击事件handler:function(){$("#mytable").datagrid("insertRow",{index:0,//在第一行插入数据row:{}//空行});$("#mytable").datagrid("beginEdit",0);myIndex = 0;}},{text:'删除',iconCls:'icon-remove',handler:function(){//获得选中的行对象var rows = $("#mytable").datagrid("getSelections");if(rows.length == 1){var row = rows[0];//获得指定行对象的索引myIndex = $("#mytable").datagrid("getRowIndex",row);}$("#mytable").datagrid("deleteRow",myIndex);//$.post();}},{text:'修改',iconCls:'icon-edit',handler:function(){//获得选中的行对象var rows = $("#mytable").datagrid("getSelections");if(rows.length == 1){var row = rows[0];//获得指定行对象的索引myIndex = $("#mytable").datagrid("getRowIndex",row);}$("#mytable").datagrid("beginEdit",myIndex);}},{text:'保存',iconCls:'icon-save',handler:function(){$("#mytable").datagrid("endEdit",myIndex);}}],//显示分页条pagination:true,pageList:[3,5,7,10],//数据表格提供的用于监听结束编辑事件onAfterEdit:function(index,data,changes){console.info(data);$.post();}});});</script>

。