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

EasyUI组合树插件的更多相关文章

  1. 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  2. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  3. 基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  4. Jquery UI 组合树 - ComboTree 集成Wabacus4.1 代码剖析

    Jquery UI 1.3 (组合树 - ComboTree ) 集成Wabacus4.1 集成Spring 代码剖析 使用时,请下载需要Jquery ui包进行配置 combotree.js 的代码 ...

  5. 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  6. ASP.NET MVC jQuery 树插件在项目中使用方法(一)

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  7. Unity火爆插件Behavior Designer行为树插件学习

    如果要让游戏里的角色或者NPC能执行预设的AI逻辑,最简单的用IF..ELSE...神器既可以实现, 但是再复杂的一般用经典的状态机来切换状态,但是写起来比较麻烦.相对的,行为树(Behavior T ...

  8. combotree(组合树)的使用

    一.前言: 组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 二 ...

  9. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

随机推荐

  1. js数据类型判断和数组判断

    这么基础的东西实在不应该再记录了,不过嘛,温故知新~就先从数据类型开始吧 js六大数据类型:number.string.object.Boolean.null.undefined string: 由单 ...

  2. requirejs、backbone.js配置

    requirejs初探 参考资料官网:http://requirejs.org中文译文:http://makingmobile.org/docs/tools/requirejs-api-zh reuq ...

  3. 如何配置ssh免密码登录

    [TOC] 如果你在管理一堆unix机器,每次登录都要输入密码是挺烦的事情,一方面为了安全我们一般不会将所有机器的密码都设置成一样,另一方面就算一样每次都输入一遍也很麻烦. 这种情况下我们一般是用ss ...

  4. Java的wait(), notify()和notifyAll()使用小结

    wait(),notify()和notifyAll()都是java.lang.Object的方法: wait(): Causes the current thread to wait until an ...

  5. NPM 与 left-pad 事件:我们是不是早已忘记该如何好好地编程?

    转自:http://www.techug.com/npm-left-pad-have-we-forgotten-how-to-program 开发者朋友们,我们该谈一谈这个问题了.你们应该知道本周的  ...

  6. 利用闭包向post回调函数传参数

    最近在闲逛XX站的时候,打算搞个破坏,试试有多少人还是用初始密码登陆.比较懒,所以直接打开控制台来写. 所以问题可以描述为: 向后端不断的post数据,id从1~5000自增,后端会根据情况来返回值r ...

  7. 本人第一个开源代码,NETSpider 网络蜘蛛采集工具

    NETSpider网站数据采集软件是一款基于.Net平台的开源软件.软件部分功能是基本Soukey软件进行开发的.这个版本采用VS2010+.NET3.5进行开发的.NETSpider采摘当前提供的主 ...

  8. HIS系统的处方录入控件

    前文<EFW框架Winform前端开发之强大的自定义控件库>中我们介绍了EFW框架中Winform系统中的自定义控件,本章使用自定义控件中的GridBoxCard控件开发了一个HIS系统的 ...

  9. 三十、【C#.Net开发框架】WCFHosting服务主机的利用WCF服务通讯和实现思路

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...

  10. Ubuntu下PHP的扩展

    Ubuntu版本:14.04 1. 下载php-5.5.10.tar.bz2,并解压. 2.  终端进入解压后的目录php-5.5.10,运行configure.(输入命令./configure) 3 ...