zTree异步加载树形菜单

zTree异步加载树形菜单

ztree是依赖于jquery实现的多功能树插件， 也是目前做菜单管理、权限管理用的较多的前段插件之一。目前ztree功能十分强大， 这里只用了部分异步加载的功能。

zTree官网地址

页面截图

前端代码

文件引入， 注意ztree基于jquery实现， 在它之前一定要先引入jquery

<script type="text/javascript" src="./js/jquery.js">
<link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="./zTree_v3/js/jquery.ztree.core-3.5.min.js"></script>

全局ztree设置， 详情可参考管方API

//ztree配置
var setting = {
async: {
//设置 zTree 是否开启异步加载模式默认值：false
enable: true,
//请求URL， 该处是采用php的thinkphp框架来处理URL
url:"{:U('System/asyncrequest')}",
//请求时自动提交的参数， 该参数服务端可直接用$_POST(php)/（java）request.getParameter()获取
autoParam:["id", "name"],
//返回的数据过滤器
dataFilter: filter,
//对返回返回的数据字体设置
fontCss: setFont,
},
//设置回调
callback: {
//节点点击之前触发方法
beforeClick: zTreeOnBeforeClick,
//节点点击时
onClick: zTreeOnClick,
//异步请求错误回调方法
onAsyncError: zTreeOnAsyncError
}
};

//异步请求错误回调方法, 未处理！！！
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
};

/**
* 对请求返回的数据进行字体设置
* @param treeId 树节点id
* @param treeNode 树节点对象
*/
function setFont(treeId, treeNode) {
if (treeNode && treeNode.isParent) {
//父节点设置字体为blue
return {color: "blue"};
} else {
return null;
}
}

/*
*节点点击前触发方法，用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作，默认值：null
*若返回folse, 则中断后续操作， 不会像服务器发送请求
*/
function zTreeOnBeforeClick(treeId, treeNode) {
//该处判断点击节点是否属于父节点
var check = (treeNode && !treeNode.isParent);
return check;
}

//请求成功后的数据过滤函数
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}

//节点点击时触发的回调
function zTreeOnClick(even, treeId, treeNode) {
//获取点击节点的id和name, 要求返回的json数据有该属性
var sub_id       = treeNode.id;
var sub_name     = treeNode.name;
var parentId     = treeNode.getParentNode().id;
var parentName   = treeNode.getParentNode().name;

}

//页面在家是初始化ztree， 需要绑定tree显示的dom元素ID
$(document).ready(function(){
$.fn.zTree.init($("#dropdownMenu"), setting);
});

页面DOM元素

<div id="DropdownMenuBackground" style="position:absolute; height:260px;width: 260px;min-width:205px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;margin-top: 74px;margin-left: 47%;">
<!-- ztree要求放在ul元素下， class指定为ztree样式文件的ztree -->
<ul id="dropdownMenu" class="ztree"></ul>
</div>

服务端配置

/**
*  异步请求菜单
*  首先获取页面请求的id, 即autoParam:["id", "name"],提交的参数， 若是页面加载时第一次请
*  求，则该参数为空。
*
*/
public function asyncrequest(){
//获取ztree自带提交的参数， 若是页面加载时第一次请求， 该参数为空，
$father_id = $_POST['id'];

//php实例化模型， 查询数据库数据， 此处根据不同语言不同实现
$model = D('Module');

$data = array();
//当请求提交的参数id为空时， 只获取父菜单，
if (!isset($father_id)) {//get all father menu
$tempData = array();

//获取数据
$tempData =  $model->getAllModule(array('pmid' => -1, 'enable' => 1) );
$a = array();

/*
* JSON数据封装时注意事项， 要求返回的json数据属性为父
* {"id":"52","name":"","issuper":"0","pid":"-1","isParent":true}
* 其中id为子节点id， pid为父节点id， name为节点名， isParent标明该节点是否属于父
* 节点， 这四个属性**必须**
*/

foreach ($tempData as $d) {
$tempData['id'] = $d['mid'];
$tempData['name'] = $d['name'];
$tempData['issuper'] = $d['is_super'];
$tempData['pid'] = $d['pmid'];
$tempData['isParent'] = true;
$a[] = $tempData;
unset($tempData);
}
$data = $a;
unset($a);

//子节点点击时
} else {//get all sun node where mid = $father_id
$tempData = array();
$tempData =  $model->getAllModule(array('enable' => 1, 'pmid' => $father_id) );
$a = array();
foreach ($tempData as $d) {
$tempData['id'] = $d['mid'];
$tempData['name'] = $d['name'];
$tempData['issuper'] = $d['is_super'];
$tempData['pid'] = $father_id;
$tempData['isParent'] = false;
$a[] = $tempData;
unset($tempData);
}
$data = $a;
unset($a);
}

//json数据返回
$this->ajaxReturn($data, "JSON");
}

该dome采用php作为服务端， php不熟的可在百度云盘下载Java版的按理！！！！！！

版权所有 @ruoyi 转载请注明出处！！！