JQueryEasUI的datagrid的使用方式总结.docx

JQuery EasyUI的datagrid的使用方式总结第一步：添加样式和js脚本在前台添加展示数据表格的table元素例如： 注：表格的属性可以在table中设置（Unobtrusive），也可以直接使用js脚本进行控制。建议使用js脚本控制 属性的定义：请参见Jquery easyui API第二步：引入jquery,jquery easyui,在doucment.ready中初始化表格的属性以及数据获取的方式。 例如：$(#tt).treegrid(url : role.do?action=findMenuRight,method : get,idField : menuIid,treeField : menuName,onLoadSuccess : function(row, data) / 方便查看获取到的数据/ alert(data);,columns : title : 菜单名称,field : menuName,width : 321,formatter : menuDraw, field : htmlValue,title : 功能权限,width : 800,formatter : rightDraw,onLoadSuccess : function() if ($(#isAdd).val() != true) var roleId = $(#roleId).val();checkedRights(roleId););function menuDraw(value, row, index) if (row.menuId != null & row.menuId != undefined) var htmlValue = + row.menuNamereturn htmlValue;function rightDraw(value, row, index)/TODO:Do somethingFormatter指向的是一个方法,表示该字段是怎么绘制的html,该方法是继承dataGrid的,jquery easyui api的datagrid中The cell formatter function, take three parameters:value: the field value.绑定字段的值rowData: the row record data. 这一行的对象,可以使用行的其他字段rowIndex: the row index. 行号Code example:$(#dg).datagrid(columns:field:userId,title:User, width:80,formatter: function(value,row,index)if (row.user)return ; else return value;);后台返回的数据格式:total: 7,rows: id: 1,name: All Tasks,begin: 3/4/2010,end: 3/20/2010,progress: 60,iconCls: icon-ok,id: 2,name: Designing,begin: 3/4/2010,end: 3/10/2010,progress: 100,_parentId: 1,state: closed,id: 21,name: Database,persons: 2,begin: 3/4/2010,end: 3/6/2010,progress: 100,_parentId: 2,id: 22,name: UML,persons: 1,begin: 3/7/2010,end: 3/8/2010,progress: 100,_parentId: 2,id: 23,name: Export Document,persons: 1,begin: 3/9/2010,end: 3/10/2010,progress: 100,_parentId: 2,id: 3,name: Coding,persons: 2,begin: 3/11/2010,end: 3/18/2010,progress: 80,id: 4,name: Testing,persons: 1,begin: 3/19/2010,end: 3/20/2010,progress: 20,footer: name: Total Persons:,persons: 7,iconCls: icon-sumTotal中存放总记录数,用于分