Mikel
[转载]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>
效果图：
