weixin_43859180
一个钝角
2020-12-15 11:26

vuejs+zTree callback没反应,大佬救命

  • html5
  • vue.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="zTree_v3/js/jquery.ztree.all.min.js"></script>
        <!--
             其他两种css风格样式
             <link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
             <link rel="stylesheet" href="ztree/css/awesomeStyle/awesome.css" rel="stylesheet" type="text/css" />
              -->

    </head>
    <body>
        <div id="app">
            <div style="background-color: silver;">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </body>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                setting: {
                    check: {
                        enable: true, // true 表示 开启 异步加载模式
                        chkboxType: {
                            "Y": "p",
                            "N": "s"
                        }, //被勾选时关联父,取消勾选时关联子
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onCheck: this.myonCheck
                    }
                },
                zNodes: [{
                        id: 1,
                        pId: 0,
                        name: "随意勾选 1",
                        open: true
                    },
                    {
                        id: 11,
                        pId: 1,
                        name: "随意勾选 1-1",
                        open: true
                    },
                    {
                        id: 111,
                        pId: 11,
                        name: "随意勾选 1-1-1"
                    },
                    {
                        id: 112,
                        pId: 11,
                        name: "随意勾选 1-1-2"
                    },
                    {
                        id: 12,
                        pId: 1,
                        name: "随意勾选 1-2",
                        open: true
                    },
                    {
                        id: 121,
                        pId: 12,
                        name: "随意勾选 1-2-1"
                    },
                    {
                        id: 122,
                        pId: 12,
                        name: "随意勾选 1-2-2"
                    },
                    {
                        id: 2,
                        pId: 0,
                        name: "随意勾选 2",
                        checked: true,
                        open: true
                    },
                    {
                        id: 21,
                        pId: 2,
                        name: "随意勾选 2-1"
                    },
                    {
                        id: 22,
                        pId: 2,
                        name: "随意勾选 2-2",
                        open: true
                    },
                    {
                        id: 221,
                        pId: 22,
                        name: "随意勾选 2-2-1",
                        checked: true
                    },
                    {
                        id: 222,
                        pId: 22,
                        name: "随意勾选 2-2-2"
                    },
                    {
                        id: 23,
                        pId: 2,
                        name: "随意勾选 2-3"
                    }
                ],
                // v :'',
                idlist: [],
            },
            mounted() {
                this.init()
            },
            methods: {
                init() {
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); //初始化树
                    zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩

                    // zTreeObj.checkAllNodes(true);
                },
                myonCheck(e, treeId, treeNode) {
                    alert(111111111)
                    var _this = this;
                    _this.idlist = [];
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
                        nodes = treeObj.getCheckedNodes(true);
                    for (let i = 0; i < nodes.length; i++) {
                        // v += nodes[i].name + ",";
                        // alert(nodes[i].id); //获取选中节点的值
                        _this.idlist = _this.idlist.concat(nodes[i].id)
                    }
                    // console.log(v)
                    console.log(_this.idlist)
                },
            }
        })
    </script>
</html>

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

2条回答

为你推荐

换一换