$('#listTree').treegrid({
idField: 'id',
treeField: 'menuName',
columns: [[ { title: 'Task Name', field: 'menuName', width: 180 },
{ field: 'menuUrl', title: 'progress', width: 60, align: 'right' } ]] });
var data = { "total": 3, "rows": [{ "id": 0, "menuName": "管理员首页", "menuUrl": "/main/admin/index.action", "menuPCode": -1, "isLeaf": "0", "status": "1", "icon": "", "createUser": "system", "createDate": "2014-01-24 17:10:25", "modifyUser": "system", "modifyDate": "2014-01-24 17:10:25" }, { "id": 1, "menuName": "修改密码", "menuUrl": "/main/admin/modifyPwd.action", "menuPCode": 0, "isLeaf": "1", "status": "1", "icon": "", "createUser": "system", "createDate": "2014-01-24 17:10:25", "modifyUser": "system", "modifyDate": "2014-01-24 17:10:25", "_parentId": 0 }, { "id": 2, "menuName": "图片上传", "menuUrl": "/image/admin/uploadImage.action", "menuPCode": 1, "isLeaf": "1", "status": "1", "icon": "", "createUser": "system", "createDate": "2014-01-24 17:10:25", "modifyUser": "system", "modifyDate": "2014-01-24 17:10:25", "_parentId": 1 }], "footer": [{ "name": "Total Persons:", "persons": 7, "iconCls": "icon-sum" }] };
$("#listTree").treegrid('loadData', data); $('#list').datagrid({
width: 1000,
height: 500,
columns: [[ { title: 'Task Name', field: 'menuName', width: 180 },
{ field: 'menuUrl', title: 'menuUrl', width: 60, align: 'right' } ]] });
var data = { "total": 3, "rows": [{ "id": 0, "menuName": "管理员首页", "menuUrl": "/main/admin/index.action", "menuPCode": -1, "isLeaf": "0", "status": "1", "icon": "", "createUser": "system", "createDate": "2014-01-24 17:10:25", "modifyUser": "system", "modifyDate": "2014-01-24 17:10:25" }, { "id": 1, "menuName": "修改密码", "menuUrl": "/main/admin/modifyPwd.action", "menuPCode": 0, "isLeaf": "1", "status": "1", "icon": "", "createUser": "system", "createDate": "2014-01-24 17:10:25", "modifyUser": "system", "modifyDate": "2014-01-24 17:10:25", "_parentId": 0 }, { "id": 2, "menuName": "图片上传", "menuUrl": "/image/admin/uploadImage.action", "menuPCode": 1, "isLeaf": "1", "status": "1", "icon": "", "createUser": "system", "createDate": "2014-01-24 17:10:25", "modifyUser": "system", "modifyDate": "2014-01-24 17:10:25", "_parentId": 1 }], "footer": [{ "name": "Total Persons:", "persons": 7, "iconCls": "icon-sum" }] };
$("#list").datagrid('loadData', data);

需要注意的是:data的数据,不是json字符串,是json对象

easyui的datagrid和treegrid的使用的更多相关文章

  1. [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

    为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...

  2. RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单

    在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...

  3. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

  4. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  5. easyui的datagrid行的某一列添加链接

    通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...

  6. easyui的datagrid打印(转)

    在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...

  7. EasyUI的datagrid分页

    EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...

  8. easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题

    做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...

  9. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

随机推荐

  1. 分布式缓存技术redis系列(二)——详细讲解redis数据结构(内存模型)以及常用命令

    https://www.cnblogs.com/hjwublog/p/5639990.html

  2. BZOJ.5093.[Lydsy1711月赛]图的价值(NTT 斯特林数)

    题目链接 对于单独一个点,我们枚举它的度数(有多少条边)来计算它的贡献:\[\sum_{i=0}^{n-1}i^kC_{n-1}^i2^{\frac{(n-2)(n-1)}{2}}\] 每个点是一样的 ...

  3. 机器学习系列-tensorflow-01-急切执行API

    tensorflow急切执行概述 Eager execution is an imperative, define-by-run interface where operations are exec ...

  4. JavaScript—异步提交表单的6种方式

    FormData的详细介绍及使用请点击此处,那里对FormData的方法和事件已经表述的非常清楚,这里就不再浪费时间在介绍一遍了.本文主要针对FormData对象的使用以及异步文件上传进行详细的说明. ...

  5. BZOJ3070 : [Pa2011]Prime prime power 质数的质数次方

    对于$a^b$,如果$b=2$,那么在$[\sqrt{n},\sqrt{n}+k\log k]$内必定能找到$k$个质数作为$a$. 筛出$n^{\frac{1}{4}}$内的所有质数,暴力枚举所有落 ...

  6. HTML(四)

    html表格 table常用标签 1.table标签:声明一个表格 2.tr标签:定义表格中的一行 3.td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属 ...

  7. Cocos Creator存储和读取用户数据--官方文档

    存储数据 cc.sys.localStorage.setItem(key, value) 上面的方法需要两个参数,用来索引的字符串键值 key,和要保存的字符串数据 value. 假如我们要保存玩家最 ...

  8. Spring 4 MVC example with Maven - [Source Code Download]

    In this tutorial, we show you a Spring 4 MVC example, using Maven build tool. Technologies used : Sp ...

  9. Node辅助工具NPM&REPL

    Node辅助工具NPM&REPL NPM和REPL是node的包管理器和交互式解析器,可以有效提高开发者效率 NPM npm(Node Package Manager)是node包管理器,完全 ...

  10. day7接口开发

    一.数据库操作, 1.创建游标时指定游标类型为字典,返回值类型为字典,方便取值 cur = coon.cursor(cursor=pymysql.cursor.Dictursor) 2.获取执行查询S ...