Datagride的初始化方式方式1 ：class类型创建，这个创建方式比较简单，如果在已知表格内容的情况下可以使用，还是挺漂亮的
<table class="easyui-datagrid"><thead><tr><th data-options="field:’code’">Code</th><th data-options="field:’name’">Name</th><th data-options="field:’price’">Price</th></tr></thead><tbody><tr><td>001</td><td>name1</td><td>2323</td></tr><tr><td>002</td><td>name2</td><td>4612</td></tr></tbody> </table>
方式2：通过JavaScript方式创建，这种方式优势在于与后台的交互比较方便1：生明一个Table
<table id="dg"></table>
2:在Js中实现
$(‘#dg’).datagrid({url:’datagrid_data.json’,columns:[[{field:’code’,title:’Code’,width:100},{field:’name’,title:’Name’,width:100},{field:’price’,title:’Price’,width:100,align:’right’}]] }); 上边的只是参考帮助文档的创建方式，下面将结合前后台对具体的内容进行实现
项目的后台使用的是SpringMvc,数据库是Mybaits
加载Url与Colum1：前台JS
datagrid=$("#dg").datagrid({url:"/Test3/ModuleBeanController/getAll.do",//加载的URLisField:"id",pagination:true,//显示分页pageSize:5,//分页大小pageList:[5,10,15,20],//每页的个数fit:true,//自动补全fitColumns:true,iconCls:"icon-save",//图标title:"用户管理",columns:[[//每个列具体内容{field:’id’,title:’id’,width:100,},{field:’pid’,title:’pid’,width:100},{field:’text’,title:’text’,width:100}]]})
2:后台的controller层getAll.do
@RequestMapping(value="/getAll")@ResponseBodypublic List<ModuleBean> getAll(String page,String rows,String text) {return moduleBeanService.getAll(page,rows,text);}介绍一下几个参数
page:页数
rows：每页行数
Text：在以后的通过用户名查询时使用
3：service 层
getall()
@Overridepublic List<ModuleBean> getAll(String page,String rows,String text) {// TODO Auto-generated method stubpage = (page==null?"1":page);rows = (rows==null?"5":rows);return modulebeanmapper.getAll(PageUtil.getRowNum(Integer.parseInt(page), Integer.parseInt(rows),text));}
4:mapper层
getall（）
<select id="getAll" resultMap="BaseResultMap" parameterType="map"> select * from tbl_sys_module <if test="#{text} != ‘%%’"> where TEXT like #{text,jdbcType=VARCHAR} </if> limit #{curRow},#{pageSize}</select>就是一个查询语句select * from 表 where Text like #{text} limit rows,page
通过map返回
我的js的全部内容
var datagrid;var rowEditor=undefined;$(function(){datagrid=$("#dg").datagrid({url:"/Test3/ModuleBeanController/getAll.do",//加载的URLisField:"id",pagination:true,//显示分页pageSize:5,//分页大小pageList:[5,10,15,20],//每页的个数fit:true,//自动补全fitColumns:true,iconCls:"icon-save",//图标title:"用户管理",columns:[[//每个列具体内容{field:’id’,title:’id’,width:100,editor : {//是否可编辑type : ‘validatebox’,options : {//必须校验required : true}}},{field:’pid’,title:’pid’,width:100,editor : {type : ‘validatebox’,options : {required : true}}},{field:’text’,title:’text’,width:100,editor : {type : ‘validatebox’,options : {required : true}}}]],toolbar:[//工具条{text:"增加",iconCls:"icon-add",handler:function(){//回调函数if(rowEditor==undefined){datagrid.datagrid(‘insertRow’,{//如果处于未被点击状态，在第一行开启编辑index: 0,row: {}});rowEditor=0;datagrid.datagrid(‘beginEdit’,rowEditor);//没有这行，即使开启了也不编辑}}},{text:"删除",iconCls:"icon-remove",handler:function(){var rows=datagrid.datagrid(‘getSelections’);if(rows.length<=0){$.messager.alert(‘警告’,’您没有选择’,’error’);}else if(rows.length>1){$.messager.alert(‘警告’,’不支持批量删除’,’error’);}else{$.messager.confirm(‘确定’,’您确定要删除吗’,function(t){if(t){$.ajax({url : ‘/Test3/ModuleBeanController/deletecustomer.do’,data : rows[0],dataType : ‘json’,success : function(r) {if (r.success) {datagrid.datagrid(‘acceptChanges’);$.messager.show({msg : r.msg,title : ‘成功’});editRow = undefined;datagrid.datagrid(‘reload’);} else {/*datagrid.datagrid(‘rejectChanges’);*/datagrid.datagrid(‘beginEdit’, editRow);$.messager.alert(‘错误’, r.msg, ‘error’);}datagrid.datagrid(‘unselectAll’);}});}})}}},{text:"修改",iconCls:"icon-edit",handler:function(){var rows=datagrid.datagrid(‘getSelections’);if(rows.length==1){if(rowEditor==undefined){var index=datagrid.datagrid(‘getRowIndex’,rows[0]);rowEditor=index;datagrid.datagrid(‘unselectAll’);datagrid.datagrid(‘beginEdit’,index);}}}},{text:"查询",iconCls:"icon-search",handler:function(){}},{text:"保存",iconCls:"icon-save",handler:function(){datagrid.datagrid(‘endEdit’,rowEditor);rowEditor=undefined;}},{text:"取消编辑",iconCls:"icon-redo",handler:function(){rowEditor=undefined;datagrid.datagrid(‘rejectChanges’)}}],onAfterEdit:function(rowIndex, rowData, changes){var inserted = datagrid.datagrid(‘getChanges’, ‘inserted’);var updated = datagrid.datagrid(‘getChanges’, ‘updated’);if (inserted.length < 1 && updated.length < 1) {editRow = undefined;datagrid.datagrid(‘unselectAll’);return;}var url = ”;if (inserted.length > 0) {url = ‘/Test3/ModuleBeanController/addcustomer.do’;}if (updated.length > 0) {url = ‘/Test3/ModuleBeanController/addcustomer.do’;}$.ajax({url : url,data : rowData,dataType : ‘json’,success : function(r) {if (r.success) {datagrid.datagrid(‘acceptChanges’);$.messager.show({msg : r.msg,title : ‘成功’});editRow = undefined;datagrid.datagrid(‘reload’);} else {/*datagrid.datagrid(‘rejectChanges’);*/datagrid.datagrid(‘beginEdit’, editRow);$.messager.alert(‘错误’, r.msg, ‘error’);}datagrid.datagrid(‘unselectAll’);}});},onDblClickCell:function(rowIndex, field, value){if(rowEditor==undefined){datagrid.datagrid(‘beginEdit’,rowIndex);rowEditor=rowIndex;}}});$("#search").click(function(){datagrid.datagrid(‘load’,{text:$("#text").val()});});})
2：controller层全部经验是由痛苦中粹取出来的
