前端:
<div id="names" name="names"></div>
<div id="teste" class="demo-tree demo-tree-box center"
style="width: 780px; height: 300px; overflow: scroll;"></div>
//overflow: scroll;是滚动条
overflow: scroll;是滚动条
Js:
//tree加这里指定为树型图
//util为工具集,不加可能触发不了任何事件
//laypage下面的翻页,第几页,下一页等,不加不能显示页数
layui.use(['tree', 'util', 'laypage'], function () {
var tree = layui.tree
, layer = layui.layer
, util = layui.util;
var laypage = layui.laypage;
$.getJSON('JsonGetProject', //这里输入后端接口名字就行
{
Name: name,//这里是往后端传的参数
}, function (json) { //返回的json
if (json) {
NameJson(json,100) //调用下方方法写在一起看花了
}
});
//创建方法免得看花了眼,上面调用这个方法
function NameJson(json, page) {
tree.render({
elem: '#teste' //我们树型图的id
, data: json //把json 给树型图
, showCheckbox: true //是否显示复选框
, oncheck: function (obj) { //复选框点击后触发事件
if (obj.checked) { //判断是选中还是取消
//obj.data选中的选项所有的数据、
//obj.data.id 和obj.data.title要的,json里面也得有,也可以自己定义
document.getElementById('names').value = obj.data.title;
if(obj.data.field=""){//下面的传值这个就是获取外层数据,以此类推 }
else{ //这个就是下一级了
obj.data.children.forEach(function (o, p, q) {
//o 代表循环的第一个值
//p 代表当前值在数组中第几条
//q 代表这个整个数组或集合
});
})
}
}
else{//我就是取消选项了以此类推
}
}
});
}
});
注意点:
1.只要跟树型图有关的都得写layui.use(['tree', 'util', 'laypage'], function () {
这个里面,不写这里面无法没有反应的
2.里面Js写法可能不会生效,得用jQuery 例:jQuery写法
后端:
拼接出前端所需的json格式的数据
public ActionResult JsonGetName(string Name)
{
var jsons = _model.Query()
.Select(x => new
{
id = x.Id,
title = x.Name,
field="",
children = new List<Titles>{
new Titles
{
id=x.Id+1000,
title="爱",
field ="假的",
},
new Titles
{
id=x.Id+1001,
title="不爱",
field = "假的",
},
new Titles
{
id=x.Id+1002,
title="爱钱",
field ="真的",
},
}
});
//返回可能不同,但是Newtonsoft.Json.JsonConvert.SerializeObject转换格式还是要的
return Content(Newtonsoft.Json.JsonConvert.SerializeObject(jsons));
}
不知道我写漏了没有,有哪里漏了没看懂,可以提问,看到了会回复。互相帮助,希望我有问题问你们可以回复谢谢!!