您的位置:首页 > 数据库

使用ztree异步加载数据库数据形成树形菜单

2018-04-08 17:43 615 查看
—搞了好久好久,在此记录一下这个这个胜利的时刻!!!!作为一个合格的程序员,任重而道远啊—

项目环境:thinkphp5+mysql+ztree

项目目标:从MySQL数据库获取小区用户位置信息、用户信息利用ztree动态生成树形菜单

mysql数据库表设计

小区地点表



小区用户表



控制器代码

/**
* 获取小区用户位置信息\用户信息,并转换为json格式,传给前端展示
*/
public function getLocationInfo(Request $request){
//获取ztree自带提交的参数, 若是页面加载时第一次请求, 该参数为空,
$father_id = $request->param('id');
//dump($father_id);

//全局数据组
$data = array();

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

//获取数据
$tempData = LocationModel::all(['LUID'=>NULL]);

$a = array();

$temp = array();

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

foreach ($tempData as $value) {
$temp['id'] = $value['LID'];
$temp['name'] = $value['LName'];
$temp['pid'] = $
c4ba
value['LUID'];
$temp['isParent'] = $value['isParent'];

//加了[],相当于把$a(一维数组)转变为二维数组(自己总结的~~)
$a[] = $temp;
unset($temp);
}
//将临时数组$a赋值给全局数组$data,作为返回
$data = $a;
unset($a);

} else { //子节点被点击时,即从前端传来的$father_id不为空时

//获取父节点长度,用于判断是加载二三级目录还是加载客户名录列表(小区位置表与小区用户表不是一张表,需要关联查询)
$father_id_length = strlen($father_id);

//如果获取到的id长度小于3,只加载二级三级目录(二级目录楼栋,三级目录单元)
if($father_id_length < 3){
//dump('<<<<<3');
$tempData = array();

$tempData = LocationModel::all(['LUID'=>$father_id]);

$a = array();

$temp = array();

foreach ($tempData as $value) {
$temp['id'] = $value['LID'];
$temp['name'] = $value['LName'];
$temp['pid'] = $father_id;
$temp['isParent'] = $value['isParent'];
$a[] = $temp;
unset($temp);
}
$data = $a;
unset($a);

//1、获取客户列表
//2、用取得的id(前端通过点击节点传来的父节点id)去客户表(customer)中查询是否存在该父节点下系列客户
//若存在则返回json数据,不存在不返回
//3、find()-查询单条数据,若查不到数据返回null
} else if(LocationModel::table('customer')->where('LID',$father_id)->find()){

//dump('>>>>>>>>3');
$tempData1 = LocationModel::table('location loc, customer cus')
->where('loc.LID = cus.LID')
->field('cus.CID,cus.Name,cus.RoomNo,cus.LID,cus.isParent')
->order('cus.CID asc' )
->select();

$a1 = array();

$temp1 = array();

foreach ($tempData1 as $value) {
$temp1['id'] = $value['CID'];
$temp1['name'] = $value['Name'];
$temp1['pid'] = $value['LID'];
$temp1['isParent'] = $value['isParent'];
$a1[] = $temp1;
unset($temp1);
}
$data = $a1;
unset($a1);
}
}

//json数据返回
//将数组转化为json返回,thinkPHP5
return json_encode($data);
}


前端htmL代码

<!--引入zTree css样式文件-->
{load href="__STATIC__/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" /} {/block}


<!-- ztree容器 -->
<ul id="mytree" class="ztree"></ul>


<!--引入zTree js文件-->
<script type="text/javascript" src="__STATIC__/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>


<script type="text/javascript">
var setting = {
//设置数据格式
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0,
}
},

//可勾选
check: {
enable: true,
chkStyle: "checkbox",
},

async: {
enable: true,
dataType: "json",
url: "getLocationInfo",
autoParam: ["id"],
type:'post',
},

// 回调函数
callback : {
beforeAsync: zTreeBeforeAsync,
onAsyncSuccess: zTreeOnAsyncSuccess,
onAsyncError: zTreeOnAsyncError,
},

};

//用于捕获异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载
function zTreeBeforeAsync(treeId, treeNode) {
//alert("这是异步加载之前的事件回调函数");
};

//异步请求成功的回掉函数
//treeId-mytree
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
//alert(msg);
};

//异步请求失败的回调函数
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert('请求失败!');
alert(XMLHttpRequest);
};

$(function() {
$.fn.zTree.init($("#mytree"), setting);
});
</script>


效果图



完结!!!!!!!!!!

———————-重新更新过,现在更完整!—————————-
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: