EasyUI组合树插件

一、引用CSS和JS

<link href="~js/easyui/easyui.css" rel="stylesheet" type="text/css" />
<script src="~js/easyui/jquery.easyui.min.js" type="text/javascript"></script>

二、HTML代码

<input type="text" id="subject" name="subject">

三、JS代码

$('#dept').combotree({
    url: '#{GetDeptTree}',
    required: false,
    onSelect: function (node) {
        $.ajax({
            type: "POST",
            url: "#{GetJobs}",
            data: "deptId=" + node.id,
            success: function (data) {
                $("#job").html(data);
            }
        });
    }
});

$('#dept').combotree('setValue', "#{employmentNeeds.Dept.Id}");

 

//部门员工树
$('#Employee').combotree({
    url: '#{GetEmployees}',
    required: false,
    onSelect: function (node) {
        //控制只能选叶子节点
        //返回树对象  
        var tree = $(this).tree;
        //选中的节点是否为叶子节点,如果不是叶子节点,清除选中  
        var isLeaf = tree('isLeaf', node.target);
        if (!isLeaf) {
            //清除选中  
            $('#Employee').combotree('clear');
            return;
        }

        //员工基本信息赋值
        var att = eval("({" + node.attributes + "})");
        $("#spanDeptName").html(att.DeptName);
        $("#spanJobName").html(att.JobName);
        $("#spanEmpCode").html(att.EmpCode);
        $("#spanEntryTime").html(att.EntryTime);
    }
});

三、后台代码：

/// <summary>
/// 获取员工(部门树和员工)
/// </summary>
public void GetEmployees()
{
    echoJson(GetDepts(Constants.OptionAllVal, dropListService.GetDepts(LoginUser)));
}

/// <summary>
/// 获取部门树
/// </summary>
private List<Dictionary<string, object>> GetDepts(int parentDeptId, List<IMP_Dept> allDeptList)
{
    List<Dictionary<string, object>> dicList = new List<Dictionary<string, object>>();

    List<IMP_Dept> deptList = allDeptList.FindAll(a => a.PId == parentDeptId);
    if (deptList.Count == 0 && parentDeptId != Constants.OptionAllVal) return null;

    foreach (IMP_Dept dept in deptList)
    {
        Dictionary<string, object> dic = new Dictionary<string, object>();
        dic.Add("id", dept.Id);
        dic.Add("text", dept.Name);
        dic.Add("checkbox", true);

        List<Dictionary<string, object>> childDicList = new List<Dictionary<string, object>>();

        //当前部门下的子部门
        List<Dictionary<string, object>> childDeptDicList = GetDepts(dept.Id, allDeptList);
        if (childDeptDicList != null)
        {
            childDicList.AddRange(childDeptDicList);
        }

        //当前部门下的员工
        List<Dictionary<string, object>> childEmployeeDicList = GetEmployees(dept);
        if (childEmployeeDicList != null)
        {
            childDicList.AddRange(childEmployeeDicList);
        }

        if (childDicList != null)
        {
            dic.Add("state", parentDeptId == Constants.OptionAllVal ? "open" : "closed");
            dic.Add("children", childDicList);
        }

        dicList.Add(dic);
    }

    return dicList;
}

/// <summary>
/// 获取部门下的员工
/// </summary>
private List<Dictionary<string, object>> GetEmployees(IMP_Dept dept)
{
    List<Dictionary<string, object>> dicList = new List<Dictionary<string, object>>();

    List<IMP_Employee> employeeList = employeeService.FindEmployeeDept(dept.Id);
    if (employeeList.Count == 0) return null;

    foreach (IMP_Employee employee in employeeList)
    {
        Dictionary<string, object> dic = new Dictionary<string, object>();
        dic.Add("id", "emp" + employee.Id);
        dic.Add("text", employee.Name);
        dic.Add("checkbox", true);
        string attributes = string.Format("'DeptName':'{0}','JobName':'{1}','EmpCode':'{2}','EntryTime':'{3}'",
            employee.Dept == null ? "" : employee.Dept.Name,
            employee.Job == null ? "" : employee.Job.Name,
            employee.Code == null ? "" : employee.Code,
            employee.EntryTime == DateTime.MinValue ? "" : employee.EntryTime.ToString(Constants.FormatDate));
        dic.Add("attributes", attributes);
        dicList.Add(dic);
    }

    return dicList;
}

 

 

方法

扩展的方法继承于 combo,下面是添加和覆盖方法combotree.

名称	参数	说明
options	none	返回选择对象。
tree	none	返回对象的树。下面的例子显示了如何获得选中的树节点。 var t = $('#cc').combotree('tree'); // 获得树对象 var n = t.tree('getSelected'); // 获得选中节点显示(文本);
loadData	data	加载本地组合树数据。代码示例: $('#cc').combotree('loadData', [{id: 1,text: 'Languages',children: [{id: 11,text:'Java'},{id: 12,text: 'C++'}]}]);
reload	url	再次请求远程树数据。通过“url”参数覆盖原始url值。
clear	none	清除的组件值。
setValues	values	设置组件值数组。代码示例: $('#cc').combotree('setValues', [1,3,21]);
setValue	value	设置组件的值。代码示例: $('#cc').combotree('setValue', 6);

 

 

参考：http://blog.csdn.net/magister_feng/article/details/6619870

 

自定义属性：http://www.cnblogs.com/Nature-j/archive/2013/05/06/3062598.html