xml文件怎么生成ztree_Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图

本篇文章是接着Spring Boot 入门(五)：集成 AOP 进行日志管理写的，主要集成了树形图，在部门列表或者权限列表中，树形图经常被用上。主要是根据相应的 API 凭借 html 字符串

1.treetable

$(document).ready(function() {});

&times

选择部门

部门编号部门名称上级部门编号上级部门名称

var tcXzqh_tab;

function loadTcXzqhTable(){

$.ajax({

url: '/admin/dept/spage',

type: 'post',

dataType: 'json',

success: function (data) {

if(data !=null){

var html = "";

for (var int = 0; int < data.resultData.length; int++) {

var item = data.resultData[int];

if(item.hasChild == true){

html+=

"

";

}else{

html+=

"

";

}

html+=

"

"+item.xzqhbm+""+

"

"+item.xzqh+""+

"

"+item.pXzqhbm+""+

"

"+item.pXzqh +""+

"

";

}

$("#tcXzqh_tab tbody").html(html);

initTcXzqh_treeTable();

}

//$("#loading").hide();

}

});

}

function initTcXzqh_treeTable(){

var option = {

/*theme:'vsStyle',*//*这里的主题和引入的CSS有关*/

expandLevel : 2,

beforeExpand : function($treeTable, id) {

//alert(id);

//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用

if ($('.' + id, $treeTable).length) { return; }

//这里的html可以是ajax请求

openHandleLoading();

var childHtml="";

$.ajax({

url: '/admin/dept/expand?parentId='+id,

type: 'post',

dataType: 'json',

success: function (data) {

//alert(data);

if(data !=null){

//var html = "";

for (var int = 0; int < data.resultData.length; int++) {

var item = data.resultData[int];

if(item.hasChild == true){

childHtml+=

"

";

}else{

childHtml+=

"

";

}

childHtml+=

"

"+item.xzqhbm+""+

"

"+item.xzqh+""+

"

"+item.pXzqhbm+""+

"

"+item.pXzqh+""+

"

";

}

}

$treeTable.addChilds(childHtml);

closeHandleLoading();

}

});

},

onSelect : function($treeTable, id) {

//console.log('onSelect:' + id);

}

};

$("#tcXzqh_tab").treeTable(option).show();

//$("#tcXzqh_tab").treeTable({expandLevel : 2,column:0}).show();

}

function _callback(chooseValue) {

/*alert(chooseValue);*/

$("#${inputId!}").val(chooseValue);

$("#lgModal2").modal("hide");

}

$(function () {

loadTcXzqhTable();

});

首先引入相应的 JS 文件和样式文件