由于easyui这个框架简化了不少开发过程，经常被拿来开发后台，但是其实有一个树型的控件，用起来稍微复杂一点，总结了一下最基本的用法！
首先是前台添加标签如下:
<ul id="tt">
</ul>
其次添加引用包
<link href="~/Content/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet" />
<script src="~/Content/jquery-easyui-1.3.6/jquery.min.js"></script>
<script src="~/Content/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
前台代码如下:
<script>
isLoad = function () {
$("#tt").tree({
checkbox: false,
url: "/Home/GetArea",
loadFilter: function (data) {
if (data) {
alert(data);
if (data.d){
return data.d
} else {
return data;
}
}
}
//formatter: function (node) {
// return node.text;
//}
//animate: true,
//lines:true,
//onClick:function (node) {
// alert(node.text);
//},
//onBeforeExpand: function (node,param) {
// $("tt").tree("options").url = "/Home/GetSubAreaById?parentId="+node.id;
//}
});
}
$(function () {
isLoad();
});
</script>
这里要说一下，loadfilter加上后就已经可以展示了，主要起过滤作用
而如果不要loadfilter只要formatter的话，而可以自已定义需要显示的字段 以node.text表示显示text的值
加上animate:true,则展开收缩时会缓慢进行，有动画的效果
加上lines:true,则原先前面显示的是小三角
变为树形的+号
加上
onClick:function (node) {
alert(node.text);
}
则可以单击节点时显示相应的属性值
实现的后台代码，写了一个treehelper类
//有需要可以在拼接上加上图标属性等
public class TreeHelper
{
public static string GetDataString(List<TblArea> list, int id)
{
StringBuilder sb = new StringBuilder();
List<TblArea> tempList= list.Where(p=>p.AreaPId==id).ToList();
if (tempList.Count>0)
{
sb.Append("[");
for (int i = 0; i < tempList.Count; i++)
{
string childString = GetDataString(list,tempList[i].AreaId);
if (!string.IsNullOrEmpty(childString))
{
sb.Append("{ \"id\":\"" + tempList[i].AreaId + "\",\"text\":\"" + tempList[i].AreaName + "\",\"state\":\"closed\",\"children\":");
sb.Append(childString);
}
else
{
if (tempList[i].AreaId%2==0)
{
sb.Append("{\"id\":\"" + tempList[i].AreaId + "\",\"text\":\"" + tempList[i].AreaName + "\"},");
}
else
{
sb.Append("{\"id\":\"" + tempList[i].AreaId + "\",\"text\":\"" + tempList[i].AreaName + "\"},");
}
}
}
sb.Replace(‘,‘,‘ ‘,sb.Length-1,1);
sb.Append("]},");
}
return sb.ToString();
}
}
添加后台实现方法如下
public ContentResult GetArea()
{
nononodeleteImportantEntities db = new nononodeleteImportantEntities();
StringBuilder sb = new StringBuilder();
List<TblArea> province = db.TblArea.ToList();
if (province.Count > 0)
{
sb.Append(TreeHelper.GetDataString(province, 0));
sb = sb.Remove(sb.Length - 2, 2);
}
return Content(sb.ToString());
｝
此类主要是用来拼接easyui 能识别的json数据的，为什么要拼接，1因为官方所提供的就是这样的，不容易出错，只是写起来稍显费劲
后期将试着改用对象直接序列化json，应该可以简化不少
有需要更多功能再去参考官方文档
jQuery easyui的tree用法