码迷,mamicode.com
首页 > 其他好文 > 详细

树形插件ztree

时间:2015-03-19 13:04:42      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:

1.为什么选择它?

---不需要递归,即可形成树

---支持大数据的处理

 2.上手

官方文档 zTree_v3\demo\cn\core\standardData.html文件中的数据需要递归实现,果断Pass。

同级目录下的SimpleData.html文件提供简单的数据提供方式,果断采用。

<script type="text/javascript" src="../js/jquery.js"></script>

<script type="text/javascript"
    src="../../resources/zTree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript">
    //定义树数据
    var datas = [ {
        id : "0",
        name : "根栏目",
        pid : "-1",
        createDate:"1990-08-09"
    }, {
        id : "1",
        name : "栏目管理",
        pid : "0",
        createDate:"1990-08-09"
    }, {
        id : "2",
        name : "文章管理1",
        pid : "1",
        createDate:"1990-08-09"
    } ];
    //回调函数
    function zTreeOnClick(event, treeId, treeNode) {
        alert(treeNode.name + ", " + treeNode.createDate+","+treeNode.isParent);
    };

    $(document).ready(function() {
        //2.在setting中设置配置信息
        var setting = {
            data : {
                simpleData : {
                    enable : true,
                    idKey : "id",
                    pIdKey : "pid",
                    rootPId : -1,
                }
            },
            view : {
                dblClickExpand : false,
                selectedMulti : false,

            },
            //回调函数
            callback: {
                onClick: zTreeOnClick
            }
            
        };
        
        
        //显示树,返回的是一个树的对象
        var tree=$.fn.zTree.init($("#treeDemo"), setting, datas);
        //获得父级节点
        var node = tree.getNodeByParam("id", 1, null);
        
        var newNode = {id:"3",name:"newNode1",pid:"1",createDate:"2013-05-06"};
        //将新节点添加到父级节点
        newNode = tree.addNodes(node, newNode);
       
    });
</script>

树形插件ztree

标签:

原文地址:http://www.cnblogs.com/yuxinglab/p/4349952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!