zTree -- jQuery 树插件的使用包括添加、编辑(MVC)-Toy模板网

这篇具有很好参考价值的文章主要介绍了zTree -- jQuery 树插件的使用包括添加、编辑(MVC)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

zTree -- jQuery 树插件网址:https://www.treejs.cn/v3/main.php#_zTreeInfo

自行下载所需要的文件

我自己写的一些具体示例：

使用的.netCore 6 后端使用的ORM框架SqlSugar的中的ToTreeAsync方法返回的需要的数据格式，如果没用SqlSugar可以自己写递归来完成

public async Task<ResultDto<List<DepartmentDto>>> GetZreeInfo(long pId)
        {
            try
            {
                var tree = await _db.Queryable<DepartmentModel>().Select(x=>new DepartmentDto()).ToTreeAsync(it => it.children, it => it.Dep_Pid, 0);

                return new ResultDto<List<DepartmentDto>>
                {
                    code = 0,
                    data = tree,
                    msg = "",
                    count = tree.Count,
                };

            }
            catch (Exception)
            {

                throw;
            }
        }

具体的一些文件的引用根据自己的实际情况去引用

zTree -- jQuery 树插件的使用包括添加、编辑(MVC)

接下来就是怎么去在MVC中去使用

首先是去写添加的时候

<div class="layui-form-item">
        <label class="layui-form-label">责任科室:</label>
        <div class="layui-input-block">
            <div class="layui-inline">
                <input type="text" id="selectedNode" name="Dep_Names" readonly class="layui-input">
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-primary" onclick="openTree()">选择</button>
            </div>
        </div>
</div>

这段代码写在你的form表单中你需要的位置即可，注意标签中的name是你数据库中所定义的你需要添加的值的名称

<!-- 树形选择器的弹层 -->
<script type="text/html" id="treeSelector">
    <ul id="treeDemo" class="ztree"></ul>
</script>

<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
        var treeData = [];
        $.ajax({
            url: '@Url.Action("GetZreeInfo")',
            type: 'get',
            async: false,
            success: function (res) {
                treeData = res.data;
            }
        })
        // 打开责任科室树选择器
        window.openTree = function () {
            var index = layer.open({
                type: 1,
                title: '选择科室',
                content: $('#treeSelector').html(),
                area: ['300px', '500px'],
                success: function (layero, index) {
                    // 渲染责任科室树选择器
                    var setting = {
                        view: {
                            dblClickExpand: false, // 禁止双击展开收起
                            showLine: true // 显示连接线
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: 'Dep_Id',
                                pIdKey: null,
                                rootPId: null
                            },
                            key: {
                                name: 'Dep_Name', // 节点名称字段
                                title: 'Dep_Name' // 新增节点名称字段
                            }
                        },
                        check: {
                            enable: true, // 开启多选功能
                            chkStyle: 'checkbox', // 设置选择框的样式为复选框
                            chkboxType: { y: 's', n: 's' } // 只在父节点和子节点之间设置关联关系，不关联父级
                        },
                        callback: {
                            onCheck: function (event, treeId, treeNode) {
                                var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
                                var nodes = zTreeObj.getCheckedNodes(true);

                                var selectedNodeNames = [];
                                for (var i = 0; i < nodes.length; i++) {
                                    if (!nodes[i].isParent) { // 判断节点是否为父节点
                                        selectedNodeNames.push(nodes[i].Dep_Name); // 只将非父节点的值添加到数组中
                                    }
                                }

                                $('#selectedNode').val(selectedNodeNames.join(', '));

                                var selectedNodeIds = []; // 存储选择的节点ID

                                for (var i = 0; i < nodes.length; i++) {
                                    selectedNodeIds.push(nodes[i].Dep_Id); // ID添加到数组中
                                }
                                $('#selectedNodeIds').val(selectedNodeIds.join(', '));
                            }
                        }
                    };
                    $.fn.zTree.init($('#treeDemo'), setting, treeData);
                }
            });
        };
    });
</script>

最后根据<scrip>中的代码具体的参考去完成

接下来是编辑

同样的去复制你的添加界面的代码只不过我在这里使用到了 asp-for来进行数据回显，你可以根据你自己的方式去实现

<div class="layui-form-item layui-hide">
        <div class="layui-input-block">
            <input type="text" id="selectedNodeId" asp-for="Dep_Ids" readonly class="layui-input">
            <input type="hidden" asp-for="Ope_Password" />
            <input type="hidden" asp-for="Ope_Id" />
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemo">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
</div>

<!-- 树形选择器的弹层 -->
<script type="text/html" id="treeSelector">
    <ul id="treeDemo" class="ztree"></ul>
</script>

<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
        var treeData = [];
        $.ajax({
            url: '@Url.Action("GetZreeInfo")',
            type: 'get',
            async: false,
            success: function (res) {
                treeData = res.data;
            }
        })
        // 打开责任科室树选择器
        window.openTree = function () {
            var index = layer.open({
                type: 1,
                title: '选择科室',
                content: $('#treeSelector').html(),
                area: ['300px', '400px'],
                success: function (layero, index) {
                    // 渲染责任科室树选择器
                    var setting = {
                        view: {
                            dblClickExpand: false, // 禁止双击展开收起
                            showLine: true // 显示连接线
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: 'Dep_Id',
                                pIdKey: null,
                                rootPId: null
                            },
                            key: {
                                name: 'Dep_Name', // 节点名称字段
                                title: 'Dep_Name' // 新增节点名称字段
                            }
                        },
                        check: {
                            enable: true, // 开启多选功能
                            chkStyle: 'checkbox', // 设置选择框的样式为复选框
                            chkboxType: { y: 's', n: 's' } // 只在父节点和子节点之间设置关联关系，不关联父级
                        },
                        callback: {
                            onCheck: function (event, treeId, treeNode) {
                                var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
                                var nodes = zTreeObj.getCheckedNodes(true);

                                var selectedNodeNames = [];
                                for (var i = 0; i < nodes.length; i++) {
                                    if (!nodes[i].isParent) { // 判断节点是否为父节点
                                        selectedNodeNames.push(nodes[i].Dep_Name); // 只将非父节点的值添加到数组中
                                    }
                                }

                                $('#selectedNode').val(selectedNodeNames.join(', '));

                                var selectedNodeIds = []; // 存储选择的节点ID

                                for (var i = 0; i < nodes.length; i++) {
                                    selectedNodeIds.push(nodes[i].Dep_Id); // ID添加到数组中

                                }
                                $('#selectedNodeId').val(selectedNodeIds.join(', '));
                            }
                        }
                    };
                    $.fn.zTree.init($('#treeDemo'), setting, treeData);
                    //反填树的操作
                    //获取AoId的值
                    var AoId = $("#selectedNodeId").val();
                    console.log(AoId);
                    //转化为数组
                    var selectedNodeIds = AoId.split(",");
                    //获取责任科室树的 zTree 对象
                    var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
                    //设置为选中状态
                    for (var i = 0; i < selectedNodeIds.length; i++) {
                        var node = zTreeObj.getNodeByParam("Dep_Id", selectedNodeIds[i], null);
                        zTreeObj.checkNode(node, true, false);  //设置为选中状态
                    }
                    // 更新已选择的节点名称
                    var nodes = zTreeObj.getCheckedNodes(true);
                    var selectedNodeNames = [];
                    for (var i = 0; i < nodes.length; i++) {
                        if (!nodes[i].isParent) {
                            selectedNodeNames.push(nodes[i].Dep_Name);
                        }
                    }

                    $('#selectedNode').val(selectedNodeNames.join(', '));

                    // 更新已选择的节点ID
                    var selectedNodeId = [];
                    for (var i = 0; i < nodes.length; i++) {
                        if (!nodes[i].isParent) {
                            selectedNodeId.push(nodes[i].Dep_Id);
                        }
                    }
                    $('#selectedNodeId').val(selectedNodeId.join(', '));
                }
            });
        };
    });
</script>

代码仅供参考，具体的实现可以参考上面的网址和代码。文章来源地址https://www.toymoban.com/news/detail-605140.html

到了这里，关于zTree -- jQuery 树插件的使用包括添加、编辑(MVC)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！