树形方法

最新推荐文章于 2022-10-23 10:06:36 发布

@爱好者

最新推荐文章于 2022-10-23 10:06:36 发布

阅读量378

点赞数 1

本文链接：https://blog.csdn.net/weixin_44565319/article/details/99697941

版权

把你想要显示的数据查询出来，然后再用树形方法把数据追加出来，如图
在这里插入图片描述

下面是源代码
public ActionResult selectRoomConsumption()//数据来源SQL
  {
    StringBuilder sbTree = new StringBuilder();//初始化
    sbTree.Append("[{\"id\":\"" + 1 + "\",\"name\":\"" + "结账区内房间" + "\",\"Type\":\"" + 0 + "\",\"open\":\"" + true + "\",\"children\":[");
    //搭出根节点_Type:节点级别_open:默认状态_children:子节点
    var listTreeNodes = (from tbR in myModel.R_OrderFormDetail
              join tbG in myModel.S_GuestRoom on tbR.GuestRoomID equals tbG.GuestRoomID
              join tbB in myModel.B_OrderForm on tbR.OrderFormID equals tbB.OrderFormID
              join tbS in myModel.S_GuestInformation on tbB.GuestInformationID equals tbS.GuestInformationID
              where tbR.ZhaungTai == true                       
              select new OrderForm
               {
                 OrderFormDetailID = tbR.OrderFormDetailID,
                 GuestRoomID = tbG.GuestRoomID,
                 OrderFormID = tbB.OrderFormID,
                 GuestInformationID = tbS.GuestInformationID,
                 RoomNumber = tbG.RoomNumber,
                 Name = tbS.Name,
                }).ToList();//查询子节点数据    	
          for (int i = 0; i < listTreeNodes.Count; i++)//通过拼接字符串将子节点拼接起来
            {
                sbTree.Append("{\"id\":\"" + listTreeNodes[i].GuestRoomID + "\",\"name\":\""+listTreeNodes[i].RoomNumber + "  " + listTreeNodes[i].Name.Trim() + "\",\"number\":\"" + listTreeNodes[i].RoomNumber + "\",\"Type\":\"" + 1 + "\"},");
            }
            sbTree.Remove(sbTree.Length - 1, 1);//去除结尾多余的符号”,”
            sbTree.Append("]}]");
            return Content(sbTree.ToString());//返回字符串
        }
再到视图写下面的代码
//筛选出想要的数据，树形方法 
        var setting = {
            view: { //效果参数
                selectedMulti: true //获取多个节点
            },
            callback: {//回调函数
                onClick: zTreeOnClick,//点击树形节点                  
            },
        }
        $.ajax({
            type: 'post',
            contentType: "application/json",
            url: "/KfFroom/FangTaitu/selectRoomConsumption",//控制器链接
            dataType: "json",
            success: function (data) {//传回节点数据数组
                console.log(data);
                $.fn.zTree.init($("#tree"), setting, data);//初始化树形
            }
        });
         function zTreeOnClick() { };//调用zTreeOnClick()，才能显示出树形方法
         
再加入下面这三个插件，便能实现树形方法了
<script src="~/zTreezTree_115926/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="~/zTreezTree_115926/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script src="~/zTreezTree_115926/zTree_v3/js/jquery.ztree.exedit.js"></script>