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		傳回對象的樹。下面的例子顯示了如何獲得選中的樹節點。 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		清除的元件值。
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