由于easyui这个框架简化了不少开发过程，经常被拿来开发后台，但是其实有一个树型的控件，用起来稍微复杂一点，总结了一下最基本的用法！

首先是前台添加标签如下:

        <ul id="tt">

        </ul>

 

其次添加引用包

    <link href="http://www.mamicode.com/~/Content/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" />

    <link href="http://www.mamicode.com/~/Content/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet" />

    <script src="http://www.mamicode.com/~/Content/jquery-easyui-1.3.6/jquery.min.js"></script>

    <script src="http://www.mamicode.com/~/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，应该可以简化不少

有需要更多功能再去参考官方文档