ASP.MVC EASY UI 入门之 —— Tree & ComboTree - 怒放生命 - 推酷
ASP.MVC EASY UI 入门之 —— Tree & ComboTree - 怒放生命
1、常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的，虽然很简单，但是还是要实践的做一次，才能更清晰的了解和使用它！先上效果图
因为用的是code first，所以数据库的MODEL我是这样做的，这里面注释了许多，是再设计表结构的时候走的弯路和一些备用的东西。
关键的是ID自己的唯一标示，PID是所属的父级，无非就是一个递归表，也就是无极分类表。当然，这是设计的问题。
其次是显示的文字和点击文字后进入的一些操作。这里我只做了一个显示的文字TEXT还有点击文字后进入的相应链接。这里还可以加入显示的图片等内容！
Menu是数据库的结构，但是我们的tree和ComboTree需要的数据并非数据库里原样的数据，所以，我们针对他们需要的数据设计了2个类。
treedata就是他需要的数据的具体形式。其中attribute就是每个节点里需要的具体内容。参考EASYUI的DEMO和文档，我设计的这2个类。
namespace TOM.Model
public class Menu
[Required]
public int ID { get; set; }
public int? PID { get; set; }
[Required]
[MaxLength(100)]
public string Text { get; set; }
[StringLength(255)]
public string URL { get; set; }
//[ForeignKey(&PID&)]
//public virtual Menu Parent { }
//public virtual ICollection&Menu& Children { }
[NotMapped]
public class TreeData
//id: An identity value bind to the node.
public string id { get; set; }
//text: Text to be showed.
public string text { get; set; }
//state: The node state, 'open' or 'closed'.
public string state { get; set; }
//iconCls: The css class to display icon.
public string iconCls { get; set; }
//attributes: Custom attributes bind to the node.
public attribute attributes { get; set; }
//pid: string, parent id
public string pid { get; set; }
////checked: Whether the node is checked.
////public string @checked{}
//[DataMember(Name = &checked&)]
//public string ischecked { }
////attributes: Custom attributes bind to the node.
//public Dictionary&string, object& attributes { }
//public List&TreeData& children { }
////target: Target DOM object.
[NotMapped]
public class attribute
public string url { get; set; }
//other data
在EASY UI中，应该就是只有异步树的。当然，你如果按照官方要的数据一次性全都查出来，那么就不是同步树了。
每个节点都有一个点击事件，每次点击Tree就会默认的Post一个id给后台（当然是异步的时候，如果已经获取到数据了，它就不在POST）。
这里我做了2个事件。onClick事件，获取到的是节点数据。
此外，还有一个onLoadSuccess，这个是完成异步树的过程，它的任务是这样的，默认我们访问后台数据的时候，首先是'/Menu/AsyncTree'，仅仅是一个URL，木有参数
[HttpPost]
public JsonResult AsyncTree(int id = 0)
默认的是给0，那么，也就是先把第一级树节点查出来。
然后，当onLoadSuccess相应的时候，它会判断当前的节点是否有子节点（
.state == 'closed' 有子节点的节点，其状态是closed），如果有子节点，通过&t.tree('expandAll'
);就会展开这个子节点，那么如果这个子节点下的数据未被获取到，Tree就会默认的POST当前节点的id给后台，让后台去加载其子节点数据，相当于代替人工去click子节点。
也就是说，如果我们加入onLoadSuccess事件，并且通过
.state和&t.tree('expandAll'
)这2个关键操作，就能够实现异步的，一次性全部加载完毕所有的树（递归）。
如果我们不加入onLoadSuccess事件，也是可以的，那就是真正意义和形式上都是异步的。每次点击节点，如果节点状态是'closed'，且，其子节点数据并没有加载，那就Tree就会Post一个ID给后台。
//-----------异步树-------------------
$('#AsyncMenu').tree({　
url: '/Menu/AsyncTree',
lines: true,
checkbox: true,
//异步树的点击事件
onClick: function (node) {
if (node.attributes == undefined) {
if (node.attributes.url && node.attributes.url.length & 0) {
var src = node.attributes.
$.messager.alert('提示', '[' + src + ']！', 'info');
//异步树全部自动展开
onLoadSuccess: function (node, data) {
var t = $(this);
if (data) {
$(data).each(function (index, d) {
if (this.state == 'closed') {
t.tree('expandAll');
&&&前台的HTML这样写就可以
&&& &fieldset&
&&&&&&& &legend&异步树&/legend&
&&&&&&& &ul id=&AsyncMenu&&&/ul&
&&& &/fieldset&
此外，国人也有高手，扩展了这2个组件，使其支持，ID,PID这样的平滑结构。也就是说，不需要递归，只需要把数据全部一次性的读出来，由扩展方法来完成其节点和子节点的关系映射。节约了不少代码，当然，它就不是异步树了。扩展代码如下。
var sy = sy || {};/**
* 扩展tree和combotree，使其支持平滑数据格式
* @author 孙宇
* @requires jQuery,EasyUI
sy.loadFilter = {
loadFilter : function(data, parent) {
var opt = $(this).data().tree.
var idField, textField, parentF
if (opt.parentField) {
idField = opt.idField || 'id';
textField = opt.textField || 'text';
parentField = opt.parentField || 'pid';
var i, l, treeData = [], tmpMap = [];
for (i = 0, l = data. i & i++) {
tmpMap[data[i][idField]] = data[i];
for (i = 0, l = data. i & i++) {
if (tmpMap[data[i][parentField]] && data[i][idField] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textField];
tmpMap[data[i][parentField]]['children'].push(data[i]);
data[i]['text'] = data[i][textField];
treeData.push(data[i]);
return treeD
$.extend($.fn.combotree.defaults, sy.loadFilter);
$.extend($.fn.tree.defaults, sy.loadFilter);
这样一来，我们使用就相当方便了
前台HTML代码这样写
&&& &fieldset&
&&&&&&& &legend&同步树{id=0,pid=0}&/legend&
&&&&&&& 扩展tree和combotree，使其支持平滑数据格式
&&&&&&& &ul id=&ExtMenu&&&/ul&
&&& &/fieldset&
后台负责直接把表数据，无脑的都一次性读出来就完事了。
下面附上后台方法。
#region 异步树
[HttpPost]
public JsonResult AsyncTree(int id = 0)
TOM.DAL.MenuRepository d = new TOM.DAL.MenuRepository();
List&TOM.Model.TreeData& list = new List&TOM.Model.TreeData&();
var query = d.List().Where(m =& m.PID == id);
foreach (var item in query)
TOM.Model.TreeData temp = new TOM.Model.TreeData();
temp.id = item.ID.ToString();
temp.text = item.T
temp.state = hasChild(item.ID) ? &closed& : &open&;
temp.iconCls = &icon-add&;
temp.attributes = new TOM.Model.attribute() { url = item.URL };
list.Add(temp);
return Json(list);
/// &summary&
/// 判断是否有子节点
/// &/summary&
/// &param name=&id&&父节点ID&/param&
/// &returns&Bool&/returns&
private bool hasChild(int id)
TOM.DAL.MenuRepository d = new TOM.DAL.MenuRepository();
var query = d.List().Where(m =& m.PID == id);
return query.Count() & 0;
#endregion
#region 扩展支持{id=0，pid=0}格式的树
[HttpPost]
public JsonResult ExtTree()
TOM.DAL.MenuRepository d = new TOM.DAL.MenuRepository();
List&TOM.Model.TreeData& list = new List&TOM.Model.TreeData&();
var query = d.List();
foreach (var item in query)
TOM.Model.TreeData temp = new TOM.Model.TreeData();
temp.id = item.ID.ToString();
temp.pid = item.PID.ToString();
temp.text = item.T
temp.iconCls = &icon-add&;
temp.attributes = new TOM.Model.attribute() { url = item.URL };
list.Add(temp);
return Json(list);
#endregion
至于后台方法，看看就好了，本人MVC新手，写的不好。此文章也是我备忘用的。如果能给其他人带来方便那是最好的！
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见JQuery Easy UI —— 如何让DataGrid自适应页面宽度 - 苏显斌的Java空间 - ITeye技术网站
博客分类：
我想正在用JQuery Easy UI的朋友一定很希望DataGrid能够自适应页面大小变化，目前我还没发现其自带此功能，因此简单写了一个实现方法，与网友们分享，也希望能够帮助有需要的朋友。
下面是我基于JQuery做的一个实现：
* JQuery扩展方法，用户对JQuery EasyUI的DataGrid控件进行操作。
$.fn.extend({
* 修改DataGrid对象的默认大小，以适应页面宽度。
* @param heightMargin
高度对页内边距的距离。
* @param widthMargin
宽度对页内边距的距离。
* @param minHeight
最小高度。
* @param minWidth
最小宽度。
resizeDataGrid : function(heightMargin, widthMargin, minHeight, minWidth) {
var height = $(document.body).height() - heightM
var width = $(document.body).width() - widthM
height = height & minHeight ? minHeight :
width = width & minWidth ? minWidth :
$(this).datagrid('resize', {
height : height,
width : width
使用方法：
$(function() {
var datagridId = 'userDataGrid';
// 其他代码
// 第一次加载时自动变化大小
$('#' + datagridId).resizeDataGrid(20, 20, 300, 600);
// 当窗口大小发生变化时，调整DataGrid的大小
$(window).resize(function() {
$('#' + datagridId).resizeDataGrid(20, 20, 300, 600);
在此补充一下，由于IE6下JS的执行效率很低，因此在让DataGrid自适应页面大小变化的时候，请将DataGrid的fitColumns属性设置为false，否则改变页面大小会导致IE出现一定时间的停顿。设置方法为：
&&& $('#' + datagridId).datagrid({
&&&&&&& title: '用户类型',
&&&&&&& url: 'userType.json',
&&&&&&& fitColumns: false,
&&&&&&& .......
浏览: 67912 次
好用，谢了！就是有一点问题，如果DataGird 有分页栏，会 ...
这种方式是将工程发布为war还是ear？因为以前也这样写过，但 ...
spring data jpa相关代码demo下载:http: ...
楼主，能否给个完整的例子？在下在用jqplot绘图时，在添加了 ...
你复制出来一份不也需要释放吗？
你在引用端没释放jquery easy ui的tree点击问题
[问题点数：60分，结帖人dcxy0]
jquery easy ui的tree点击问题
[问题点数：60分，结帖人dcxy0]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。jquery easy ui tree使用的json格式后台如何生成？_百度知道
jquery easy ui tree使用的json格式后台如何生成？
我的entity字段id
//idname
//名称pid
//父idurl
//地址已经通过这个方法取到了所有数据，放在list里List&entity& list = (List&entity&) mapper.findAll();现在如何通过这个list获得生成多级jquery easy tree的json数据？？
提问者采纳
JsonObjec json = new JsonObject(list);String jsonString = json.toString();
[{&text&:&Languages&, &state&:&closed&, &children&:[{
&id&:&j1&,
&text&:&Java& },{
&id&:&j2&,
&text&:&C#& }]}]是这种格式的
提问者评价
采纳率100%
其他类似问题
为您推荐：
其他1条回答
的事实上事实上是ffffffffffff【【【【【【【【；；；；；；；；；；；
json的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁随笔 - 95&
文章 - 17&评论 - 10&trackbacks - 3
刚接触Easy UI，很多东西还是粗放式的，望理解。
后台采用的是ahsx&
代码如下：
&Handler.ashx
&%@&WebHandler&Language="C#"&Class="Handler"&%&using&Susing&System.Wpublic&class&Handler&:&IHttpHandler&{&&&&&&&&public&void&ProcessRequest&(HttpContext&context)&{&&&&&&&&context.Response.ContentType&=&"text/plain";&&&&&&&&string&method&=&context.Request["action"];&&&&&&&&switch&(method)&&&&&&&&{&&&&&&&&&&&&case&"GetModule":&&&&&&&&&&&&&&&&{&&&&&&&&&&&&&&&&&&&&string&a&=&context.Request.Params["id"];//参数为id&&&&&&&&&&&&&&&&&&&&TreeViewCommon&treeViewCommon&=&new&TreeViewCommon();&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&context.Response.Write(treeViewCommon.GetModule());&&&&&&&&&&&&&&&&&&&&break;&&&&&&&&&&&&&&&&}&&&&&&&&&&&&default:&&&&&&&&&&&&&&&&break;&&&&&&&&}&&&&}&&&&&public&bool&IsReusable&{&&&&&&&&get&{&&&&&&&&&&&&return&false;&&&&&&&&}&&&&}}
&Cs文件如下：TreeViewCommon.cs
&public&&string&GetModule()&
&&&&{&&&&&&&&string&sql&=&"SELECT&m.ID,&m.Name,&m.ParentID,&m.Url,&m.Ico&FROM&Module&m&ORDER&BY&m.Level,&m.[Index]";&&&&&&&&DataTable&dt&=&GetTable(sql);&&&&&&&&return&TableToEasyUITreeJson(dt,&"ParentID",&"0",&"ID",&"Name").Substring(12);&&&&}&&&&///&&summary&&&&&///&递归将DataTable转化为适合jquery&easy&ui&控件tree&,combotree&的&json&&&&///&该方法最后还要&将结果稍微处理下,将最前面的,"children"&字符去掉.&&&&///&&/summary&&&&&///&&param&name="dt"&要转化的表&/param&&&&&///&&param&name="pField"&表中的父节点字段&/param&&&&&///&&param&name="pValue"&表中顶层节点的值,没有&可以输入为0&/param&&&&&///&&param&name="kField"&关键字字段名称&/param&&&&&///&&param&name="TextField"&要显示的文本&对应的字段&/param&&&&&///&&returns&&/returns&&&&&public&static&string&TableToEasyUITreeJson(DataTable&dt,&string&pField,&string&pValue,&string&kField,&string&TextField)&&&&{&&&&&&&&StringBuilder&sb&=&new&StringBuilder();&&&&&&&&string&filter&=&String.Format("&{0}='{1}'&",&pField,&pValue);//获取顶级目录.&&&&&&&&DataRow[]&drs&=&dt.Select(filter);&&&&&&&&if&(drs.Length&&&1)&&&&&&&&&&&&return&"";&&&&&&&&sb.Append(",\"children\":[");&&&&&&&&foreach&(DataRow&dr&in&drs)&&&&&&&&{&&&&&&&&&&&&string&pcv&=&dr[kField].ToString();&&&&&&&&&&&&sb.Append("{");&&&&&&&&&&&&sb.AppendFormat("\"id\":\"{0}\",",&dr[kField].ToString());&&&&&&&&&&&&sb.AppendFormat("\"text\":\"{0}\"",&dr[TextField].ToString());&&&&&&&&&&&&sb.Append(TableToEasyUITreeJson(dt,&pField,&pcv,&kField,&TextField).TrimEnd(','));&&&&&&&&&&&&sb.Append("},");&&&&&&&&}&&&&&&&&if&(sb.ToString().EndsWith(","))&&&&&&&&{&&&&&&&&&&&&sb.Remove(sb.Length&-&1,&1);&&&&&&&&}&&&&&&&&sb.Append("]");&&&&&&&&return&sb.ToString();&&&&}
&aspx文件如下：
导入jquery-1.7.2.min.js、jquery.easyui.min.js、和自己的js（我在这里叫tree.js）文件加入：&ul&id="mytree"&class="easyui-tree"&&/ul&&&
&tree.js文件如下
var&dd&=&'[{"id":"0001","text":"1","children":[{"id":"","text":"4","children":[{"id":"","text":"7","children":[{"id":"0001","text":"9","children":[{"id":"","text":"10","children":[{"id":"","text":"11","children":[{"id":"0001","text":"12"}]}]}]}]},{"id":"","text":"8"}]},{"id":"","text":"5"},{"id":"","text":"6"}]},{"id":"0002","text":"2"},{"id":"0003","text":"3"}]';&&&&$(function&()&{&&&&&&&&$('#mytree').tree({&&&&&&&&&&&&//&&&&&&&&&&&&&&&&data:&eval(dd)&&&&&&&&&&&&//&&&&&&&&&&&&&&&&onClick:&function&(node)&{&&&&&&&&&&&&//&&&&&&&&&&&&&&&&&&&&$('#mytree').tree('beginEdit',&node.target);&&&&&&&&&&&&//&&&&&&&&&&&&&&&&}&&&&&&&&&&&&url:&'Handler.ashx?action=GetModule'&&&&&&&&});&&&&});
第二种方式，运用扩展实现一步加载
&扩展内容如下：
(function () {
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//地址：http://git.oschina.net/gson/jeasyuicn-ext/tree/master/ext.easyui/ext.tree/properties.loader
//*带参数初始化
//$("#tree").tree({
url:'tree.do'
queryParams:{pid:1}
//*参数变更
//$("#tree").tree("setQueryParams",{pid:1});
//重写tree的loader
$.extend($.fn.tree.defaults, {
loader: function (param, success, error) {
var opts = $(this).tree("options");
if (!opts.url) {
return false;
if (opts.queryParams) {
param = $.extend({}, opts.queryParams, param);
type: opts.method,
url: opts.url,
data: JSON2.stringify(param),
dataType: "text",
contentType: "application/ charset=utf-8", //application/json
success: function (data) {
success(JSON2.parse(data));
error: function () {
error.apply(this, arguments);
queryParams: {}
//设置参数
$.extend($.fn.tree.methods, {
setQueryParams: function (jq, params) {
return jq.each(function () {
$(this).tree("options").queryParams =
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
})(jQuery);
调用方法如下：
//运用扩展实现Tree的异步加载
//$("#menu").tree("setQueryParams", { "parentID": 0 });
$("#menu").tree({
url: '/ControlServices.svc/GetAsynEasyTree',
queryParams: { "parentID": 0 },
loadFilter: function (data) { //loadFilter 用于webServices、服务等【因为前面多个d】
if (data.d) {
return eval('(' + data.d + ')');
return eval('(' + data + ')');
onBeforeExpand: function (node) {
$("#menu").tree("setQueryParams", { "parentID": node.id });
$('#menu').tree('options').url = "/ControlServices.svc/GetAsynEasyTree";
数据层方法：
/// &summary&
/// 获取菜单信息，异步加载Tree
/// &/summary&
/// &param name="parentID"&ParentID&/param&
/// &returns&&/returns&
public DataTable GetAsynTree(long parentID)
var dataManager = new DataManager("TreeDB", "GetAsynTree");
IOHelper.WriteLine(@"E:\a.txt", parentID.ToString());
dataManager.SetParameters("@ParentID", Convert.ToInt64(parentID));
DataTable dt = new DataTable();
dataManager.ExecuteDataTable(dt);
#region DataTable转EasyUiTree的Json格式
/// &summary&
/// DataTable转EasyUiTree的Json格式 【内部方法，不做过多验证】
/// &/summary&
/// &param name="dt"&要转化的表&/param&
/// &param name="pField"&父节点对应字段&/param&
/// &param name="pValue"&父节点的值，默认为"0"&/param&
/// &param name="idField"&ID对应的字段&/param&
/// &param name="nameField"&Name对应的字段&/param&
/// &param name="isParentField"&是否是父节点对应的字段&/param&
/// &param name="isChooseParentNode"&是否选择父节点，有单选框、复选框的时候用；true：checkbox radio 可以选择父节点/子节点；false：radio 只能选择叶子节点&/param&
/// &param name="url"&url对应字段，可以为null
""&/param&
/// &param name="icon"&图片对应字段，可以为null
""&/param&
/// &returns&&/returns&
private static string CartDataTableToTreeJson1(DataTable dt, string pField, string pValue, string idField, string nameField, string isParentField, bool? isChooseParentNode, string url, string icon)
StringBuilder sb = new StringBuilder();
string filter = String.Format(" {0}={1} ", pField, pValue); //获取顶级目录.
DataRow[] drs = dt.Select(filter);
if (drs.Length & 1)
return "";
sb.Append(",\"children\":[");
foreach (DataRow dr in drs)
IOHelper.WriteLine(@"E:\a.txt", dr[idField].ToString());
string pcv = dr[idField].ToString();
sb.Append("{");
string strIsParent = dr[isParentField].ToString().Trim().ToLower();
//string strIsParent = "false";
if (strIsParent.Equals("true"))
if (!string.IsNullOrWhiteSpace(url))
sb.AppendFormat("\"id\":\"{0}\",", dr[idField].ToString().Trim() + "," + dr[url].ToString().Trim());
sb.AppendFormat("\"id\":\"{0}\",", dr[idField].ToString().Trim());
sb.AppendFormat("\"id\":\"{0}\",", dr[idField].ToString().Trim());
sb.AppendFormat("\"text\":\"{0}\",", dr[nameField].ToString().Trim());
if (!string.IsNullOrWhiteSpace(icon))
sb.AppendFormat("\"iconCls\":\"{0}\",", dr[icon].ToString().Trim());
//if (strIsParent.Equals("false"))
if (!string.IsNullOrWhiteSpace(url))
sb.Append("\"attributes\":{");
sb.AppendFormat("\"url\":\"{0}\",", dr[url].ToString().Trim());
sb.Append("},");
//if (isChooseParentNode.Equals(false))
if (strIsParent.Equals("true"))
sb.AppendFormat("\"nocheck\":\"{0}\",", true);
sb.AppendFormat("\"state\":\"{0}\"", strIsParent.Equals("true") ? "open" : "closed");
sb.Append(CartDataTableToTreeJson1(dt, pField, pcv, idField, nameField, isParentField, isChooseParentNode, url, icon).TrimEnd(','));
sb.Append("},");
if (sb.ToString().EndsWith(","))
sb.Remove(sb.Length - 1, 1);
sb.Append("]");
return sb.ToString();
#endregion
&DataCommand Name="GetAsynTree" CommandType="Text"
CommandDescrip="获取菜单信息，异步加载Tree"&
&CommandText&
--DECLARE @ParentID BIGINT
--SET @ParentID = 0
DECLARE @IsLeafNode BIT
SET @IsLeafNode = 0
SELECT m.ID, m.Name, m.[Url], m.Icon, m.[Level], m.[Index], m.IsEnabled,m.ParentID, m.SecondAncestorID,isnull(n.ChildNodesNumber,0) ChildNodesNumber,isnull(n.IsLeafNode,1) IsLeafNode FROM Module m
SELECT ParentID ID,COUNT(ParentID) ChildNodesNumber, @IsLeafNode IsLeafNode FROM Module
GROUP BY ParentID
ON m.ID=n.ID
ParentID=@ParentID
&/CommandText&
&Parameters&
&!--&Parameter Name="@DomainAccount" Size="10" DbType="AnsiString" Direction="Input"/&--&
&Parameter Name="@ParentID" DbType="Int64"/&
&/Parameters&
阅读(...) 评论()