资源描述：
《jqueryeasui的datagrid的使用方式总结》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、JQueryEasyUI的datagrid的使用方式总结第一步：添加样式和js脚本在前台添加展示数据表格的table元素例如：
注：表格的属性可以在table中设置（Unobtrusive），也可以直接使用js脚本进行控制。建议使用js脚本控制属性的定义：请参见JqueryeasyuiAPI第二步：引入jquery,
2、jqueryeasyui,在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:3
3、21,formatter:menuDraw},{field:'htmlValue',title:'功能权限',width:800,formatter:rightDraw}]],onLoadSuccess:function(){if($("#isAdd").val()!="true"){varroleId=$("#roleId").val();checkedRights(roleId);}}});functionmenuDraw(value,row,index){if(row.menuId!=null&row.menuId!=
4、undefined){varhtmlValue=''+row.menuNamereturnhtmlValue;}}functionrightDraw(value,row,index){//TODO:Dosomething}Formatter指向的是一个
5、方法,表示该字段是怎么绘制的html,该方法是继承dataGrid的,jqueryeasyuiapi的datagrid中Thecellformatterfunction,takethreeparameters:value:thefieldvalue.绑定字段的值rowData:therowrecorddata.这一行的对象,可以使用行的其他字段rowIndex:therowindex.行号Codeexample:$('#dg').datagrid({columns:[[{field:'userId',title:'User'
6、,width:80,formatter:function(value,row,index){if(row.user){returnrow.user.name;}else{returnvalue;}}}]]});后台返回的数据格式:{total:7,rows:[{id:1,name:"AllTasks",begin:"3/4/2010",end:"3/20/2010",progress:60,iconCls:"icon-ok"},{id:2,name:"Designing",begin:"3/4/2010",end:"3/10
7、/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:"ExportDocument",persons:1,b
8、egin:"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
