玩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 @ 2019-04-10 14:56  wujf  阅读(278)  评论(0)    收藏  举报