jQuery zTree树插件简单使用教程

前端之家收集整理的这篇文章主要介绍了jQuery zTree树插件简单使用教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示.

下载地址:

静态zTree开发流程

引入资源

JS方式二-

标准json数据格式

<div class="jb51code">
<pre class="brush:js;">
<SCRIPT type="text/javascript">

异步zTree加载

前面的配置相同,在此不再阐述.主要是js不同.

异步JS

function initTree(){
var payFreq = $("#payFreq").val();
var fyType = $('#fyType').val();
var setHzType = $('#setHzType').val();

$.ajax({
  url : "/demo/initTree",data : {payFreq:payFreq,fyType:fyType,setHzType:setHzType
  },success: function(object){
    var nodes = "";
    //拼接simple格式的json字符串
    $.each(object.data,function(i,item) {
     nodes+="{id:'"+item.id+"',pId:'"+item.pid+"',name:'"+item.name+"',isParent:'"+item.isParent+"'},";
    });
    var zNodes = "["+nodes+"]";
    var json = eval('(' + zNodes + ')'); 
    //console.log(json);
    zTreeInit(json);
  }
});

}
/ 初始化树 /
function zTreeInit(json) {
$.fn.zTree.init($("#treeDemo"),json);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//全部展开
zTree.expandAll(true);
//Y代表勾选时,N代表取消勾选 p代表父节点,s代表字节点
setting.check.chkboxType = { "Y" : "ps","N" : "ps" };

}

java代码

Controller层

treeInfos = feeTransferService.initTree(params); return DataMessage.successData(treeInfos); }

tree实体类

private String id;
private String pid;
private String name;
private String isParent;
}

说明

更多实例可以参看 或参见nofollow" target="_blank" href="https://github.com/zTree/zTree_v3">zTree GitHub 里面更多的示例和说明。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/42694.html

猜你在找的jQuery相关文章