博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI combotree的使用
阅读量:6859 次
发布时间:2019-06-26

本文共 4123 字,大约阅读时间需要 13 分钟。

 

 

一、后台数据

1.定义ComboTree类

根据控件的属性来写

public partial class ComboTree    {        public string id { get; set; }        public string text { get; set; }        public string iconCls { get; set; }        public string state { get; set; }        public string parentid { get; set; }        public string attributes { get; set; }        public string children { get; set; }     }

 

2.扩展ComboTree方法

public partial class ComboTree    {        public string GetTreeString(List
treeList) { StringBuilder sb = new StringBuilder(); sb.Append("["); List
parenTrees = treeList.Where(q => q.parentid == "0").ToList(); //赋权限每个角色都必须有父节点的权限,否则一个都不输出了 if (parenTrees.Count > 0) { foreach (var parentTree in parenTrees) { sb.Append("{\"id\":\"" + parentTree.id + "\",\"text\":\"" + parentTree.text + "\",\"iconCls\":\"" + parentTree.iconCls + "\",\"children\":["); sb.Append(GetChildString(treeList, parentTree.id)); } sb.Remove(sb.Length - 1, 1); sb.Append("]"); } else { sb.Append("]"); } return sb.ToString(); } public string GetComboTreeString(List
comboTrees) { string sb = "["; comboTrees.ForEach(f => sb += "{\"id\":\"" + f.id + "\",\"text\":\"" + f.text + "\",\"iconCls\":\"" + f.iconCls + "\"},"); sb = sb.Trim(",".ToCharArray()); sb += "]"; return sb; } private string GetChildString(List
treeList, string parentId) { StringBuilder sb = new StringBuilder(); List
childrenTrees = treeList.Where(q => q.parentid == parentId).ToList(); if (childrenTrees.Count > 0) { foreach (var childrenTree in childrenTrees) { List
childrens = treeList.Where(q => q.parentid == parentId).ToList();//childrenTreedt.Select(string.Format("parentid={0}", r_list[j]["id"].ToString()))); if (childrens.Count > 0) { sb.Append("{\"id\":\"" + childrenTree.id + "\",\"text\":\"" + childrenTree.text + "\",\"iconCls\":\"" + childrenTree.iconCls + "\",\"children\":["); sb.Append(GetChildString(treeList, childrenTree.id)); } else { sb.Append("{\"id\":\"" + childrenTree.id + "\",\"text\":\"" + childrenTree.text + "\",\"iconCls\":\"" + childrenTree.iconCls + "\",\"attributes\":{\"url\":\"" + childrenTree.attributes + "\"}},"); } } sb.Remove(sb.Length - 1, 1); sb.Append("]},"); } else //根节点下没有子节点 { sb.Append("]},"); //跟上面if条件之外的字符串拼上 } return sb.ToString(); } }

 

3.MVC调用

public ActionResult GetTree(){    List
comboTrees = new List
(); var list = new List
();//获取列表数据 list.ForEach(f => comboTrees.Add(new ComboTree() { id = f.Id, text = f.Name, parentid = f.ParentId })); string treeString = new ComboTree().GetTreeString(comboTrees); return Content(treeString);}

 

二、前端运用

HTML

 

脚本

function onLoadSuccess(node, data) {        if (data && data.length>0) {            $("#treeParentId").combotree('setValue', data[0].id);        }    }

function onSelect(record) {

  console.log(record);
  var id = record.id;
  var text = record.text;
}

 PS: 当远程数据加载成功时触发onLoadSuccess

ZeroArr为过滤数组,包含相同的id选项不能选中.

function onBeforeSelect(node) {        var isZero = false;        ZeroArr.forEach(function (value, index) {            //console.log(node.id + "======" + ZeroArr[index].Id);            if (node.id === ZeroArr[index].Id) {                isZero = true;                return false;            }        });        if (isZero) {            $.msg_show("提示", "请选择下级节点");            return false;        }    }

 PS: 在请求加载数据之前触发onBeforeLoad,返回 false 则取消加载动作

 

相关说明

combobox和combotree是combo的扩展,相关中文教程:

http://www.jeasyui.net/plugins/168.html  combo 

http://www.jeasyui.net/plugins/169.html  comboBox

http://www.jeasyui.net/plugins/170.html   comboTree

 

转载地址:http://chtyl.baihongyu.com/

你可能感兴趣的文章
进程、应用程序域,线程和上下文之间的关系
查看>>
c++作业:递归调用,例题4.5 求第五个人的年龄
查看>>
为什么我的新项目选择了Quick-cocos2d-x
查看>>
Spring源码学习之一下载和导入
查看>>
13.使用第三方类实现动画
查看>>
H5在js中向指定的元素添加样式
查看>>
Java第一章
查看>>
文件编辑器Vim操作使用
查看>>
本地通知,UILocalNotification
查看>>
增强学习
查看>>
[逆向][Writeup]EIS2016 chkflag - .NET程序逆向
查看>>
RequireJS入门指导 (转)
查看>>
在子类中调用父类被隐藏的函数的方法
查看>>
修改Discuz! X2文章标题字数限制为255
查看>>
【HDOJ】2102 A计划
查看>>
利用p4实现ipv6转发实验
查看>>
UiPath实践经验总结(二)
查看>>
分页---总结
查看>>
触屏网页设计初探 (二) - [移动开发]
查看>>
前端开发的历史和趋势(转摘阮一峰)
查看>>