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

JQuery EasyUI的datagrid的使用方式总结第一步：添加样式和js脚本在前台添加展示数据表格的table元素例如：div table id=tt style=width: 700px; title=标题，可以使用代码进行初始化，也可以使用这种属性的方式 iconcls=icon-edit /table/div注：表格的属性可以在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 = input onclick=cmChange(this) type=checkbox class=roleCM parentId=+ row._parentId+ name=menuCH_+ row.menuId+ value=+ row.menuId + / + row.menuNamereturn htmlValue;}}function rightDraw(value, row, index){//TODO:Do something}Formatter指向的是一个方法,表示该字段是怎么绘制的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 row.user.name;} 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: