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

ztree插件动态加载节点

时间:2017-09-23 23:28:15      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:ice   query   ejs   jsp   call   tee   遍历   http   col   

1、ztree官网首页下载所需zip,下载方式为 GitHub 方式下载

HTTPS : https://gitee.com/zTree/zTree_v3.git

SSH : git@gitee.com:zTree/zTree_v3.git

2、在jsp页面中引入 js、css文件

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

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

</script> <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>

3、配置所需属性


var zTreeObj;   // 树形结构对象
$(document).ready(function () {
    zTreeObj=$.fn.zTree.init($("#treeDemo"), setting);  // 初始化/加载树形结构(创建 zTree 必须使用此方法
});
var setting = {  // 配置setting详情
    async: { // 通过url进行异步加载子节点(返回JSON或JSONArray对象)
        enable: true,
        url: ctx+"/web/admin/ajax/getData?serviceName=secuDepartmentService&serviceMethod=getTreeList",//异步加载时的请求地址,
        autoParam: ["id"],//提交参数
        type: ‘get‘,
        dataType: ‘json‘,
     otherParam : {‘xx‘:‘yy‘, ‘mm‘:‘nn‘} //
}, callback: { // 对节点操作的回调方法 onClick: zTreeOnClick, // 点击节点后的回调 onAsyncSuccess: zTreeOnAsyncSuccess // 异步加载成功的回调,可以用来展开根节点的子节点 } };
//单击时获取zTree节点的Id,和value的值
function zTreeOnClick(event, treeId, treeNode, clickFlag) {
  alert(treeNode.id + "---" + treeNode.name);
}

var treeJsonArray = "${treeJsonArray}"; // 从后台获取的上级节点的id集合(为了展开到点击前的节点位置)
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
    var pnode;
    for(var i=0;i<treeJsonArray.length;i++){ // 遍历展开
        var node = zTreeObj.getNodeByParam("id", treeJsonArray[i], null);
        if(node==null){
            zTreeObj.expandNode(pnode, true, true, true); // 该方法执行时会进行异步加载(setting中的async)
        }
        pnode=node;
    }
}

 zTree 官网链接  http://www.treejs.cn

ztree插件动态加载节点

标签:ice   query   ejs   jsp   call   tee   遍历   http   col   

原文地址:http://www.cnblogs.com/hugang2017/p/7582688.html

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