JQueryEasUIdatagrid使用方式总结.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.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: clo