Ztree使用方法

最新推荐文章于 2022-03-30 15:38:40 发布

qq_42205513

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量218

点赞数

分类专栏： JAVASCRIPT 文章标签： ztree

本文链接：https://blog.csdn.net/qq_42205513/article/details/84834943

版权

JAVASCRIPT 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<SCRIPT LANGUAGE="JavaScript">
var setting = {
       view: {
           addHoverDom:addHoverDom,
removeHoverDom:removeHoverDom,
           showLine: true, //父子之间连线
           showIcon: false,
           selectedMulti: false,
           dblClickExpand: false

       },
       edit: {
enable: true,
editNameSelectAll:true,
removeTitle:'删除',
renameTitle:'重命名'
},
       check:{
chkboxType: { "Y": "ps", "N": "ps" },
chkStyle: "checkbox", //复选框类型
enable: true //每个节点上是否显示 CheckBox
},
       expandSpeed : "fast",
       data: {
           simpleData: {
               enable: true,
               idKey : "id",
               pIdKey : "pId",
               rootPId : null
           }
       },
       callback: {
           onCheck:onCheck,
beforeRemove:beforeRemove,//点击删除时触发，用来提示用户是否确定删除（可以根据返回值 true|false 确定是否可以删除）
beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
beforeRename:beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求(也是根据返回值 true|false 确定是否可以编辑完成)
onRemove:onRemove,//(beforeRemove返回true之后可以进行onRemove)删除节点后触发，用户后台操作
onRename:onRename,//编辑后触发，用于操作后台
beforeDrag:beforeDrag,//用户禁止拖动节点
onClick:clickNode//点击节点触发的事件

       }
   };

var zNodes =[
{ id:0, pId:null, name:"根节点1 - 展开"},
            { id:1, pId:0, name:"父节点1 - 展开"}, //src自定义属性
            { id:11, pId:1, name:"父节点11 - 折叠"},
            { id:111, pId:11, name:"叶子节点111"},
            { id:112, pId:11, name:"叶子节点112"},
            { id:113, pId:11, name:"叶子节点113"},
            { id:114, pId:11, name:"叶子节点114"},
            { id:12, pId:11, name:"父节点12 - 折叠"},
            { id:121, pId:12, name:"叶子节点121"},
            { id:122, pId:12, name:"叶子节点122"},
            { id:123, pId:12, name:"叶子节点123"},
            { id:124, pId:12, name:"叶子节点124"},
            { id:13, pId:11, name:"父节点13 - 没有子节点", isParent:true},
            { id:10, pId:0, name:"父节点10 - 折叠"},
            { id:101, pId:10, name:"父节点21 - 展开"},
            { id:2, pId:0, name:"父节点2 - 折叠"},
            { id:21, pId:2, name:"父节点21 - 展开"},
            { id:211, pId:21, name:"叶子节点211"},
            { id:212, pId:21, name:"叶子节点212"},
            { id:213, pId:21, name:"叶子节点213"},
            { id:214, pId:21, name:"叶子节点214"},
            { id:22, pId:2, name:"父节点22 - 折叠"},
            { id:221, pId:22, name:"叶子节点221"},
            { id:222, pId:22, name:"叶子节点222"},
            { id:223, pId:22, name:"叶子节点223"},
            { id:224, pId:22, name:"叶子节点224"},
            { id:23, pId:2, name:"父节点23 - 折叠"},
            { id:231, pId:23, name:"叶子节点231"},
            { id:232, pId:23, name:"叶子节点232"},
            { id:233, pId:23, name:"叶子节点233"},
            { id:234, pId:23, name:"叶子节点234"},
            { id:3, pId:0, name:"父节点3 - 没有子节点"}
        ];

   //展开树
function expandTree() {
   var dt = Format(new Date(), "yyyy-MM-dd HH:mm");
   alert(dt);
var tree = $.fn.zTree.getZTreeObj('treeDemo');
tree.expandAll(tree);
}
//收起树：只展开根节点下的一级节点
function closeTree() {
var tree = $.fn.zTree.getZTreeObj('treeDemo');
//获取 zTree 的全部节点数据将节点数据转换为简单 Array 格式
var nodes = tree.transformToArray(tree.getNodes());
for(var i=0;i<nodes.length;i++){
if(nodes[i].level == 1){
console.log(nodes[i].name);
//根节点展开
tree.expandNode(nodes[i],true,true,false);
}else{
tree.expandNode(nodes[i],false,true,false);
}
}
}

//展开3级节点
   function expand3level(treeObj) {
       //获得树形图对象
       var nodeList = treeObj.getNodes();　　　　　　 //展开第一个节点
       for(var i = 0; i < nodeList.length; i++) { //设置节点展开第二级节点
           treeObj.expandNode(nodeList[i], true, false, true);

       var nodespan = nodeList[i].children;
       for(var j = 0; j < nodespan.length; j++) { //设置节点展开第三级节点
               treeObj.expandNode(nodespan[j], true, false, true);
           }
       }

       alert(nodespan.length+"|"+nodespan[0].id);

   }

   /*选中事件*/
   function onCheck() {
   var result='';
   var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
   var nodes = treeObj.getCheckedNodes(true);
   /* for (var i = 0; i < nodes.length; i++) {
   var halfCheck = nodes[i].getCheckStatus();
   if (!halfCheck.half){
   result += nodes[i].id +"|"+nodes[i].name + ','; //返回一串数字
   }
   }
   alert(result);
   return result;
   */
   var name = "", id = "";
for (var i = 0, l = nodes.length; i < l; i++) {
name = nodes[i].name;
id = nodes[i].id;
//只处理叶子节点
if(!nodes[i].isParent){
   if(i == nodes.length - 1){
       result+=nodes[i].id ;
}else{
   result+=nodes[i].id + ",";
}
}

}
// alert( result);

$("#treeName").val(name);
$("#treeId").val(result);

   }

   //显示菜单
function showMenu() {
var dropdownObj = $("#treeName");
var dropdownOffset = $("#treeName").offset();
$("#treeContainer").css({
left: dropdownOffset.left + "px",
top: dropdownOffset.top + dropdownObj.outerHeight() + "px"
}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
var w = $("#treeName").width();
var p = $("#treeName").css("padding-left");
$("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);
}