树形图动态添加

原始的树形图不好看也不方便

动态的树形图

原始的树形图子节点和父节点的添加想当麻烦，动态的树形图就可以完美的解决这个问题。
我将树形图动态添加分为三部分 1.控制器查询 2.页面接收设置数据 3.设置图标美化外观
一、 控制器查询
在查询之前我们需要实例化 List<Dictionary<string, object>>
List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();
还要创建一个实体类收集数据
public class TreeVo
{
public int id; //id
public int pid; //父id
public string name; //名字
}
实例化它List treeList = new List();
开始查询至于 控制器查询方法我不多说以前的文章有
在select new TreeVo
{
id = 表中的自身id
pid =表中记录的父级id
name =表中自身的名字
}.ToLisst();
把获取的数据循环添加到TreeVo中
for (int i = 0; i < listAuthorityTemplet.Count; i++)
{
TreeVo tree = new TreeVo();
tree.pid = listAuthorityTemplet[i].pid;//父id
tree.id = listAuthorityTemplet[i].id;//子id
tree.name = listAuthorityTemplet[i].name.ToString();//节点名
treeList.Add(tree);
}
在循环将 tree的数据添加到Dictionary<string, object>中
foreach (var model in treeList)
{
Dictionary<string, object> jsonobj = new Dictionary<string, object>();
jsonobj.Add(“pId”, model.pid); //父id
jsonobj.Add(“id”, model.id);//子id
jsonobj.Add(“name”, model.name);//节点名称
jsonlist.Add(jsonobj);
}
最后返回jsonobj 控制器就写完了
二、 页面接受设置数据
一、 设置树形图的基本配置
我当前设置的
var setting = {
data: {
simpleData: {
enable: true
}
},
}; elem 指定元素的选择器
skin 风格定义
click 点击节点的回调 相当于点击事件
href 节点链接（可选），未设则不会跳转
target 节点打开方式（即a的target值），必须href设定后才有效
nodes //节点
{
name 节点名称spread
boolean 是否展开状态（默认false）
href 节点链接（可选），未设则不会跳转
}
children object //子节点同节点
二、 请求控制器数据
$.ajax({
type: “post”,
url: “路径 就是写了查询的那个懂吧”,
success: function (data) {
$.fn.zTree.init($("#在这里选中我要把树形图添加的id"), setting, data);
}
});
三、 页面美化
function SetIcon() {
var treeObj = $.fn.zTree.getZTreeObj(“树形图所在元素的id”);//树形
不同的层级设置不同的图片
var two = treeObj.getNodesByParam(“level”, 1, null);
for (var i = 0; i < two.length; i++) {
$(two[i]).attr(“icon”, “/Plugins/treeImag/two.png”);
};
var two = treeObj.getNodesByParam(“level”, 2, null);
for (var i = 0; i < two.length; i++) {
$(two[i]).attr(“icon”, “/Plugins/treeImag/tree.png”);
};
var two = treeObj.getNodesByParam(“level”, 3, null);
for (var i = 0; i < two.length; i++) {
$(two[i]).attr(“icon”, “/Plugins/treeImag/four.png”);
};
}
写完之后只需要在树形图请求完数据后调用这个美化方法就可以；