码迷,mamicode.com
首页 > Web开发 > 详细

zTree 优秀的jquery树插件

时间:2017-12-21 18:14:47      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:exe   sync   focus   img   name   alt   its   veh   auto   

zTree 优秀的jquery树插件,文档详细,渲染快

使用方法:

1、引用zTree的js和css文件  

<link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.exedit.min.js"></script>

2、ztree的html为

<ul id="treeInfo" class="ztree"></ul>

  需加Class:ztree;

3、初始化树

 

        var setting = {

            async: {
                enable: true,
                url: "",//后台接口地址
                autoParam: ["id", "nextType"],//异步加载子节点时自动传入的参数
                type: "get",
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "", "N": "" }
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
        };

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


   

后台接口返回数据示例:

技术分享图片

4、加入鼠标移动到显示的自定义按钮

  

function addHoverDom(treeId, treeNode) {
            var aObj = $("#" + treeNode.tId + "_a");
            if ($("#callBtn_" + treeNode.id).length > 0) return;
            var editStr = "<span id=‘callBtn_space_" + treeNode.id + "‘ > </span>"
                + "<button type=‘button‘ class=‘btn callbtn‘  id=‘callBtn_" + treeNode.id
                + "‘ title=‘" + treeNode.name + "‘ onfocus=‘this.blur();‘>按钮</button>";
            aObj.append(editStr);
            var btn = $("#callBtn_" + treeNode.id);
            if (btn) btn.bind("click", function () {
                //按钮点击事件
            });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#callBtn_" + treeNode.id).unbind().remove();
        $("#callBtn_space_" + treeNode.id).unbind().remove();
    };    

 

5、文档地址 http://www.treejs.cn/v3/api.php

 

zTree 优秀的jquery树插件

标签:exe   sync   focus   img   name   alt   its   veh   auto   

原文地址:http://www.cnblogs.com/tangchun/p/8081613.html

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