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.menuName return 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: 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-sum"}]}Total中存放总记录数,用于分页,数据数组存在rows中,字段中必须有_parentId,id和name可以是别的字段,在idField : 'menuIid', treeField : 'menuName',中指定.footer可以省略。