一个钝角 2020-12-15 11:26 采纳率: 33.3%
浏览 298
已采纳

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

<!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条回答 默认 最新

  • 禅思院 前端领域优质创作者 2020-12-15 13:24
    关注

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 Windows 驱动开发版本疑问相关
  • ¥15 MAC 未能打开磁盘映像
  • ¥15 fastcap使用,二维导体输入问题
  • ¥15 hosts修改后不能访问
  • ¥15 关于化学反应速率C++编译问题/FLUENT
  • ¥20 Yolov5训练报错
  • ¥15 Unity发布gzip压缩的webgl之后让浏览器可以正常显示画面
  • ¥15 ASP.net Gridview插件数据更新失败问题
  • ¥15 有没有人知道这种提示怎么关?现在不做ts项目了不知道咋关了,求解,现在我以前的js项目都是这种提示了
  • ¥15 为什么mysql做了碎片化处理data_free还是很高