玩ztree的一段代码

复制代码
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">

<head th:include="include :: header"></head>

<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-graphModel-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">模型名称:</label>
                <div class="col-sm-8">
                    <input id="name" name="modelName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">图谱:</label>
                <div class="col-sm-8">
                    <ul id="ztree" class="ztree"></ul>
                    <input type="hidden" name="sel" id="sel" />
                </div>
            </div>
        </form>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
        var prefix = ctx + "voc/graphModel"
        var zTree = null;
        $("#form-graphModel-add").validate({
            rules: {
                modelName: {
                    required: true,
                },
                sel: {
                    required: true,
                },
            }
        });

        function submitHandler() {
            var nodes = zTree.getCheckedNodes(true);
            if (nodes.length == 0)
                $.modal.msgError("请选择图谱");
            var arry = Array();
            for (var i = 0; i < nodes.length; i++) {
                arry.push(nodes[i].id);
            }
            $("#sel").val(arry.join(","));
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-graphModel-add').serialize());
            }
        }
        var setting = {
            check: {
                enable: true, //每个节点上是否显示 CheckBox
                chkStyle: "checkbox",//复选框类型
                nocheckInherit: false,
                chkboxType: { "Y": "", "N": "" },
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
            ,
            callback: {
                beforeCheck: function (treeId, treeNode) {
                    if (treeNode.children) {
                        treeNode.nocheck = true;   //设置复选框不显示
                        layer.msg('请选择子节点!', { icon: 6 });
                        return false;
                    }
                },
                onClick: function (e, treeId, treeNode, clickFlag) {
                    if (!treeNode.children) {
                        zTree.checkNode(treeNode, !treeNode.checked, true);
                    }
                }
            }
        };
        $(function () {
            $.getJSON(ctx + "voc/project/getTree", function (d) {
                if (d.code == 0) {
                    zTree = $.fn.zTree.init($("#ztree"), setting, d.data);
                    // zTree.expandAll(zTree);
                }
            })
        })

    </script>
</body>

</html>
复制代码

 

posted @   wujf  阅读(275)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示