根据数据库数据渲染Layui.tree树形

开发工具与关键技术：Visual Studio 2015、C#
作者：曾浩源
撰写时间：2019年06月26日
首先就是引用layui的css和js，当然还有jQuery。
然后就是HTML：

<div>
	<div id="test" style="margin-left:5%;display:inline-block;"></div>
</div>

Layui非常的贴心，就是HTML就是这么方便，然后就是js了，js的数据渲染也是很方便的。
首先是必要的layui专属调用组件法：

layui.use('tree', function () {
    		var tree = layui.tree;
    	//然后就是渲染树形
       	var inst1 = tree.render({
         	elem: '#test',   //绑定元素
             	data: []
  		});
});

组件tree，里面的基础参数常用的有elem（选择器，建议选择id，需要加id选择器#）、data（数据源）、ShowCheckBox（是否显示复选框，默认false）、accordion（是否开启手风琴模式，默认false）

参数data数据源也有特定的属性，所以要根据数据库数据渲染layui的tree树形就必须根据data数据源的属性从控制器获取数据。
参数data的三个常用参数为：title（顾名思义：标题，用于显示的文字）、id（上级id，也就是父类）、children（子类，该子类里面相当于一组小的数据源，属性与外边一致）、checked（节点是否初识为选中状态）

接下来就是根据数据源相对应格式去获取数据库的数据：data数据源格式：

 	data: [{title: '江西' //一级菜单
        ,children: [{title: '南昌' //二级菜单
          	,children: [{title: '高新区' //三级菜单
              	//…… //以此类推，可无限层级
          	}]
	}]

数据库表为：

使用循环或者递归将需要的数据按指定格式添加进list集合（这里是递归）：

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>> jsonoList = new List<Dictionary<string, object>>();
	//查询出表的所有数据
   	var treeList = myModels.jurisdiction.Where(m => m.jurisdiction_id == id).Select(m => m).ToList();
  	foreach (jurisdiction dr in treeList)//foreach循环遍历
  	{
		//创建字典，将所需的字段和值添加进去
    	Dictionary<string, object> json = new Dictionary<string, object>();
   		json.Add("title", dr.name_jurisdiction);//标题
      	json.Add("id", dr.jurisdiction_id);//上级id
      	json.Add("id_jurisdiction", dr.id_jurisdiction);//自身id
      	json.Add("state", dr.state_jurisdiction);//状态
//子类 递归传入自身id，继续遍历子类
      	json.Add("children", GetTree(dr.id_jurisdiction));
      	var count = myModels.jurisdiction.Where(m => m.jurisdiction_id == dr.id_jurisdiction).Count();//查询该条数据是否拥有子类
       	if (dr.state_jurisdiction && count == 0)//没有的话默认复选框勾选
       	{
			json.Add("checked", dr.state_jurisdiction);//默认复选框勾选
       	}
       	jsonoList.Add(json);//将字典添加进字典集合
   	}
	return jsonoList;//返回字典集合
}

Js代码：

 		$(function () {
			//调用tree组件
            layui.use('tree', function () {
                var tree = layui.tree;//组件赋值给变量
                $.post("SelectPermissions", function (data) {//请求数据
                    //渲染
                    tree.render({
                        elem: '#Permissions',  //绑定元素
                        data: data,//返回的数据
                        showCheckbox: true,
                        accordion: true,//手风琴模式
                    });
                });
            });
        });

效果图：