如何使用插件实现树形

树形在做项目的时候也会经常使用到。在我的项目中一个间单的树形，因为这个树形只需要用到一级就可以，虽说只有一级很简单，但是没有做过树形，不知道如何做的，也没有思路这个树形的代码是如何实现的。于是到网看看相关的资料看看能不能找点思路。不料找到了一树形插件，不知道原来树形还有插件，既然有插件搭建树形就变的有简单了很多了，离成功有近了一步。下载了这jquery.ztree插件包，引入到了项目中。（如下图所示）

1、引入插件其中要引用的树形的样式

<link href="~/Content/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

2、写好装这个树形的ul标签的容器

<ul id="tree" class="ztree" style=""></ul>

 

3、还要引用其中主要要引用的几个js控件

<script src="~/Content/zTree/jquery/jquery.ztree.core.js"></script>

<script src="~/Content/zTree/jquery/jquery.ztree.excheck.js"></script>

<script src="~/Content/zTree/jquery/jquery.ztree.exedit.js"></script>

4、配置树形的参数

5、绑定数据的来源

1、type = "post" 表示异步加载采用 post 方法请求

2、contentType = "application/json" 可以满足 .Net 的编程需要，按照 JSON 格式提交参数3、获取数据的路径

4、获取到传回节点数据数组初始化树形

这个是树形的点击方法     

treeNode是返回值，从返回的数据中获取到点击的ID　　　

6、控制器查询数据

1、将查询子节点的数据的得到的数据用一个for循环通过拼接字符串将子节点拼接起来2、去除结尾多余的符号”,”

public ActionResult zTree()//数据来源SQL

        {

            StringBuilder sbTree = new StringBuilder();

            sbTree.Append("[{\"id\":\"" + 1 + "\",\"name\":\"" + "结账区内房间" + "\",\"Type\":\"" + 0 + "\",\"open\":\"" + true + "\",\"children\":[");

            //搭出根节点_Type:节点级别_open:默认状态_children:子节点

 

            var listTreeNodes = (from tbIndentDetail in myModels.P_IndentDetail

                                 join tbIndent in myModels.P_Indent on tbIndentDetail.IndentID equals tbIndent.IndentID

                                 //  join tbInventory in myModels.P_Inventory on tbIndent.IndentID equals tbInventory.IndentID

                                 join tbApartment in myModels.S_Apartment on tbIndentDetail.ApartmentID equals tbApartment.ApartmentID

                                 join tbmentber in myModels.S_MemberDateli on tbIndent.MemberDateliID equals tbmentber.MemberDateliID

                                 join tbGuest in myModels.P_Guest on tbmentber.GuestID equals tbGuest.GuestID

                                 where tbIndentDetail.StatusIndent == "登记"

                                 select new IndentVo

                                 {

                                     IndentIDs = tbIndentDetail.IndentID,

                                     ApartmentID = tbApartment.ApartmentID,

                                     GuestName = tbGuest.GuestName,

                                     RoomNumber = tbApartment.RoomNumber,

 

                                 }).ToList();//查询子节点数据   

            for (int i = 0; i < listTreeNodes.Count; i++)//通过拼接字符串将子节点拼接起来

            {

                sbTree.Append("{\"id\":\"" + listTreeNodes[i].IndentIDs + "\",\"name\":\"" + listTreeNodes[i].RoomNumber

                    + "  " + listTreeNodes[i].GuestName.Trim() + "\",\"Type\":\"" + 1 + "\"},");

            }

            sbTree.Remove(sbTree.Length - 1, 1);//去除结尾多余的符号”,”

            sbTree.Append("]}]");

            return Content(sbTree.ToString());//返回字符串

        }

完成以上几个步骤就可以实现树形功能了

效果如下如所示