Use of EasyUI combotree

Original link: http://www.cnblogs.com/xcsn/p/8795392.html

 

 

First, the background data

1. Define class ComboTree

According to property of the control to write

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. Extended ComboTree method

public  partial  class ComboTree 
    { 
        public  String GetTreeString (List <ComboTree> treeList) 
        { 
            the StringBuilder SB = new new the StringBuilder (); 
            sb.append ( " [ " ); 
            List <ComboTree> parenTrees treeList.Where = (Q => = q.parentid = " 0 " ) .ToList ();    // assign permissions to each role must have a parent's permission, otherwise none of the output 
            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<ComboTree> 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<ComboTree> treeList, string parentId)
        {
            StringBuilder sb = new StringBuilder();
            List<ComboTree> childrenTrees = treeList.Where(q => q.parentid == parentId).ToList();
            if (childrenTrees.Count > 0)
            {
                foreach (var childrenTree in childrenTrees)
                {
                    List<ComboTree> 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 ( " ]}, " ); 
            } 
            the else   // no child nodes under the root node 
            { 
                sb.append ( " ]}, " );   // put together with the character string other than the above, if the conditions 
            }
             return sb.ToString (); 
        } 
    }

 

3.MVC call

public ActionResult GetTree()
{
    List<ComboTree> comboTrees = new List<ComboTree>();
    var list = new List<entity>();//获取列表数据
    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);
}

 

Second, the use of front-end

HTML

<label class="form_label">
    部门：
</label>
<input class="easyui-combotree" id="treeParentId" name="treeParentId" data-options="url: '/Home/GetTree',onLoadSuccess:onLoadSuccess,onBeforeSelect:onBeforeSelect,onSelect:onSelect,lines:true" style="width: 200px; height: 22px;" />

 

script

 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 triggered when the remote data is loaded successfully

ZeroArr to filter array that contains the same id option is not selected.

    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: Trigger onBeforeLoad before loading the data request, return false to cancel the load operation

 

Instructions

combobox and combotree combo is an extension of the relevant Chinese Tutorial:

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

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

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

 

Reproduced in: https: //www.cnblogs.com/xcsn/p/8795392.html