背景简介：

一、自己动手js拼接树实践

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
//通过年份查询定性指标，返回树-马康-2016-3-25 22:22:20
function QueryUnitObjectByYearType() {
    var nodeChild = document.getElementById("NodeChild");
    //获取下拉框中的年份
    var CheckYear = $('#CheckYear').combobox('getValue');

    //查询资源信息
    $.post("/SetQualitativeTargetLevel/QueryQualitativeTargetByYear?CheckYear=" + CheckYear, {}, function (data) {
        //添加的时候先清除div中的数据  
        $("#tree").empty();
        //将得到的集合按照指标类型去重放到res集合中
        var res = [];
        var json = {};
        for (var i = 0; i < data.length; i++) {
            if (!json[data[i].DictionaryName]) {
                res.push(data[i].DictionaryName);
                json[data[i].DictionaryName] = 1;
            }
        }
        //遍历去重之后的集合，显示到树的div中
        $.each(res, function (i, item) {
            if (item == "班子") {
                $("#tree").append("<ul id='UnittreeTarget' ><li><span>" + item + "</span></li></ul>");
            }
            else {
                $("#tree").append("<ul id='CardrestreeTarget' ><li><span>" + item + "</span></li></ul>");
            }
        });
        //遍历向div中添加查询到的指标信息
        $.each(data, function (i, item) {
            if (item.DictionaryName == "班子") {
                $("#UnittreeTarget").append("<ul><li><span>" + item.QualitativeTargetName + "</span></li></ul>");
            }
            else {
                $("#CardrestreeTarget").append("<ul><li><span>" + item.QualitativeTargetName + "</span></li></ul>");
            }
        });
    });
}
-</span>

二、模仿老系统通过Controller中json转换拼接成树形结构的实战

    调用后台数据的方法：

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
#region QueryQualitativeTargetByYear 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
        /// <summary>
        /// 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
        /// </summary>
        /// <returns></returns>
        public string QueryQualitativeTargetByYear()
        {

            //实例化返回数据的载体-AllQuantifyResultInputViewModel（实例化伟涛写的ViewModel）
            List<SetQualitativeTargetViewModel> SetQualitativeTargetViewModel = new List<SetQualitativeTargetViewModel>();

            //获取界面传过来的考核年份
            string CheckYear1 = Request["CheckYear"];
            //将考核年份转换为int类型
            int CheckYear = Convert.ToInt32(CheckYear1);


            //通过考核年份调用服务端查询定量考核指标名称的方法（调用伟涛写的查询方法）
            SetQualitativeTargetViewModel = ISetQualitativeTarget.QueryQualitativeTargetByYear1(CheckYear);

            //将查询到的集合按照类型ID排序
            var str = from p in SetQualitativeTargetViewModel orderby p.DictionaryID select p;


            //实例化一个datatable
            DataTable dtTreeInfo = new DataTable();

            //添加列头
            dtTreeInfo.Columns.Add("id");
            dtTreeInfo.Columns.Add("name");
            //定义变量
            string DictionaryName = "";

            foreach (var item in str)
            {
                //判断去重
                if (DictionaryName != item.DictionaryName)
                {
                    //将不重复的值放到datatable中
                    DictionaryName = item.DictionaryName;
                    DataRow data = dtTreeInfo.NewRow();
                    data["id"] = item.DictionaryID;
                    data["name"] = item.DictionaryName;
                    dtTreeInfo.Rows.Add(data);
                }
            }

            string strJson = getJson(dtTreeInfo, SetQualitativeTargetViewModel);
            //将查询到的数据转换为Json返回到界面上  
            return strJson;

        }
        #endregion
-</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
 /// <summary>
        /// 节点树的组合-父节点树的遍历-马康-2016-4-5 14:00:35
        /// </summary>
        /// <param name="dt"></param>
        /// <returns></returns>
        public string getJson(DataTable dt, List<SetQualitativeTargetViewModel> SetQualitativeTargetViewModel)
        {
            //实例化承载字符串的json
            StringBuilder json = new StringBuilder();
            json.Append("[");

            foreach (DataRow dr in dt.Rows)
            {
                //将传进来的dt转换成只有子节点的dt
                DataTable dtChildren = new DataTable();
                //添加列头
                dtChildren.Columns.Add("id");
                dtChildren.Columns.Add("name");

                json.Append("{\"id\":" + dr["id"].ToString());
                json.Append(",\"text\":\"" + dr["name"].ToString() + "\"");
                json.Append(",\"state\":\"closed\"");

                //按照类型查询相应的定性指标
                var str = from m in SetQualitativeTargetViewModel where (m.DictionaryID.ToString() == dr["id"].ToString()) select m;
                //通过循环将查询到的定性指标存放到DataTable中
                foreach (var item in str)
                {
                    //实例化一个DataRow
                    DataRow data = dtChildren.NewRow();
                    //向DataRow中添加列头
                    data["id"] = item.QualitativeTargetID;
                    data["name"] = item.QualitativeTargetName;
                    //将dataRow中的数据添加到DataTable中
                    dtChildren.Rows.Add(data);
                }

                //调用D层方法获取dataTable
                if (dtChildren.Rows.Count == 0)
                {
                    return null;
                }
                //添加树字节点的json
                if (dt != null && dt.Rows.Count > 0)
                {
                    json.Append(",\"children\":[");
                    //调用将子节点转换成json树结构的方法
                    json.Append(DataTable2Json(dtChildren, dr["id"].ToString()));
                    json.Append("]");
                }
                json.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                json.Remove(json.Length - 1, 1);
            }
            //添加最后的]
            json.Append("]");
            //返回json
            return json.ToString();
        }

        #region DataTable2Json 子节点树的遍历-马康-2016-4-5 14:04:36
        /// <summary>  
        /// DataTable2Json 子节点树的遍历
        /// </summary>  
        /// <param name="dt"></param>  
        /// <returns></returns>  
        public static string DataTable2Json(DataTable dt, string pid)
        {
            //实例化json
            StringBuilder jsonBuilder = new StringBuilder();
            //循环，将数据转换成树结构的json
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //实例化并承接表示GUID
                    Guid id = new Guid(pid);
                    jsonBuilder.Append("\"");
                    //将列头字符转换成小写字母
                    dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();
                    //将列头为name转换成text
                    if (dt.Columns[j].ColumnName == "name") dt.Columns[j].ColumnName = "text";
                    //添加
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");
                }

                if (dt.Columns.Count > 0)
                {
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                }
                jsonBuilder.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }
            return jsonBuilder.ToString();
        }
        #endregion 
-</span>

三、使用Easyui通过js控制的实战

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
<script src="../../Content/zTree3.5/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="../../Content/zTree3.5/js/jquery.ztree.core-3.5.min.js"></script>
    <script src="../../Content/zTree3.5/js/jquery.ztree.excheck-3.5.js"></script>
    <link href="../../Content/zTree3.5/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

 @*树的加载*@
        <div id="tree" class="easyui-panel" data-options="region:'west',split:true" title="定性指标体系" style="width: 200px;">
        </div>
-</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
//通过年份查询定性指标，返回树-马康-2016-3-25 22:22:20
function QueryUnitObjectByYearType() {
    //获取下拉框中的年份
    var CheckYear = $('#CheckYear').combobox('getValue');

    //加载为分配角色树
    var tree = {
        /**
        * 所有的初始化的操作
        */
        setting:
        {
            //定义单击树节点的事件（js中必须有zTreeOnClick这个function）
            callback: {
                onClick: zTreeOnClick
            },
            //树的格式
            check: {
                enable: false,
                chkboxType: { "Y": "", "N": "" }
            },
            //树的数据
            data:
            {
                key:
                {
                    //要显示的字段
                    name: "QualitativeTargetName"
                },
                simpleData:
                {
                    enable: true,   //是否显示树形结构
                    //子节点
                    idKey: "QualitativeTargetID",
                    //父节点
                    pIdKey: "DictionaryID",
                    rootPId: "0"
                }
            },
            open:true
        }
    };

    //post提交，将查询条件传到controller中，并且接受controller返回回来的数据
    $.post("/SetQualitativeTargetLevel/QueryQualitativeTargetByYear?CheckYear=" + CheckYear, {}, function (result) {
        //jquery中的zTree方法，放置的容器（$("#tree")），配置（ tree.setting），数据（result）
        $.fn.zTree.init($("#tree"), tree.setting, result);
    });
}

//全局变量，为了单击的时候将单击的指标ID存入其中，添加的时候使用
var OnclickQualitativeTargetID = "";
//树的单击事件-根据年份和定性指标ID查询定性档次-马康-2016-4-6 22:03:34
function zTreeOnClick(e, treeId, treeNode) {
    //获取下拉框中的年份
    var CheckYear = $('#CheckYear').combobox('getValue');

    //获取单击的指标ID
    OnclickQualitativeTargetID = treeNode.QualitativeTargetID;

    //定性指标基础信息上面显示单击的定性指标名称
    document.getElementById("NodeChild").innerHTML = treeNode.QualitativeTargetName;

    //通过年份和指标Id查询未录入成绩的考核对象
    $('#dg').datagrid({
        url: '/SetQualitativeTargetLevel/QueryQualitativeTargetLevelByTargetYear?CheckYear=' + CheckYear + '&QualitativeTargetID=' + OnclickQualitativeTargetID,
        //title: '演示表格使用',  
        width: "100%",
        striped: true, //行背景交换                 
        fitColumns: true,
        idField: 'ID',
        loadMsg: '正在加载用户的信息...',
        pagination: true,
        singleSelect: false,

        pageList: [10, 20, 30, 40, 50],
        pageSize: 10,
        pageNumber: 1,
        queryParams: {
            searchName: $("#searchName").val()
        },

    }).datagrid("reload");
}
-</span>

<span style="font-family:KaiTi_GB2312;font-size:18px;">-
        #region QueryQualitativeTargetByYear 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
        /// <summary>
        /// 根据年份分页查询定性指标-马康-2016-3-4 0:17:45
        /// </summary>
        /// <returns></returns>
        public ActionResult QueryQualitativeTargetByYear()
        {

            //实例化返回数据的载体-AllQuantifyResultInputViewModel（实例化伟涛写的ViewModel）
            List<SetQualitativeTargetViewModel> listSetQualitativeTargetVM = new List<SetQualitativeTargetViewModel>();

            //获取界面传过来的考核年份
            string CheckYear1 = Request["CheckYear"];
            //将考核年份转换为int类型
            int CheckYear = Convert.ToInt32(CheckYear1);

            //通过考核年份调用服务端查询定量考核指标名称的方法（调用伟涛写的查询方法）
            listSetQualitativeTargetVM= ISetQualitativeTarget.QueryQualitativeTargetByYear1(CheckYear);

            //用linq语句将查询到的集合按照类型ID排序,用这个排序的集合进行循环
            //（因为需要往listSetQualitativeTargetVM集合中添加数据，用listSetQualitativeTargetVM集合循环就会出错）
            var str = from p in listSetQualitativeTargetVM orderby p.DictionaryID select p;

            //定义一个变量来存放名称，去重的时候用到
            string DictionaryName = "";
            foreach (var item in str)
            {
                //实例化一个实体
                SetQualitativeTargetViewModel enSetQualitativeTargetVM = new SetQualitativeTargetViewModel();
                //判断去重
                if (DictionaryName != item.DictionaryName)
                {
                    //将不重复的值放到listSetQualitativeTargetVM集合中当成一条数据
                    DictionaryName = item.DictionaryName;
                    //将类型ID放入指标ID中
                    enSetQualitativeTargetVM.QualitativeTargetID = item.DictionaryID;
                    //将类型名称放入指标名称中
                    enSetQualitativeTargetVM.QualitativeTargetName = item.DictionaryName;
                    //将实体添加到list集合中
                    listSetQualitativeTargetVM.Add(enSetQualitativeTargetVM);
                }
            }
           
            //将查询到的数据转换为Json返回到界面上  
            return Json(listSetQualitativeTargetVM, JsonRequestBehavior.AllowGet);
        }
        #endregion
-</span>

四、总结收获

Tree资源树的实战研究

原文：http://blog.csdn.net/makang456/article/details/51085326