easyui的datagrid和treegrid的使用

$('#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的使用的更多相关文章
- [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列
为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...
- RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单
在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能.在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D ...
- easyUI 中datagrid 返回列隐藏方法
easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...
- EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性
EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...
- easyui的datagrid行的某一列添加链接
通过formatter方法给easyui 的datagrid 每行增加操作链接. 效果图 jsp代码: <th field="url" width="100&quo ...
- easyui的datagrid打印(转)
在使用easyui插件的时候,使用最多的应该是datagrid插件.有时候根据客户需求,可能需要将datagrid内容进行打印,这时候如果直接调用window.print,可能由于easyui的dat ...
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...
随机推荐
- PHP SOAP
<?php $classmap = array(); //注意和实例一的不同 $soap = new SoapServer(null, array('uri' => "http: ...
- Web API之indexedDB和Web SQL
Web SQL已经被W3C废弃了,下面主要学下indexedDB. 一.参考链接 https://w3c.github.io/IndexedDB/
- VMware5.5-vCenter Converter(转换)
vCenter Converter 已知问题 出现:指定的参数不正确: "info.owner" 操作时一定是管理员,而不是管理员组的成员.或者: 如果 Converter Sta ...
- NOIP2017 题解(给自己看的) --有坑要填
目录 D1T1精妙证明: D1T3 D2T2 几道水题就不写了.... D1T1精妙证明: 把ax+by = z 的z按照模a剩余系分类 由于\((a,b)=1\)所以对于每个\(k\in[0, a) ...
- Linux基础(一)磁盘分区
磁盘分区 一.磁盘结构 先来看看老磁盘 1)磁头(head):不解释 2)扇区(sector):磁盘的最小存储单位,大小为512bytes或者4k 3)磁道(trcack):扇区组成的一个圆 4)柱面 ...
- 潭州课堂25班:Ph201805201 django 项目 第二十五课 文章多级评论前后台实现 (课堂笔记)
添加新闻评论功能 1.分析 业务处理流程: 判断前端传的新闻id是否为空,是否为整数.是否不存在 判断评论的内容是否为空 判断是否有父评论,父评论的id是否与新闻id匹配 判断用户是否登录 保存新闻评 ...
- [USACO09JAN]最好的地方Best Spot
OJ题号:洛谷2935 思路:Floyd #pragma GCC optimize ("O3") #include<cstdio> #include<cctype ...
- Flask jinja2
{{ }} #引用 执行 非逻辑代码 {% %} #逻辑代码 引用变量 @app.template_global() # 全局函数 Markup # 安全标签字符串儿 {% macro func() ...
- yii2 basic版基础部分
Yii2.0 basic 版 yii 官方网站:http://www.yiiframework.com/ 一.安装: 1.下载地址:http://www.yiichina.com/download 从 ...
- keystone 安装随笔
keystone 代码库 git clone https://git.openstack.org/openstack/keystone.git cd keystone keystone配置文件 etc ...