easy ui treegrid使用

返回数据格式:

{"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"}

]}

js初始:

$(‘#tt‘).treegrid({

url: ‘/Category/GetAllCategory‘,

title: ‘分类列表‘,

width: 700,

height: 500,

animate: true,

fitColumns: true,

rownumbers: false,

collapsible: true,

idField: ‘ID‘,

treeField: ‘CatName‘,

loadMsg: ‘正在加载分类信息...‘,

pagination: true,

singleSelect: false,

pageSize: 20,

pageNumber: 1,

pageList: [10, 20, 30],

//queryParams: queryData, //异步查询的参数

columns: [[

{ field: ‘ck‘, checkbox: true, align: ‘left‘, width: 50 },

{ field: ‘ID‘, title: ‘编号‘, width: 50 },

{ field: ‘CatName‘, title: ‘分类名‘, width: 150 },

//{ field: ‘ParentId‘, title: ‘父级编号‘, width: 80 },

{ field: ‘TreePath‘, title: ‘树目录‘, width: 80 },

{ field: ‘Level‘, title: ‘级别‘, width: 80 },

{

field: ‘IsLeaf‘, title: ‘是否是叶子节点‘, width: 120,

formatter: function (value, row, index) {

if (value == true) {

return "是";

} else {

return "否";

}

}

}

]],

toolbar: [{

id: ‘btnAdd‘,

text: ‘添加‘,

iconCls: ‘icon-add‘,

handler: function () {

//添加

$("#showDialog").dialog("setTitle", "添加分类").dialog("open");

$("#showWindow").attr("src", "/Category/Create");

}

},

{

id: ‘btnEdit‘,

text: ‘修改‘,

iconCls: ‘icon-edit‘,

handler: function () {

//修改

var rows = $("#tt").datagrid("getSelections");

if (rows.length != 1) {

$.messager.alert("提示", "请选择一条数据");

return;

}

$("#showDialog").dialog("setTitle", "修改角色").dialog("open");

$("#showWindow").attr("src", "/Roles/Edit?ID=" + rows[0].ID);

}

},

{

id: ‘btnDel‘,

text: ‘删除‘,

iconCls: ‘icon-remove‘,

handler: function () {

//删除

var rows = $("#tt").datagrid("getSelections");

if (rows.length > 0) {

$.messager.confirm("提示", "确定要删除吗?", function (b) {

if (b) {

var ids = "";

for (var i = 0; i < rows.length; i++) {

ids += rows[i].ID + ",";

}

ids = ids.substring(0, ids.length - 1);

$.post("/Roles/Delete", { ids: ids }, function (data) {

if (data == "ok") {

$("#tt").datagrid(‘reload‘);

$("#tt").datagrid("clearSelections");

} else {

$.messager.alert("提示", "删除失败");

}

});

}

});

}

else {

$.messager.alert("提示", "请选择要删除的行");

}

}

}]
            });

Html:

<table id="tt" style="width: 700px;" title="分类列表">
 </table>

来自为知笔记(Wiz)

easy ui treegrid使用,布布扣,bubuko.com

时间: 2024-10-11 23:03:45

easy ui treegrid使用的相关文章

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

JQuery Easy Ui (Tree树)详解(转)

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准

JQUERY EASY UI +TREE +SERVLET 显示菜单的例子

1.准备工作 (1)jquery easy ui (2)mysql数据 (3)eclipse开发环境等等 2.开发前端 <body class="easyui-layout"> <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;"><div clas

jQuery Easy UI Droppable(放置)组件

Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了: 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js&qu

jQuery Easy UI Resizable(调整大小)组件

Resizable(调整大小)组件,easyui基础组件之一,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件,使用比较简单,相关的属性.事件都 在例子中介绍了. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/jav

jQuery Easy UI Tooptip(提示框)组件

我们都知道DOM节点的title属性,Tooptip组件就是比较强大的title,它可以自由的设置自己的样式.位置以及有自己相关的触发事件. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src=&

jQuery Easy UI LinkButton(按钮)组件

LinkButton(按钮)组件,easyui基础组件之一 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></s