一、引用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 == && 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 == ) 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'); // 获得树对象 |
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