The layui tree component layui.tree, infinite multi-layer loop access node value

front page code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Assign_ADD.aspx.cs" Inherits="MyProject.Assign_ADD" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>角色编辑</title>
    <link href="/JS/layui/css/layui.css?v=1.0" rel="stylesheet" />
    <link href="/layuiadmin/style/admin.css?v=1.0" rel="stylesheet" />
    <script src="/JS/jquery-3.4.1.js?v=1.0"></script>
    <script src="/layuiadmin/layui/layui.js?v=1.0"></script>
    <script src="/layuiadmin/lib/admin.js?v=1.0"></script>
    <script src="/JS/layui/layui.js?v=1.0"></script>
    <script src="/JS/layui/layui-tree01.js?v=1.0"></script>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <div class="layui-btn-container">
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
</div>
                <form class="layui-form" action="">
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">成员</label>
                        <div class="layui-input-block">
                            <div id="divUser" class="demo-tree-more"></div>
                        </div>
                    </div>
                    
                </form>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn sim_btn">提交</button>
                            <input type="button" id="btnReset" class="layui-btn layui-btn-primary" value="重置" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="hdid" value="<%=strid %>" />
    <input type="hidden" id="hdisEditAll" value="<%=strisEditAll %>" />
    <input type="hidden" id="hdisFenzhen" value="<%=strisFenzhen %>" />
    <input type="hidden" id="hduserID" value="<%=userID %>" />
    <input type="hidden" id="hdmenuID" value="<%=menuID %>" />
    <script type="text/javascript">
        //这里一定要设置全局变量,不然下面用的时候,未定义
        var layer, form, laypage, laydate, tree, util, dataUser, data01;
        $(function () {
            layui.use(['index', 'layer', 'form', 'laypage', 'laydate', 'tree', 'jquery', 'util'], function () {
                layer = layui.layer;
                form = layui.form;
                laypage = layui.laypage;
                laydate = layui.laydate;
                tree = layui.tree;
                util = layui.util;
                var $ = layui.jquery; 
				
                dataUser = <%=jsonTree %>;
                //alert(dataUser);
                

                //成员
                form.on('checkbox(cbCOM)', function (data) {//列表中复选框点击事件
                    //console.log(data.elem); //得到checkbox原始DOM对象
                    //console.log(data.elem.checked); //是否被选中,true或者false
                    //console.log(data.value); //复选框value值,也可以通过data.elem.value得到
                    //console.log(data.othis); //得到美化后的DOM对象
                    var cb = data.elem;
                    var userID = $(cb).attr("id");//id userID工号  
                    var hduserID = $("#hduserID").val();//隐藏域中存放的工号集合以逗号隔开
                    if (data.elem.checked) {//如果当前复选框改为选中状态
                        if (hduserID == "") {//如果还没有选择项,则先以,号开头
                            $("#hduserID").val("." + hduserID + userID + ".");//工号的组合
                        }
                        else {
                            $("#hduserID").val(hduserID + userID + ".");
                        }

                    } else {

                        //$("#checkall").removeAttr("checked");//无效.1.2.3.4.5.
                        //form.render("checkbox");//重新渲染页面checkbox控件
                        var hduserIDlist = $("#hduserID").val();
                        $("#hduserID").val(hduserIDlist.replace(userID + ".", ""));//把集合中已选择的工号和名称移除掉。
                    }
                });

                
                //取组织架构
                tree.render({
                    elem: '#divUser'
                    , data: dataUser
                    , showCheckbox: true  //是否显示复选框
                    , id: 'treeUser'//树对象的名称,用来获取或设置值
                    , isJump: true //是否允许点击节点时弹出新窗口跳转
                    , click: function (obj) {
                        var data = obj.data;  //获取当前点击的节点数据
                        layer.msg('状态:' + obj.state + '<br>节点数据:' + JSON.stringify(data));
                    }
                });

                //按钮事件
                util.event('lay-demo', {
                    getChecked: function (othis) {
                        var checkedData = tree.getChecked('treeUser'); //获取选中节点的数据

                        layer.alert(JSON.stringify(checkedData), { shade: 0 });
                        console.log(checkedData);
                    }
                    , setChecked: function () {
                        tree.setChecked('treeUser', [12, 16]); //勾选指定节点
                    }
                    , reload: function () {
                        //重载实例
                        tree.reload('treeUser', {

                        });
                    }
                });
            });


            //提交表单
            $("body").on("click", ".sim_btn", function () {
                saveData();
            });
            //清空文件框
            $("body").on("click", "#btnReset", function () {
                $(":input[type='text']").val("");
            });


        });

        function saveData() {
            var errorMsg = "";
            var id = $("#hdid").val();

            var checkedData = tree.getChecked('treeUser'); //获取成员列表选中节点的数据

            var jsonUser = JSON.stringify(checkedData);//取到的选中的节点转化为JSON字符串

            alert(jsonUser);
            //return false;

            if (errorMsg != "") {
                layer.msg(errorMsg, { icon: 7 });
                return false;
            }
            loadIndex = layer.load(0);
            var url = "/AdminControl/Assign_ADD.aspx";
            $.ajax({
                type: "POST",
                url: url,
                dataType: "JSON",
                data: { 'action': 'SaveData', 'id': id, 'names': names, 'isEditAll': isEditAll, 'isFenzhen': isFenzhen, 'jsonUser': jsonUser, 'menuID': menuID },
                success: function (result) {
                    if (result.State) {
                        layer.close(loadIndex);
                        layer.msg("操作成功", { time: 1000 });
                        setTimeout(closeRefresh, 1000);//关闭当前iframe,刷新指定iframe
                    }
                    else {
                        layer.msg(result.ErrorMsg, { time: 3000 });
                    }
                }, complete: function (result) {
                    layer.close(loadIndex);
                }
            });
        }

        //关闭当前iframe,刷新指定iframe
        function closeRefresh() {
            var ucrIframe = window.top.$("li[lay-id='/AdminControl/Assign_List.aspx']");
            $(ucrIframe).click();
            parent.removeIframe("/AdminControl/Assign_ADD.aspx");//调用母页面的方法,传当前页的标识
        }

    </script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use('index');
    </script>
</body>
</html>

code behind

using System;
using System.Collections.Generic;
using System.Text;
using BLL;
using Common;
using Model;
using Newtonsoft.Json;

namespace MyProject
{
    public partial class Assign_ADD : BasePage
    {
        private string action = string.Empty;
        private AssignModel assignModel;
        public string strid = "0";//要编辑的ID
        public string strNames = "";
        public string strisEditAll = "0";
        public string strisFenzhen = "0";
        public string strjsonUser = "";//最终选择的成员总的json
        public string userID = "";//最终选择的成员总的ID
        public StringBuilder sbResultUser = new StringBuilder();
        public string menuID = "";//最终选择的权限总的ID
        public StringBuilder sbResultMenus = new StringBuilder();
        StringBuilder sbResultUser01 = new StringBuilder();
        StringBuilder sbResultUser02 = new StringBuilder();
        public List<TreeObject> treeNodes = new List<TreeObject>();
        public string jsonTree = "";
        private string strUser = ".";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (!string.IsNullOrEmpty(Request.Form["action"]))
                {
                    action = Request.Form["action"];
                }
                switch (action)
                {
                    case "SaveData"://
                        SaveData();
                        break;
                    default:
                        LoadData();
                        //LoadUser();
                        LoadTree(null,0);//从数据库取树开结构 的数据
                        jsonTree = JsonConvert.SerializeObject(treeNodes);//把取到的树形数据转化为JSON格式,赋值给前端的LAYUI
                        
                        break;
                }
                
            }
        }

        //加载要编辑的数据
        private void LoadData()
        {
            int id = Convert.ToInt32(Request["id"]);
            if (id > 0)
            {
                assignModel = AssignBLL.GetModel(" and t.id =" + id.ToString());
                if (assignModel != null)
                {
                    strid = assignModel.Id.ToString();
                    strNames = assignModel.Names.ToString();
                    strisEditAll = assignModel.IsEditAll.ToString();
                    strisFenzhen = assignModel.IsFenzhen.ToString();
                }
            }
            //
            List<StaffAssignModel> listStaffAssign = StaffAssignBLL.GetListByPage("", " and t.assignID=" + id + " ", " t.id asc ");//查此角色下的所有的员工列表
            if (listStaffAssign != null)
            {
                userID += ".";
                foreach (StaffAssignModel model in listStaffAssign)
                {
                    userID += "" + model.StaffID.ToString() + ".";
                }
            }

            List<AssignMenusModel> list = AssignMenusBLL.GetListByPage("", " and assignID=" + id + " ", " t.id desc ");//查此角色下的所有的菜单权限列表
            if (list != null)
            {
                menuID += ".";
                foreach (AssignMenusModel model in list)
                {
                    menuID += "" + model.MenuID.ToString() + ".";
                }
            }

            PublicHelper.CreateWebLog(strStaffUserCodeBase,"操作日志","操作IP:"+ strLoginIPBase + "。\n操作页面:/AdminControl/Assign_ADD.aspx\n操作事件:打开页面");
        }

        private void LoadTree(TreeObject parentNode, int topDeptID)
        {
            List<TreeObject> listDepartment01 = DepartmentBLL.GetListTree(" and t.topDeptID=" + topDeptID + "  ", " t.id asc ");//根据上级部门ID,取下一级的所有部门
            if (listDepartment01 != null)
            {
                foreach (TreeObject model in listDepartment01)
                {
                    TreeObject tree = new TreeObject();
                    tree.id = model.id;
                    tree.title = model.title;
                    tree.topDeptID = model.topDeptID;
                    tree.isMoJi = model.isMoJi;
                    tree.field = "";
                    if (model.id == 9999)
                    {
                        tree.spread = true;
                    }
                    if (model.id >8000)
                    {
                        //tree.disabled = true;
                        //tree.showCheckbox = false;
                    }
                    //spread 节点是否初始展开,默认 false
                    //checked 节点是否初始为选中状态(如果开启复选框的话),默认 false
                    //disabled 节点是否为禁用状态。默认 false
                    //递归性质,函数内调用自身函数
                    LoadTree(tree, tree.id);
                    //递归结束的终点条件
                    if (parentNode == null)
                    {
                        treeNodes.Add(tree);
                    }
                    else
                    {
                        if(true)
                        //if (model.isMoJi==0)
                        {
                            parentNode.children.Add(tree);
                        }
                        
                    }
                }
            }
        }


        private void SaveData()
        {
            int iresult = 0;
            ResultInfo resultInfo = new ResultInfo() { State = false, ErrorMsg="" };
            int isRepeat = 1;//是否需要查有无重复记录,默认需要
            int isPass = 1;//是否验证通过,默认通过
            int id = Convert.ToInt32(Request.Form["id"]);
            strNames = Request.Form["names"].ToString().Replace(" ","");
            strisEditAll = Request.Form["isEditAll"];
            strisFenzhen = Request.Form["isFenzhen"];
            strjsonUser = Request.Form["jsonUser"];//取前端传来的树的JSON字符串
            
            if (!string.IsNullOrEmpty(strjsonUser))//取选中的员工ID
            {
                List<TreeObject> listTreeUser = new List<TreeObject>();
                listTreeUser = JsonConvert.DeserializeObject<List<TreeObject>>(strjsonUser);//字符串反序列化为LIST对象集合
                GetTreeNode(listTreeUser);//循环取子节点给strUser赋值。strUser赋值后为".1.2.3.4.5.6."这样的格式,再分隔后来操作数据
                //strUser=.1.2.3.4.5.6."这样的格式
            }




            if (!string.IsNullOrEmpty(strNames))
            {
                if (id > 0)
                {
                    assignModel = AssignBLL.GetModel(" and t.id =" + id.ToString());
                    if (assignModel.Names== strNames)//编辑时数据库中的字段如果和此次编辑的内容一样,则无需查重
                    {
                        isRepeat = 0;
                    }
                }
                if (isRepeat == 1)//检查字段内容在数据库中是否已存在
                {
                    AssignModel model = AssignBLL.GetModel("  and t.isDel=0 and t.names ='" + strNames + "' ");
                    if (model != null)//如果数据库中有相同内容已存在
                    {
                        isPass = 0;
                        resultInfo.ErrorMsg = "该名称已存在";
                    }
                }
                if (isPass == 1)
                {
                    assignModel.Names = strNames;
                    assignModel.IsEditAll = Convert.ToInt32(strisEditAll);
                    assignModel.IsFenzhen = Convert.ToInt32(strisFenzhen);
                    if (id > 0)
                    {
                        iresult = AssignBLL.UpdateData(assignModel);
                    }
                    else
                    {
                        iresult = AssignBLL.AddData(assignModel);
                    }
                    if (iresult > 0)
                    {
                        resultInfo.Data = iresult.ToString();
                        resultInfo.State = true;
                    }
                }
                
            }
            string strLog = id > 0 ? "修改角色,ID为:" + id.ToString() : "添加角色,名为:" + strNames;
            PublicHelper.CreateWebLog(strStaffUserCodeBase, "操作日志", "操作IP:" + strLoginIPBase + "。\n操作页面:/AdminControl/Assign_ADD.aspx。\n操作事件:" + strLog);

            string resultJson = JsonHelper.ObjectToJSON(resultInfo);
            Response.Write(resultJson);
            Response.End();
        }

        private void GetTreeNode(List<TreeObject> listTree)//循环获取树的每级节点
        {
            foreach (TreeObject Tree in listTree)
            {
                if (Tree.isMoJi == 1)
                {
                    strUser += Tree.id + ".";
                }
                else
                {
                    if (Tree.children != null)
                    {
                        GetTreeNode(Tree.children);
                    }
                }
            }

        }



    }
}

DepartmentBLL.GetListTree(" and t.topDeptID=" + topDeptID + " ", " t.id asc "); method, the topDeptID parameter is the parent ID

        /// <summary>
        /// 查询-获取组合查询的树形结果
        /// </summary>
        /// <param name="top">查询前多少条,数字格式,查所有传空字符串</param>
        /// <param name="strWhere">查询条件,以and开头</param>
        /// <param name="orderby">排序方式,例:id desc</param>
        /// <returns></returns>
        public static List<TreeObject> GetListTree(string strWhere, string orderby)
        {
            return DepartmentDAL.GetListTree(strWhere, orderby);
        }

DepartmentDAL.GetListTree(strWhere, orderby);方法

        /// <summary>
        /// 查询-获取组合查询的树形结果
        /// </summary>
        /// <param name="top">查询前多少条,数字格式,查所有传空字符串</param>
        /// <param name="strWhere">查询条件,以and开头</param>
        /// <param name="orderby">排序方式,例:id desc</param>
        /// <returns></returns>
        public static List<TreeObject> GetListTree(string strWhere, string orderby)
        {
            List<TreeObject> list = new List<TreeObject>();
            TreeObject model = null;
            //if (!string.IsNullOrEmpty(top.Trim()))
            //{
            //    top = " top " + top + " ";
            //}
            string strSQL = " SELECT * from ";
            strSQL += " ( ";
            strSQL += " SELECT 9999 AS id,'第一级' AS names,0 AS topDeptID,0 AS isMoJi ";
            strSQL += " UNION ALL ";
            strSQL += " SELECT 9900+t.id AS id,t.names,9999 AS topDeptID,0 AS isMoJi FROM 二级表 t WHERE t.isDel=0 ";
            strSQL += " UNION ALL ";
            strSQL += " SELECT 8000+id,t.names,case topDeptID WHEN 0 then 9900+t.areaID ELSE 8000+topDeptID END AS topDeptID,t.isMoJi FROM 三级表 t WHERE t.isDel=0   ";
            strSQL += " UNION ALL ";
            strSQL += " SELECT Staff.id,Staff.userName AS names,8000+StaffDepartment.deptID AS topDeptID,1 AS isMoJi FROM 表名 INNER JOIN 表名2 ON 表名.staffID=表名2.id ";
            strSQL += " ) t ";
            strSQL += " where 1=1 " + strWhere;
            if (!string.IsNullOrEmpty(orderby.Trim()))
            {
                strSQL += " order by " + orderby;
            }
            DataTable dt = SqlHelper.ExecuteReader(strSQL, CommandType.Text);
            if (dt == null || dt.Rows.Count == 0)
            {
                return null;
            }
            else
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    model = new TreeObject();
                    model.id = dt.Rows[i]["id"] == DBNull.Value ? 0 : Convert.ToInt32(dt.Rows[i]["id"]);
                    model.title = dt.Rows[i]["names"] == DBNull.Value ? "" : Convert.ToString(dt.Rows[i]["names"]);
                    model.topDeptID = dt.Rows[i]["topDeptID"] == DBNull.Value ? 0 : Convert.ToInt32(dt.Rows[i]["topDeptID"]);
                    model.isMoJi = dt.Rows[i]["isMoJi"] == DBNull.Value ? 0 : Convert.ToInt32(dt.Rows[i]["isMoJi"]);
                    list.Add(model);
                }
                return list;
            }
        }

TreeObject entity:

    public class TreeObject
    {
        public int id { get; set; }//
        public string title { get; set; }//
        public string value { get; set; }//
        public int topDeptID { get; set; }//上级ID
        public int isMoJi { get; set; }//是否末级
        public string field { get; set; }//
        public bool spread { get; set; }//
        public bool disabled { get; set; }//
        public bool showCheckbox { get; set; }//

        public List<TreeObject> children = new List<TreeObject>();
        public void Addchildren(TreeObject node)
        {
            this.children.Add(node);//showCheckbox
        }
    }

The result of extracting the tree structure from the database is as follows:

 

By the second version of my previous article

https://mp.csdn.net/mp_blog/creation/editor/128899164

Guess you like

Origin blog.csdn.net/wybshyy/article/details/128899390