zTree如何赋初始值

Capricornph 2016-05-18 10:26:14
zTree怎么赋值呢？比如说我现在存在数据库的值是211,111，不通过JSON怎么赋值到ZTree呢？

<SCRIPT type="text/javascript">

        <!--

        var setting = {

            check: {

                enable: true

            },

            data: {

                simpleData: {

                    enable: true

                }

            },

             callback: { 



        onCheck:onCheck

    } 

        };



        var 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"}

        ];



        var code;



        function setCheck() {

            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

            py = $("#py").attr("checked")? "p":"",

            sy = $("#sy").attr("checked")? "s":"",

            pn = $("#pn").attr("checked")? "p":"",

            sn = $("#sn").attr("checked")? "s":"",

            type = { "Y":py + sy, "N":pn + sn};

            zTree.setting.check.chkboxType = type;

            showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');

        }

        function showCode(str) {

            if (!code) code = $("#code");

            code.empty();

            code.append("<li>"+str+"</li>");

        }



        $(document).ready(function(){

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            setCheck();

            $("#py").bind("change", setCheck);

            $("#sy").bind("change", setCheck);

            $("#pn").bind("change", setCheck);

            $("#sn").bind("change", setCheck);

        });



        function onCheck(e, treeId, treeNode) {

　 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

　 nodes = zTree.getCheckedNodes(true),

　 v = "";

　 for (var i=0, l=nodes.length; i<l; i++) {

if(!nodes[i].isParent){

　　v += nodes[i].id + ",";

}

　　

　 }

alert(v);　 //获取选中子节点的id值

        //-->



    </SCRIPT>
...全文
737 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
Hello World, 2016-08-22
  • 打赏
  • 举报
 回复 


var nodes = [

{ "id":1, "name":"test1", checked:true },

{ "id":2, "name":"test2", checked:true }

]

Capricornph 2016-08-22
  • 打赏
  • 举报
 回复
引用 6 楼 apollokk 的回复:
<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO - beforeCheck / onCheck</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-3.5.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
    <!--
	<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
	-->
    <script type="text/javascript">
		<!--
    var setting = {
        view: {
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
        }
    };

    var zNodes = [
        { id: 1, pId: 0, name: "随意勾选 1", open: true },
        { id: 11, pId: 1, name: "随意勾选 1-1" },
        { 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", open: true, doCheck: false },
        { id: 21, pId: 2, name: "禁止勾选 2-1", doCheck: false },
        { id: 22, pId: 2, name: "禁止勾选 2-2", checked: true, open: true, doCheck: false },
        { id: 221, pId: 22, name: "禁止勾选 2-2-1", doCheck: false },
        { id: 222, pId: 22, name: "禁止勾选 2-2-2", checked: true, doCheck: false },
        { id: 23, pId: 2, name: "禁止勾选 2-3", doCheck: false }
    ];


    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
	</script>
</head>

<body>
    <h1>用 zTree 方法 勾选 checkbox</h1>
    <div>
        <a href="javascript:void(0);" onclick="checkNode(121);">选中节点121【随意勾选 1-2-1】</a><br />
        <a href="javascript:void(0);" onclick="checkNode(221);">选中节点221【随意勾选 2-2-1】</a>
    </div>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
</body>
</html>
<script>
    function checkNode(id) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodesByParam("id", id, null);
        if (nodes.length > 0)
            treeObj.checkNode(nodes[0], true, true);
    }
</script>
这个是手动获取，默认数据如何加载进来呢？
Hello World, 2016-07-14
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO - beforeCheck / onCheck</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-3.5.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
    <!--
	<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
	-->
    <script type="text/javascript">
		<!--
    var setting = {
        view: {
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
        }
    };

    var zNodes = [
        { id: 1, pId: 0, name: "随意勾选 1", open: true },
        { id: 11, pId: 1, name: "随意勾选 1-1" },
        { 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", open: true, doCheck: false },
        { id: 21, pId: 2, name: "禁止勾选 2-1", doCheck: false },
        { id: 22, pId: 2, name: "禁止勾选 2-2", checked: true, open: true, doCheck: false },
        { id: 221, pId: 22, name: "禁止勾选 2-2-1", doCheck: false },
        { id: 222, pId: 22, name: "禁止勾选 2-2-2", checked: true, doCheck: false },
        { id: 23, pId: 2, name: "禁止勾选 2-3", doCheck: false }
    ];


    $(document).ready(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
	</script>
</head>

<body>
    <h1>用 zTree 方法 勾选 checkbox</h1>
    <div>
        <a href="javascript:void(0);" onclick="checkNode(121);">选中节点121【随意勾选 1-2-1】</a><br />
        <a href="javascript:void(0);" onclick="checkNode(221);">选中节点221【随意勾选 2-2-1】</a>
    </div>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>
</body>
</html>
<script>
    function checkNode(id) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var nodes = treeObj.getNodesByParam("id", id, null);
        if (nodes.length > 0)
            treeObj.checkNode(nodes[0], true, true);
    }
</script>
Capricornph 2016-07-13
  • 打赏
  • 举报
 回复
引用 3 楼 apollokk 的回复:
选中单选或者复选框用checkNode，查找节点可以用getNodeByParam
？
Capricornph 2016-05-22
  • 打赏
  • 举报
 回复
引用 3 楼 apollokk 的回复:
选中单选或者复选框用checkNode，查找节点可以用getNodeByParam
能给一个实例参考一下么
Hello World, 2016-05-19
  • 打赏
  • 举报
 回复
选中单选或者复选框用checkNode，查找节点可以用getNodeByParam
Hello World, 2016-05-18
  • 打赏
  • 举报
 回复
树加载之后去选中节点
Capricornph 2016-05-18
  • 打赏
  • 举报
 回复
引用 1 楼 apollokk 的回复:
树加载之后去选中节点
就是不知道如何选中。。。
树组件过滤器
根据输入框的字符串自动匹配过滤树节点并对匹配的节点高亮展示，在树节点较多的情况下，能够有效提高树节点的选择效率，提高易用性。 实现的方式采用JavaScript高级编程中的组件化编程方式，基于zTree树组件，采用JS的原型构造模式开发的一个树节点过滤器组件。 包括的功能点如下： 1、支持自定义初始化加载树时所有节点是否展开（默认：true） 2、是否使用过滤器功能（默认：true） 3、过滤匹配的节点总数超过多少时全部节点收起（因为过多的节点展开展示影响浏览器的性能，允许自由设置可以展开的节点最大数）（默认：50） 4、支持鼠标在输入框中剪切和粘贴修改输入框的值触发自动匹配的效果（默认：true） 5、支持自定义开始匹配的字符串最少长度（字符串长度越长，匹配的精确度越大，效率越高）(默认：3) 6、支持自定义输入框中停止输入后多长时间后开始执行节点过滤方法，默认（默认：1000ms）
ZTree 设置初始化时勾选某个节点
//ZTree初始化所执行的方法         /* 先在callback 方法中设置如下，初始化树时执行onAsyncSuccess 方法             callback: {                   onCheck: YnOnClick,                   onAsyncSuccess:onAsyncSuccess                   ...
SpringMVC+Mybatis+Shiro+Bootstrap实战
快速增长实战经验的课程技术选型：核心框架：Spring Framework 4.X视图框架：Spring MVC 4.X持久层框架：MyBatis 3.X /Mybatis-plus 2.1.8表格插件：Bootstrap Table表单验证插件：BootstrapValidator日期选择插件：Datepicker for Bootstrap数据图表：charts表单美化插件：ICheck树形视图插件：Ztree 数据库       Mysql5+Druid安全框架：Apache Shiro数据库连接池：Druid日志管理：SLF4J、Log4j页面交互：BootStrap、Layer等
react实现对ztree的初始化
import React, {Component} from 'react'; import '../../../static/scss/manager/resourceManagerComponent/atlasManagementComponent.scss' import $ from '../../common/tool/jquery-vendor' import 'ztree' import 'ztree/js/jquery.ztree.core.min' import 'ztree/js/jq.
ztree 初始化让选中的值 选中成功
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); setTimeout(function() { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章