Easyui 树控件的学习 方便以后自己查看 .net mvc
2017/12/20
树的生成是依靠多次发送异步请求完成的
Easyui Tree 的js如下:
html代码：
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" ></ul>
</div>
$(function(){ //页面加载就启动
$('#tt').tree({
url: '@Url.Action("TreeTest","GoodsSort")',
animate: true,//定义当节点展开折叠时是否显示动画效果类型:bool
lines: true,//定义是否显示树线条
queryParams: {hhh:'hhh'},//附加数据
onBeforeLoad: function (node, param)//发送前操作，其中 param是发送到.net后台的数据
{
if (node) { //用Request.Form["MenuId"]可以收到param.MenuId
param.MenuId = node.id;
}
},
onLoadSuccess: function (node, data) {//当数据加载成功时触发。
var t = $(this);
if (data) {
$(data).each(function (index, d) {
if (this.state =='closed') { //判断节的状态如果有一个是关闭
t.tree('expandAll'); //打开所有的节
} //节的打开会重复访问本方法直到加载完所有的节
});
}
}
})
})
sql server 表情况：
.net代码:
public ActionResult TreeTest()
{
ArrayList str = new ArrayList();
var MenuId = Request.Form["MenuId"];
List<GgoodSort> sortlist =new List<GgoodSort>();
using (RepositoriesContext db=new RepositoriesContext())
{
sortlist= db.GgoodSort.GetAll().ToList();//获得表中所有数据
}
if (MenuId==null)//如果节点id==null,遍历所有PartentGoodTypeId为Guid.Empty的数据
{
foreach (var itemin sortlist.Where(x=>x.PartentGoodTypeId==Guid.Empty).ToList())
{
str.Add(new EmployeeTree //将符合条件的添加到 ArrayList中
{
id=item.GoodTypeId,
text=item.Title,
state= sortlist.FirstOrDefault(x=>x.PartentGoodTypeId==item.GoodTypeId)==null?"open" :"closed",
});
}
}
else//如果节点id存在,遍历所有PartentGoodTypeId为MenuId的数据
{
foreach (var itemin sortlist.Where(x=>x.PartentGoodTypeId.ToString()==MenuId).ToList())
{//将符合条件的添加到 ArrayList中
str.Add(new EmployeeTree { id=item.GoodTypeId,
text=item.Title,
state=sortlist.FirstOrDefault(x=>x.PartentGoodTypeId==item.GoodTypeId)==null?"open" :"closed",
});
}
}//返回 ArrayList
return Json(str, JsonRequestBehavior.AllowGet);
}
实体类:
public class EmployeeTree
{
public Guid? id {get;set; }//编号
public String text {get;set; }//显示值
public string state {get;set; }
public bool check {get;set; }//是否选中
}