jQuery zTree.js 使用

Java知识分享(spring全家桶、面试突击)

每天进步一点点

---

最近做一个任务，地址维护（要求通过树去维护）：
1、单击异步加载子节点
2、添加新子节点
3、修改地址名称
4、删除节点
5、通过拖拽改变父节点

参考同事以前的例子，使用dTree.js去实现一版，在使用中发现加载树很慢，dTree.js实现树原理查询所有数据，地址有41144多条数据遍历生成树结构。
继而猜想能否异步加载呢？研究dTree.js半天不得而知，后翻越网站zTree.js功能更加强大，不仅满足异步加载，还有拖拽等功能。
ztree是基于jquery的一个插件，ztree默认显示的是name,可以通过setting: 设置属性，来指定代替name

代码基本如下 :

    <link href="/misc/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />

    <script src="/misc/js/ztree/jquery-1.4.4.min.js"></script>
    <script src="/misc/js/ztree/jquery.ztree.all.js"></script>
    <script src="/misc/js/ztree/jquery.ztree.core.js"></script>
    <script src="/misc/js/ztree/jquery.ztree.excheck.js"></script>
    <script src="/misc/js/ztree/jquery.ztree.exedit.js"></script>
    <script src="/misc/js/ztree/jquery.ztree.exhide.js"></script>

html 部分

<div class="widget-body">
    <div class="widget-main padding-2">
        <ul id="ztree" class="ztree" role="tree"></ul>
    </div>
</div>

js代码如下：

<script type="text/javascript">
var setting = {
         check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },
        edit: {
            enable: true,
            showRemoveBtn: showRemoveBtn, //删除
            showRenameBtn: showRenameBtn, //重命名
            drag: {
                isCopy: false,//所有操作都是move
                isMove: true,
                prev: true,
                next: true,
                inner: true
            }
        },
        data: {
        	key:{
                name:"name" // 显示名称
            },
            simpleData: {
            	enable : true,
                idKey : "id", // id
                pIdKey : "pId", // 父id
                rootPId : null
            }
        }, 
        callback: {
            onExpand: zTreeOnExpand,
            onClick: onClick
        }
    };

function showRemoveBtn(treeId, treeNode) {
    return !treeNode.isFirstNode;
}
function showRenameBtn(treeId, treeNode) {
    return !treeNode.isLastNode;
}
 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("treeDemo");
            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, orgName:"new node" + (newCount++)});
            return false;
        });
    };


//重命名时执行的函数
function onRename(e, treeId, treeNode, isCancel) {

}

//删除节点时执行的函数
function onRemove(e, treeId, treeNode) {

}



//用于捕获节点拖拽操作结束的事件回调函数  默认值： null
function onDrop(event, treeId, treeNodes, targetNode,moveType) {
    //拖拽成功时，修改被拖拽节点的pid
    console.log(event)
    console.log(treeId +'11111')
    console.log(treeNodes )
    console.log(treeNodes[0].parentCode)
    console.log(targetNode)
    console.log(moveType)
    $.ajax({
        type:'post',
        url: '',
        dataType: "text",
        async: false,
        success: function (data) {
        },
        error: function (msg) {
        }
    });
}

// 单击事件
function onClick(e, treeId, treeNode, clickFlag) {
  	// 展开子节点
  	var treeNodeId = treeNode.id;
   	$.post(
   			'/cityZtree/getCityZtree',
            {parentId: treeNodeId},
               function (data) {
                   var tree = $.fn.zTree.getZTreeObj("ztree");

                   if (!treeNode.zAsync) {
                       tree.addNodes(treeNode, data);
                       treeNode.zAsync = true;
                   } else {
                       tree.reAsyncChildNodes(treeNode, "refresh");
                   }
               }
       );
  } 

    // 加载展开方法
    function zTreeOnExpand(event, treeId, treeNode) {
        var treeNodeId = treeNode.id;
        $.post(
                '/cityZtree/getCityZtree',
                {parentId: treeNodeId},
                function (data) {
                    var tree = $.fn.zTree.getZTreeObj("ztree");

                    if (!treeNode.zAsync) {
                        tree.addNodes(treeNode, data);
                        treeNode.zAsync = true;
                    } else {
                        tree.reAsyncChildNodes(treeNode, "refresh");
                    }
                }
        );
    }

    //首次进入加载level为1的
    $(function () {
        $.post(
                '/cityZtree/getCityZtree',
                function (data) {
                    $.fn.zTree.init($("#ztree"), setting, data);

                }
        );
});

</script>

数据

DROP TABLE IF EXISTS `city_ztree`;
CREATE TABLE `city_ztree` (
  `id` varchar(36) NOT NULL,
  `city_name` varchar(50) DEFAULT NULL,
  `parent_id` varchar(36) DEFAULT NULL,
  PRIMARY KEY (`id`)
) E

INSERT INTO city_ztree VALUES (‘1a’, ‘福建省’, ‘0’);
INSERT INTO city_ztree VALUES (‘1a1’, ‘福州市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a2’, ‘厦门市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a3’, ‘泉州市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a4’, ‘漳州市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a5’, ‘莆田市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a6’, ‘宁德市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a7’, ‘三明市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a8’, ‘南平市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘1a9’, ‘龙岩市’, ‘1a’);
INSERT INTO city_ztree VALUES (‘2b’, ‘浙江省’, ‘0’);
INSERT INTO city_ztree VALUES (‘3c’, ‘广东省’, ‘0’);
INSERT INTO city_ztree VALUES (‘4d’, ‘江苏省’, ‘0’);