正文
easyui-tree绑定数据的几种方式
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
没想到easyui对json数据格式要求的那么严谨,折腾了半天
第一种直接使用标签方式,很容易就加载出来了:
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
第二种,在js中绑定:
<ul id="myTree"></ul>
$('#myTree').tree({
method: 'get',
url: 'tree_data1.json' });
注意:easyui tree获取数据的HTTP方法默认是post,但是用post的时候却报了谓词错误, 所以指定了get ----》需要查查,还不了解因果。
三,用data直接绑json:
$.ajax({
type: 'GET',
url: 'tree_data1.json',
success: function (result) {
var myJson = eval('(' + result + ')');
$('#myTree').tree({
data: myJson
});
}
});
这种方式绑定下面的这种json数据格式是有效的,但是方法二却绑不上:
[{ 'text':'.Net','state':'closed','children':[{'text':'C#'},{'text':'asp.Net'}]},{'text':'Java'}]
一般最好用双引号
第四种:与第二种js绑定其实都是一样的只是写在元素标签上了而已
<ul class=" easyui-tree" data-options=" url:'JsonHandler.ashx'">
JsonHandler.ashx是asp.net中的一般处理文件,输出json串,当然这个返回的接送数据也要和第二种的json一致,不然还是绑不上
相关参考http://www.zi-han.net/case/easyui/datagrid&tree.html#tree
效果图:
后台根据id获取多级树:
创建树的实体类大概写了几个树常用到的属性
public class TreeEntity {
public string id { get; set; }
public string text { get; set; }
public string iconCls {
get { return "icon-group-bank"; }
}
public List<TreeEntity> children { get; set; }
}
一般处理处理程序序列化输出树:
public void ProcessRequest(HttpContext context) { Int32 groupId = (Int32)context.Session["LoginUserGroupID2"];
string groupName = SqlDataHelper.GetGroupNameById(groupId); List<TreeEntity> list = new List<TreeEntity>();
list.Add(new TreeEntity() {
id = groupId.ToString(),
text = groupName,
children = GetTreeChildren(groupId)
});
string responseString = ClassHelper.ObjectToJSON(list);//序列化树实例
context.Response.ContentType = "text/plain";
context.Response.Write(responseString);
}
/// <summary>
/// 根据ID获取子节点对象
/// </summary>
/// <param name="groupId"></param>
/// <returns></returns>
private static List<TreeEntity> GetTreeChildren(Int32 groupId) {
List<GroupEntity> groupList = SqlDataHelper.GetUserGroupsById(groupId);
List<TreeEntity> treeList = new List<TreeEntity>();
if (groupList.Count < ) {
return null;
}
else {
for (int i = ; i < groupList.Count; i++) {
TreeEntity tree = new TreeEntity();
tree.id = groupList[i].GroupID.ToString();
tree.text = groupList[i].GroupName;
tree.children = GetTreeChildren(groupList[i].GroupID);
treeList.Add(tree);
}
return treeList;
}
}