Tree资源树的实战研究

发布时间：2020-12-16 00:07:53 所属栏目：百科来源：网络整理

导读：背景简介：最近小编在做项目的时候，遇到了一个动态添加资源树的问题，经过几番实践，终于实现了最终的结果，下面我会将自己的经历一点点抛给大家，希望读者尽情享受这顿盛宴。这里，我们将实现如下图效果(功能介绍，通过选择年份显示左侧资源树，通过单击

背景简介：

最近小编在做项目的时候，遇到了一个动态添加资源树的问题，经过几番实践，终于实现了最终的结果，下面我会将自己的经历一点点抛给大家，希望读者尽情享受这顿盛宴。
这里，我们将实现如下图效果(功能介绍，通过选择年份显示左侧资源树，通过单击资源树在右侧表格中显示该指标中的档次信息):

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

HTML中就一句接收代码，Controller中将查询到的信息转换成json反到js中就可以了，这里主要是通过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,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转换拼接成树形结构的实战

这种方法HTML中也只有一句接收代码，js中就一句传递代码，主要代码在Controller中来实现的，代码如下：

调用后台数据的方法：

<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>

转换树形js的方法：

<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>

这个实现起来比较麻烦，其中涉及了好多拼接转换，真正实现不建议用这样的方式，可以通过这个方式来锻炼一下自己的逻辑能力还是很不错的O(∩_∩)O~

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

小编这里实现的时候用的是zTree，下面是需要注意的地方以及对应的代码：
HTML：树Easyui的引用，承载树的代码

<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>

js：资源树的查询方法,资源树的单击获取资源树节点ID之后查询内容的方法

<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>

Controller：资源的汇集，这里需要特别注意的是父节点需要当成一行数据和子节点放在一起（可以通过数据库设计到一起，也可以通过代码转换拼接到一起）小编这里是在Controller中进行的拼接

<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>

表结构：这里只需要用到下图红色字体的信息（类型名称是通过类型ID查询得到的）

四、总结收获

1、非常感谢在小编成长路上给予帮助与指导的师哥师姐 2、遇到问题先寻找思路很重要 3、有了思路就马上去践行，切记不要一直思考用那种方法更合适 4、践行之后的总结很重要，将自己开始到最终的思路缕一遍 5、搜查自己在实践过程中的局限性，寻求相应的解决办法 6、不要太在意自己的初速度，要在后天培养自己的加速度（踏实走好每一就是一个培养加速度的践行） 7、很长时间没有成效不要气馁焦躁，积极主动寻求帮助，站在巨人肩膀上 8、始终相信自己一定可以揭取最后的桂冠GO GO GO O(∩_∩)O~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!