• ztree 回显选中的数据


    回显选中的数据

    treeObj.checkNode(treeObj.getNodeByParam("id", checkedNodes[i].id), true);

    <!DOCTYPE html>
    <HTML>
    <HEAD>
        <TITLE> ZTREE DEMO - checkbox</TITLE>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
        <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
        <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
        <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
    
        <SCRIPT type="text/javascript">
            
            var checkedNodes = "";  
            var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            
            // ztree基础数据
            var zNodes =[
                { id:1, pId:0, name:"can check 1"},
                { id:11, pId:1, name:"can check 1-1"},
                { id:111, pId:11, name:"can check 1-1-1"},
                { id:112, pId:11, name:"can check 1-1-2"},
                { id:12, pId:1, name:"can check 1-2"},
                { id:121, pId:12, name:"can check 1-2-1"},
                { id:122, pId:12, name:"can check 1-2-2"},
                { id:2, pId:0, name:"can check 2"},
                { id:21, pId:2, name:"can check 2-1"},
                { id:22, pId:2, name:"can check 2-2"},
                { id:221, pId:22, name:"can check 2-2-1"},
                { id:222, pId:22, name:"can check 2-2-2"},
                { id:23, pId:2, name:"can check 2-3"}
            ];
            
            // 被选中数据
            var checkedNodes = [{id:11},{id:112}];
    
            $(document).ready(function(){
                // 初始化
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);   
                // 展开全部节点
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                treeObj.expandAll(true); 
                
                for(var i = 0; i < checkedNodes.length; i++) { 
                    // 回显选中的数据   
                    treeObj.checkNode(treeObj.getNodeByParam("id", checkedNodes[i].id), true);    
                } 
            });
            
        </SCRIPT>
    </HEAD>
    
    <BODY>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
    </BODY>
    </HTML>

    效果展示

    引用的js和css可在官网下载::http://www.treejs.cn/v3/main.php#_zTreeInfo

  • 相关阅读:
    七牛云李意扬:如何收集 Go 实时覆盖率丨ECUG Meetup 回顾
    OpenTelemetry 微服务链路追踪
    空接口
    安全规则集合
    采用最快回应
    Golang单元测试实战
    源码 kratos 配置热加载分析
    烟花 光影
    控制Repeater显示列数
    基本代码安全知识
  • 原文地址:https://www.cnblogs.com/aiyowei/p/11418778.html
Copyright © 2020-2023  润新知