[转载]jQuery EasyUI ComboTree在ASP.NET MVC中的使用 - initial2013 - 博客园

[转载]jQuery EasyUI ComboTree在ASP.NET MVC中的使用 – initial2013 – 博客园.

JQuery EasyUI中的ComboTree是一个比较常用的树形下拉控件，使用起来比较方便，详细使用方法见官方链接。http://www.jeasyui.com/documentation/combotree.php

但是在组织异步数据的时候感觉比较麻烦，所以今天在这里总结一些我的处理方式，有错误之处还望指正。

项目中有这样一个商品分类表，其对应的实体如下：

public partial class GoodsCategories
{
public int Id { get; set; }
public int Parentid { get; set; }
public int Theleft { get; set; }
public int Theright { get; set; }
public string CategoryName { get; set; }
public int Depth { get; set; }
public int Status { get; set; }
public string CategoryPic { get; set; }
public int Sequence { get; set; }
public string KeyWords { get; set; }
public string Description { get; set; }
public string Parentids { get; set; }
public string Arrchildids { get; set; }
public System.DateTime AddTime { get; set; }
}

其中Parentid字段就是用来维系数据之间的非线性关系的。

添加一个类JTreeNode，该类用来表示ComboTree控件需要返回的数据结构：

public class JTreeNode
{
public int id { get; set; }
public string text { get; set; }
public string state { get; set; }
public bool? Checked { get; set; }
public string iconCls { get; set; }
public object attributes { get; set; }
public JTreeNode[] children { get; set; }

public static string ConvertToJson(JTreeNode node)
{
StringBuilder sb = new StringBuilder();
sb.Append("{");

sb.AppendFormat("\"id\":{0},", node.id);

if (!string.IsNullOrWhiteSpace(node.state))
{
sb.AppendFormat("\"state\":\"{0}\",", node.state);
}
if (!string.IsNullOrWhiteSpace(node.iconCls))
{
sb.AppendFormat("\"iconCls\":\"{0}\",", node.iconCls);
}
if (node.Checked != null)
{
sb.AppendFormat("\"checked\":\"{0},\"", node.Checked);
}

// to append attributes...
if (node.attributes != null)
{
var attributesType = node.attributes.GetType();
foreach (var item in attributesType.GetProperties())
{
var value = item.GetValue(node.attributes);
if (value != null)
{
sb.AppendFormat("\"{0}\":\"{1}\",", item.Name, value);
}
}
}

//recursive append children
if (node.children != null && node.children.Length > 0)
{
StringBuilder sbChildren = new StringBuilder();
foreach (var item in node.children)
{
sbChildren.AppendFormat("{0},", ConvertToJson(item));
}

sb.AppendFormat("\"children\":[{0}],", sbChildren.ToString().TrimEnd(','));
}

sb.AppendFormat("\"text\":\"{0}\"", node.text);

sb.Append("}");

return sb.ToString();
}
}

JTreeNode类中包含一个静态的方法，用来将一个JTreeNode对象递归解析成JSON格式的字符串；

so,接下来就是要根据表GoodsCategories中的数据构造一个JTreeNode对象，控制器中的代码：

public ActionResult LoadCategoriesTree()
{
#region cache
ICache cache = new AspnetCache();
var categories = new List();

string key = "GoodsCategories";
var obj = cache.Get<List>(key);
if (obj != null)
{
categories = obj as List;
}
else
{
categories = _goodsCategoriesService.QueryOver().ToList();
cache.Add(key, categories);
}
#endregion

JTreeNode jTreeNode = new JTreeNode() { id = 0, text = "所有分类" };
this.ConstructJTreeNode(ref jTreeNode, categories);

var jsonResult = "[" + JTreeNode.ConvertToJson(jTreeNode) + "]";
return Content(jsonResult);
}

public void ConstructJTreeNode(ref JTreeNode node, List categories)
{
//find children
var pid = node.id;
var children = from i in categories where i.Parentid == pid select i;

if (children.Count() > 0)
{
List temp = new List();
foreach (var item in children)
{
var model = new JTreeNode()
{
id = item.Id,
text = item.CategoryName
};
if (item.Depth < 3)
{
model.state = "closed";
}
temp.Add(model);

}
node.children = temp.ToArray();
}

//递归遍历
if (node.children != null)
{
for (int i = 0; i < node.children.Length; i++)
{
ConstructJTreeNode(ref node.children[i], categories);
}
}

}

前端：

<script type="text/javascript">// <![CDATA[
    $(function () {
        $('#categoryid').combotree('setValue', @ViewBag.SelectedCategoryId);
    });
// ]]></script>

<select class="easyui-combotree" id="categoryid" style="width: 200px;" name="categoryid" data-options="url:'/ProductMan/LoadCategoriesTree',required:true"></select>

效果图：