在我们做项目的时候常常都会遇到一些新的知识，老师也没讲过的一些知识，那这些知识就需要我们自己去寻找，今天，我要讲的就是在做项目的时候会出现的一个东西：树形组件
如下图所示：
这个组件如何实现呢？
网上找？
很正确！
- 在网上找一个Layui官网，打开：
里面就有我们想要的，但是也不完全是我们想要的(￣.￣)
它只有一个简单的渲染：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树组件</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div id="test1"></div>
<script src="../src/layui.js"></script>
<script>
layui.use('tree', function(){
var tree = layui.tree;
//渲染
var inst1 = tree.render({
elem: '#test1' //绑定元素
,data: [{
title: '江西' //一级菜单
,children: [{
title: '南昌' //二级菜单
,children: [{
title: '高新区' //三级菜单
//…… //以此类推，可无限层级
}]
}]
},{
title: '陕西' //一级菜单
,children: [{
title: '西安' //二级菜单
}]
}]
});
});
</script>
</body>
</html>我们要做的是一个连接数据库的树形渲染(?ω?)?
接下来就用我正在做的项目为你们讲解：
二．首先创建一个关联的数据库：
这是我的项目里面的数据库，做树形其实不用四个表，三个表足够了，只是我的项目还有一些功能要实现，正常来说下面几个表就可以了：
三．数据库构建完成了，现在进入页面，在页面引入Layui的插件：
?
一个是css插件，一个是js插件。
四．插件引入完成，用一个div来接收渲染的树形：
五．在<script>里面调用tree组件：
//调用tree组件
layui.use( 'tree', function?() {
??????tree = layui.tree;//组件赋值给变量
??????$.post("selectPermissions", function?(data) {//请求数据
?????????????//渲染
?????????????tree.render({
??????????????????elem: '#InspectionItemTree', ?//绑定元素
??????????????????data: data,//返回的数据
??????????????????accordion: true,//手风琴模式
??????????????????onlyIconControl: true, //点击后不收缩
??????????????????click: function?(obj) {
????????????????????????console.log(obj.data); //得到当前点击的节点数据
???????????????????}
??????????????});
???????});
});六．重点来了：下面就是控制器从数据库里面拿数据的代码：
?
代码如下：
?
#region?树形
????????public?ActionResult selectPermissions()
????????{
????????????//调用获取数据方法从0(上级id)开始
????????????List<Dictionary<string, object>> data = GetTree(0);
????????????return?Json(data, JsonRequestBehavior.AllowGet);
????????}
????????public?List<Dictionary<string, object>> GetTree(int?id)
????????{
????????????//创建一个字典集合，第一个
????????????List<Dictionary<string, Object>> jsonoListfon = new?List<Dictionary<string, object>>();
????????????//创建一个字
????????????Dictionary<string, object> jsontrue = new?Dictionary<string, object>();
????????????jsontrue.Add("title", "住院信息一览表");
????????????//查询病区表
????????????var?treeList = myModel.Ward.Select(m => m).ToList();
????????????//创建一个字典集合，第二个
????????????List<Dictionary<string, Object>> jsonoList = new?List<Dictionary<string, object>>();
????????????//循环遍历
????????????foreach?(Ward Wat in?treeList)
????????????{
????????????????//创造字典，将所需要的字段和值填进
????????????????Dictionary<string, object> json = new?Dictionary<string, object>();
????????????????json.Add("title", Wat.WardCode + ?"?"+ "("+ Wat.WardName + ")");//标题 病区名称
????????????????json.Add("id", Wat.WardID);//Id
????????????????var?ade = (from?tbAdmissionInformationSheet in?myModel.AdmissionInformationSheet
???????????????????????????join?tbBedCope in?myModel.BedCope on?tbAdmissionInformationSheet.BedCopeID equals?tbBedCope.BedCopeID
???????????????????????????where?tbBedCope.WardID == Wat.WardID
???????????????????????????select?tbAdmissionInformationSheet).ToList();
????????????????//创建一个字典集合，第三个
????????????????List<Dictionary<string, object>> jsonListDe = new?List<Dictionary<string, object>>();
????????????????foreach?(AdmissionInformationSheet ed in?ade)
????????????????{
????????????????????try
????????????????????{
????????????????????????var?Live = (from?tbAdmissionInformationSheet in?myModel.AdmissionInformationSheet
????????????????????????????????????join?tbSickInformation in?myModel.SickInformation on?tbAdmissionInformationSheet.SickInformationID equals?tbSickInformation.SickInformationID
????????????????????????????????????where?tbSickInformation.SickInformationID == ed.SickInformationID
????????????????????????????????????select?tbSickInformation).Single();
????????????????????????var?Ben = (from?tbBedCope in?myModel.BedCope
???????????????????????????????????where?tbBedCope.BedCopeID == ed.BedCopeID
???????????????????????????????????select?tbBedCope).Single();
????????????????????????//创造字典，将所需要的字段和值填进
????????????????????????Dictionary<string, object> jsonde = new?Dictionary<string, object>();
????????????????????????jsonde.Add("title", Live.PatientName + "?("?+ Ben.BedCopeNo + ")?"?+ ?Live.AdmissionNumber); //病人名称
????????????????????????jsonde.Add("id", Live.SickInformationID);
????????????????????????jsonListDe.Add(jsonde);//添加到第三个字典集合
????????????????????}
????????????????????catch?(Exception)
????????????????????{
????????????????????????//创造字典，将所需要的字段和值填进
????????????????????????Dictionary<string, object> jsonde = new?Dictionary<string, object>();
????????????????????????jsonde.Add("title", "无数据");
????????????????????????jsonListDe.Add(jsonde);//添加到第三个字典集合
????????????????????}
????????????????}
????????????????//把第三个字典集合放入第二个字典
????????????????json.Add("children", jsonListDe);
????????????????//将字典添加进第二个字典集合
????????????????jsonoList.Add(json);
????????????}
????????????jsontrue.Add("children", jsonoList);
????????????jsonoListfon.Add(jsontrue);
????????????return?jsonoListfon;//返回字典集合
????????}
????????#endregion
