zTree树插件实现每个节点都可增删改+复选框操作

最新推荐文章于 2019-07-31 16:08:35 发布

苏喂苏喂苏喂su

最新推荐文章于 2019-07-31 16:08:35 发布

阅读量536

点赞数

分类专栏： zTree

本文链接：https://blog.csdn.net/joyvonlee/article/details/90635602

版权

zTree 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一言不合上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zTree</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/zTree/jquery.ztree.core.js"></script>
    <script src="js/zTree/jquery.ztree.excheck.js"></script>
    <script src="js/zTree/jquery.ztree.exedit.js"></script>
</head>
<body>
<ul id="tree" class="ztree"></ul>
<script>
var setting = {
        check: {
            enable: true
        },
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            showRemoveBtn: true,    // 是否显示删除按钮
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
        }
    };


var zNodes =[
         { id:1, pId:0, name:"随意勾选 1", open:false},
         { id:2, 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"},
      
     ];




function showLog(str) {
    if (!log) log = $("#log");
    log.append("<li class='"+className+"'>"+str+"</li>");
    if(log.children("li").length > 8) {
        log.get(0).removeChild(log.children("li")[0]);
    }
}
function getTime() {
    var now= new Date(),
    h=now.getHours(),
    m=now.getMinutes(),
    s=now.getSeconds(),
    ms=now.getMilliseconds();
    return (h+":"+m+":"+s+ " " +ms);
}

var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
    return false;
}
 

var newCount = 1;
function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='add node' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.tId);
    if (btn) btn.bind("click", function(){
        var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
        return false;
    });
};



function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
};


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

</script>
    <script src="js/index.js"></script>
</body>
</html>

苏喂苏喂苏喂su

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree树插件实现每个节点都可增删改+复选框操作

一言不合上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫