layui zTree 控件 AJAX绑定点击tree事件获取tree值

html和js

html 复制代码

 <div>
     <ul id="treeDemo" class="ztree"></ul>
 </div>
 <script>
     // zTree 配置
     var setting = {
         data: {
             simpleData: {
                 enable: true,
                 idKey: "id",
                 pIdKey: "pid",
                 rootPId: 0
             }
         },
         callback: {
             onClick: zTreeOnClick  // 点击事件
         }
     };
     // ===================== 关键：AJAX 获取树数据 =====================
     $(function () {
         $.ajax({
             type: "POST",
             data: [],
             url: "/SalesOpportunity/GET_SALES_OPPORTUNITY_PROJECT",
             success: function (res) {
                 console.log(res, zNodes);
                 var zNodes = res.data;
                 // 初始化树
                 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
             }
         });
     });

     // zTree点击事件
     function zTreeOnClick(event, treeId, treeNode) {
         //$("#showText").text("ID：" + treeNode.id + "，名称：" + treeNode.name);
         $("#PROJECT_TITLE").val(treeNode.name);
         $("#PROJECT_INFO").val(treeNode.name);
         $("#EST_AMOUNT").val(treeNode.id * 10);

         $("#NEEDS").val(treeNode.name);
         $("#RESPONSE").val(treeNode.name);
         $("#NEED_SUPPORT").val(treeNode.name);

         $("#PROJECT_STATUS").val("进行中");
         $("#PROJECT_LEVEL").val("A");
         $("#REMARKS").val(treeNode.name);
     }

     // 点击按钮 → 获取当前选中的节点
     function getTreeSelected() {
         // 1. 获取 zTree 实例
         var zTree = $.fn.zTree.getZTreeObj("treeDemo");

         // 2. 获取当前选中的节点
         var nodes = zTree.getSelectedNodes();

         // 3. 判断有没有选中
         if (nodes.length == 0) {
             layer.msg("请先选择一个项目！", { icon: 2 });
             return;
         }

         // 4. 拿到值！
         var id = nodes[0].id;
         var name = nodes[0].name;

         // 你想干嘛就干嘛
         alert("选中ID：" + id + "\n选中名称：" + name);
     }
 </script>

Controller：

cs 复制代码

        [HttpPost]
        public ActionResult GET_SALES_OPPORTUNITY_PROJECT()
        {
            MyResponse result = new MyResponse();
            result.code = 200;
            result.success = true;
            result.message = "";

            List<zTreeClass> list = new List<zTreeClass>();
            for (int i = 0; i < 5; i++)
            {
                zTreeClass z = new zTreeClass();
                z.id = i+1;
                z.name = $"XXX项目{i + 1}";
                z.pid = 0;
                list.Add(z);
            }
            result.data = list;

            return Json(result);
        }

        public class zTreeClass
        {
            //节点的id值
            public int id { get; set; }
            //节点的name值
            public string name { get; set; }
            //父节点id值，多层tree的子节点配置此id值，根结点id为0
            public int pid { get; set; } = 0;
        }

后端返回data的格式要求（必须这样）

cs 复制代码

{
  "code": 0,
  "data": [
    { "id": 1, "name": "XXXX项目1", "pid": 0 },
    { "id": 2, "name": "XXXX项目2", "pid": 0},
    { "id": 3, "name": "XXXX项目3", "pid": 0},
    { "id": 4, "name": "XXXX项目4", "pid": 0 }
  ]
}

layui zTree 控件 AJAX绑定 点击tree事件 获取tree值

html和js

Controller：

后端返回data的格式要求（必须这样）

预览

layui zTree 控件 AJAX绑定点击tree事件获取tree值