在我们平时做一些项目中,经常会遇到树形图的需求,其实树形图都是大同小异的,下面我主要写了如何调用一些封装好的树形插件;
主要用了以下三个插件
<link href="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Content/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script src="~/Content/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
Html代码:
<div class="">
<ul id="treeDemo" class="ztree"></ul>
</div>
JS代码:
//请求后台返回数据
$(function () {
$.ajax({
type: "Get",
url: "/BasicdataManagment/Clientlocale/Get_TreeView",
success: function (data) {
$.fn.zTree.init($("#treeDemo"), setting, data);//初始化
}
});
})
//树形图配置
var setting = {
data: {
simpleData: {
enable: true,//是否开启树形效果
idKey:"id",//通过id分级
}
},
callback: {
onClick: zTreeOnClick//树形图点击事件
}
};
//点击事件
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.tId + " ," + treeNode.treeNode);
};
后台代码:
/// <summary>
/// 树形查询
/// </summary>
/// <returns></returns>
public JsonResult Get_TreeView()
{
List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();//创建一个表示键和值集合的列表
var listAuthorityTemplet = (from TbTrees in myModels.SYS_Region
select new TreeVo
{
SireID = TbTrees.SireID, //父id
ViscountID = TbTrees.ViscountID, //子id
RegionName = TbTrees.RegionName,//节点名
}).ToList();
foreach (var list in listAuthorityTemplet)
{
Dictionary<string, object> jsonobj = new Dictionary<string, object>(); //创建一个表示键和值的集合
jsonobj.Add("id", list.SireID); //父亲id
jsonobj.Add("pId", list.ViscountID);//儿子id
jsonobj.Add("name", list.RegionName);//节点名称
jsonlist.Add(jsonobj);//把键值的集合添加到列表上
}
return Json(jsonlist, JsonRequestBehavior.AllowGet);
}
数据库:
实现效果如下: