6862人阅读
javascript（163）
@author YHC
覆盖默认值&$.fn.tree.defaults.
tree显示一个树结构分层数据在web页面中,它提供用户,&expand(展开), collapse(折叠),
drag(拖动) ,editing (编辑)和异步加载功能.
draggabledroppable
Tree 可以在&ul&元素定义,标记可以定义叶子节点,子节点,节点可以是li元素和内置的ul的列表,下面展示的元素使树节点内嵌ul元素:
&ul id=&tt& class=&easyui-tree&&
&span&Folder&/span&
&span&Sub Folder 1&/span&
&span&&a href=&#&&File 11&/a&&/span&
&span&File 12&/span&
&span&File 13&/span&
&span&File 2&/span&
&span&File 3&/span&
&span&File21&/span&
也可以在一个空的ul元素中定义和使用javascript加载数据
&ul id=&tt&&&/ul&
$('#tt').tree({
url:'tree_data.json'
}); 使用loadFilter处理&ASP.NET
web services输出的json数据.
$('#tt').tree({
loadFilter: function(data){
if (data.d){
return data.d;
Tree 数据转换
所有节点都包含以下属性:
id:节点id,这个很重要到加载远程服务器数据 which is important to load remote datatext: 显示的节点文本state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载checked: 指明检查节点是否选中.attributes: 可以添加到节点的自定义属性children: 一个节点数组,定义一些子节点
&text&:&Folder1&,
&iconCls&:&icon-save&,
&children&:[{
&text&:&File1&,
&checked&:true
&text&:&Books&,
&state&:&open&,
&attributes&:{
&url&:&/demo/book/abc&,
&price&:100
&children&:[{
&text&:&PhotoShop&,
&checked&:true
&text&:&Sub Bookds&,
&state&:&closed&
&text&:&Languages&,
&state&:&closed&,
&children&:[{
&text&:&Java&
&text&:&C#&
异步加载树
tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:
&ul class=&easyui-tree& data-options=&url:'get_data.php'&&&/ul&
tree的加载是通过URL&&'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据
&text&: &Node 1&,
&state&: &closed&,
&children&: [{
&text&: &Node 11&
&text&: &Node 12&
&text&: &Node 2&,
&state&: &closed&
节点1和节点2都是closed状态的,可以直接显示它们的子节点,当展开节点2时,发送值2到远程服务器检索子节点
这个教程,展示如何写服务器端代码根据需求返回tree数据.
Description
一个从远程服务器检索数据的URL.
检索数据的http方法类型.
定义当展开/折叠节点的时候是否显示效果.
定义是否显示checkbox在所有节点之前.
cascadeCheck
定义是否级联选择.
onlyLeafCheck
定义是否仅仅只是在叶子节点显示checkbox.
定义是否显示树线.
定义是否启用drag and drop.
这个节点数据将被加载.
$('#tt').tree({
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
text: 'Item12'
text: 'Item2'
function(param,success,error)
定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数:
param: 这个参数对象将传送给远程服务器.
success(data): 当检索数据成功之后的回调函数.
error(): 当检索数据出现异常的时候调用的回调函数.
json loader
loadFilter
function(data,parent)
返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数:
data:装载的是原始数据.
parent: DOM 对象, 指定父节点.
许多回调函数提供'node'参数, 都包含以下属性:
id: 绑定到节点的标识值.text:显示文本.iconCls: 显示icon的css样式.checked: 节点是否选中.state: 节点状态, 'open' 或者 'closed'.attributes: 绑定到节点的自定义属性.target: 目标 DOM 对象.
Parameters
Description
当用户点击节点的时候触发. 示例代码:
$('#tt').tree({
onClick: function(node){
alert(node.text);
// alert node text property when clicked
onDblClick
当用户双击一个节点的时候触发.
onBeforeLoad
node, param
当一个请求加载数据在前触发, 返回false取消加载动作.
onLoadSuccess
node, data
当数据加载成功之后触发.
onLoadError
当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 .
onBeforeExpand
节点展开之前触发,返回false取消展开动作.
当节点展开之后触发.
onBeforeCollapse
节点折叠之前触发,返回false将取消折叠动作.
onCollapse
当节点折叠之后触发.
node, checked
当用户点击checkbox的时候触发.
onBeforeSelect
节点被选中之前触发,返回false取消选择动作.
当节点选中之后触发.
onContextMenu
当在节点上右键点击的时候触发,代码示例:
// 右键点击节点然后显示上下文菜单
$('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault();
// 选择节点
$('#tt').tree('select', node.target);
// 显示上下文菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
//上下文菜单定义如下:
&div id=&mm& class=&easyui-menu& style=&width:120&&
&div onclick=&append()& data-options=&iconCls:'icon-add'&&Append&/div&
&div onclick=&remove()& data-options=&iconCls:'icon-remove'&&Remove&/div&
target, source, point
当节点被放置的时候触发.
target: DOM 对象,这个节点是被放置的目标.
source: 源节点.
point:指明drop操作,可用值有: 'append','top' or 'bottom'.
onBeforeEdit
在编辑节点之前触发.
onAfterEdit
编辑节点之后触发.
onCancelEdit
取消编辑动作时候触发.
Description
返回tree 的options.
加载tree数据.
得到特定的节点对象.
得到特定节点数据, 包含其子节点.
重新加载tree数据.
得到根节点, 返回节点对象
得到根节点, 返回节点数组.
得到父节点,target参数指明节点DOM对象.
getChildren
得到子节点,target 参数指明节点DOM对象.
getChecked
得到所有选中节点.
getSelected
得到选择节点和返回它,如果没有选择节点将返回null.
解决特定的节点是否是叶子节点, target 参数指明节点DOM对象.
&查找特定的节点和返回节点对象,代码示例:
// 查找一个节点然后返回它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
选择一个节点,target 参数指明节点DOM对象.
设置特定的节点选中.
设置特定的节点取消选中.
折叠一个节点, target 参数指明节点DOM对象.
展开一个节点, target 参数指明节点DOM对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.
collapseAll
折叠所有节点.
展开所有节点.
展开从根节点到指定的节点 .
附加一些子节点到父节点中. param参数有两个属性:
parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点.
data: array, the nodes data. Code example:
// 添加一些节点到选择的节点
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
text: 'node23'
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
text: 'node242'
切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.
插入一个节点到特定节点的之前或之后.'param'参数包含以下属性:
before: DOM 对象,节点插入到之前.
after: DOM 对象, 节点插入到之后.
data: object, 节点数据.
以下代码展示,如何插入新节点到选择节点之前:
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
text: 'node text'
移除一个节点和其子节点,target 参数指明节点DOM对象.
移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据.
更新特定的节点. 'param'参数包含以下属性:
target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等.
// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
启用 drag 和 drop 功能.
disableDnd
禁用 drag 和drop 功能.
开始编辑一个节点.
结束编辑一个节点.
cancelEdit
取消编辑一个节点.
以上如有错误信息,请指出,thanks!
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：731148次
积分：10832
积分：10832
排名：第954名
原创：137篇
转载：149篇
译文：111篇
评论：175条
(7)(2)(2)(1)(2)(8)(3)(2)(2)(8)(3)(5)(8)(6)(10)(4)(7)(1)(7)(4)(8)(14)(13)(9)(1)(1)(3)(9)(5)(5)(97)(35)(9)(26)(26)(28)(5)(1)(4)(6)1450人阅读
前端使用easyUI，放了一个tree，搞死了。
easyUI的tree，后端传过来的数据，是json格式；然后easyUI向后端提交、请求时，会自动将节点的id附在url后面。
主要有两个注意的地方：
1、json中的key及value，不能使用单引号，只能使用双引号；
2、json数据要以数组的形式传送，就是说，最外层要有”[]”
ASP.NET MVC页面使用示例：
id="treeQh" class="easyui-tree" data-options="
url: '@Url.Action("GetData", "Node")'
, animate: true
, onClick: f_node_left.onClick
controller：
[HttpPost]
public ActionResult GetData(string id = "")
string result = !String.IsNullOrEmpty(id)
? GetSubNodes(id)
: GetRootNode();
return Content(result, "application/json");
业务逻辑代码：
public string GetNodeJsonStr(string id)
JObject jO
NodeConfigInfo node = this.nodeConfigInfoRepository.GetById(id);
if (this.nodeConfigInfoRepository.GetMany(m =& m.QH_PARENTID.Equals(node.QH_ID)).Any())
jObj = new JObject
{"id",node.QH_ID}
,{"text",node.QH_NAME}
,{"state","closed"}
jObj = new JObject
{"id",node.QH_ID}
,{"text",node.QH_NAME}
return getJsonStr(jObj);
string getJsonStr(object obj)
string jsonstr = JsonConvert.SerializeObject(obj);
if(!jsonstr.StartsWith("["))
jsonstr = "[" + jsonstr + "]";
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1589081次
积分：24511
积分：24511
排名：第177名
原创：762篇
评论：559条Tree 数据转换
所有节点都包含以下属性:
id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
text: 显示的节点文本
state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载
checked: 指明检查节点是否选中.
attributes: 可以添加到节点的自定义属性
children: 一个节点数组,定义一些子节点
[javascript]&
&&&&"id":1,&&&&
&&&&"text":"Folder1",&&&&
&&&&"iconCls":"icon-save",&&&&
&&&&"children":[{&&&&
&&&&&&&&"text":"File1",&&&&
&&&&&&&&"checked":true&&&&
&&&&},{&&&&
&&&&&&&&"text":"Books",&&&&
&&&&&&&&"state":"open",&&&&
&&&&&&&&"attributes":{&&&&
&&&&&&&&&&&&"url":"/demo/book/abc",&&&&
&&&&&&&&&&&&"price":100&&&&
&&&&&&&&},&&&&
&&&&&&&&"children":[{&&&&
&&&&&&&&&&&&"text":"PhotoShop",&&&&
&&&&&&&&&&&&"checked":true&&&&
&&&&&&&&},{&&&&
&&&&&&&&&&&&"id":&8,&&&&
&&&&&&&&&&&&"text":"Sub&Bookds",&&&&
&&&&&&&&&&&&"state":"closed"&&&&
&&&&&&&&}]&&&&
&&&&}]&&&&
&&&&"text":"Languages",&&&&
&&&&"state":"closed",&&&&
&&&&"children":[{&&&&
&&&&&&&&"text":"Java"&&&&
&&&&},{&&&&
&&&&&&&&"text":"C#"&&&&
&&&&}]&&&&
异步加载树
tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:
&ul&class="easyui-tree"&data-options="url:'get_data.php'"&&/ul&&&&&
tree的加载是通过URL&&'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据看看这个从服务器返回的数据
[javascript]&
&&&&"id":&1,&&&&
&&&&"text":&"Node&1",&&&&
&&&&"state":&"closed",&&&&
&&&&"children":&[{&&&&
&&&&&&&&"id":&11,&&&&
&&&&&&&&"text":&"Node&11"&&&&
&&&&},{&&&&
&&&&&&&&"id":&12,&&&&
&&&&&&&&"text":&"Node&12"&&&&
&&&&}]&&&&
&&&&"id":&2,&&&&
&&&&"text":&"Node&2",&&&&
&&&&"state":&"closed"&&&&
节点1和节点2都是closed状态的,可以直接显示它们的子节点,当展开节点2时,发送值2到远程服务器检索子节点这个教程,展示如何写服务器端代码根据需求返回tree数据.
NameTypeDescriptionDefault
一个从远程服务器检索数据的URL.
检索数据的http方法类型.
定义当展开/折叠节点的时候是否显示效果.
定义是否显示checkbox在所有节点之前.
cascadeCheck
定义是否级联选择.
onlyLeafCheck
定义是否仅仅只是在叶子节点显示checkbox.
定义是否显示树线.
定义是否启用drag and drop.
这个节点数据将被加载.
$('#tt').tree({
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
text: 'Item12'
text: 'Item2'
function(param,success,error)
定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数:param: 这个参数对象将传送给远程服务器.success(data): 当检索数据成功之后的回调函数.error(): 当检索数据出现异常的时候调用的回调函数.
json loader
loadFilter
function(data,parent)
返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数:data:装载的是原始数据.parent: DOM 对象, 指定父节点.
许多回调函数提供'node'参数, 都包含以下属性:
id: 绑定到节点的标识值.
text:显示文本.
iconCls: 显示icon的css样式.
checked: 节点是否选中.
state: 节点状态, 'open' 或者 'closed'.
attributes: 绑定到节点的自定义属性.
target: 目标 DOM 对象.
NameParametersDescription
当用户点击节点的时候触发. 示例代码:
$('#tt').tree({
onClick: function(node){
alert(node.text);
// alert node text property when clicked
onDblClick
当用户双击一个节点的时候触发.
onBeforeLoad
node, param
当一个请求加载数据在前触发, 返回false取消加载动作.
onLoadSuccess
node, data
当数据加载成功之后触发.
onLoadError
当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 .
onBeforeExpand
节点展开之前触发,返回false取消展开动作.
当节点展开之后触发.
onBeforeCollapse
节点折叠之前触发,返回false将取消折叠动作.
onCollapse
当节点折叠之后触发.
node, checked
当用户点击checkbox的时候触发.
onBeforeSelect
节点被选中之前触发,返回false取消选择动作.
当节点选中之后触发.
onContextMenu
当在节点上右键点击的时候触发,代码示例:
// 右键点击节点然后显示上下文菜单
$('#tt').tree({
onContextMenu: function(e, node){
e.preventDefault();
// 选择节点
$('#tt').tree('select', node.target);
// 显示上下文菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
//上下文菜单定义如下:
&div id="mm" class="easyui-menu" style="width:120"&
&div onclick="append()" data-options="iconCls:'icon-add'"&Append&/div&
&div onclick="remove()" data-options="iconCls:'icon-remove'"&Remove&/div&
target, source, point
当节点被放置的时候触发.target: DOM 对象,这个节点是被放置的目标.source: 源节点.point:指明drop操作,可用值有: 'append','top' or 'bottom'.
onBeforeEdit
在编辑节点之前触发.
onAfterEdit
编辑节点之后触发.
onCancelEdit
取消编辑动作时候触发.
NameParameterDescription
返回tree 的options.
加载tree数据.
得到特定的节点对象.
得到特定节点数据, 包含其子节点.
重新加载tree数据.
得到根节点, 返回节点对象
得到根节点, 返回节点数组.
得到父节点,target参数指明节点DOM对象.
getChildren
得到子节点,target 参数指明节点DOM对象.
getChecked
得到所有选中节点.
getSelected
得到选择节点和返回它,如果没有选择节点将返回null.
解决特定的节点是否是叶子节点,&target 参数指明节点DOM对象.
&查找特定的节点和返回节点对象,代码示例:
// 查找一个节点然后返回它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
选择一个节点,target 参数指明节点DOM对象.
设置特定的节点选中.
设置特定的节点取消选中.
折叠一个节点,&target 参数指明节点DOM对象.
展开一个节点,&target 参数指明节点DOM对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.
collapseAll
折叠所有节点.
展开所有节点.
展开从根节点到指定的节点 .
附加一些子节点到父节点中. param参数有两个属性:parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点.data: array, the nodes data. Code example:
// 添加一些节点到选择的节点
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
text: 'node23'
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
text: 'node242'
切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.
插入一个节点到特定节点的之前或之后.'param'参数包含以下属性:before: DOM 对象,节点插入到之前.after: DOM 对象, 节点插入到之后.data: object, 节点数据.
以下代码展示,如何插入新节点到选择节点之前:
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
text: 'node text'
移除一个节点和其子节点,target 参数指明节点DOM对象.
移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据.
更新特定的节点. 'param'参数包含以下属性:target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等.
// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
启用 drag 和 drop 功能.
disableDnd
禁用 drag 和drop 功能.
开始编辑一个节点.
结束编辑一个节点.
cancelEdit
取消编辑一个节点.
阅读(...) 评论()yonghu86 的BLOG
用户名：yonghu86
文章数：208
评论数：22
访问量：42411
注册日期：
阅读量：5863
阅读量：12276
阅读量：318182
阅读量：1030253
51CTO推荐博文
使用Jquery+EasyUI 进行框架项目开发案例讲解之四组织机构管理源码分享
在上三篇文章　我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法，每一个模块都有其共用性，细细理解与掌握，我相信使用EasyUI进行开发还是相当方便的。　　接下来我分享“组织机构管理”模块主要的核心代码组织机构管理使用的EasyUI控件，主要是EasyUI的TreeGrid控件，组织机构管理主界面如下图所示：650) this.width=650;" src="/blog/311/d74fa9e38b4677bbbb802a10a2031e.png" alt="d74fa9e38b4677bbbb802a10a2031" />　在进行代码讲解之前，我们先来回顾一个TreeGrid相关的知识。easyUI TreeGrid 从$.fn.datagrid.defaults继承，覆盖默认值$.fn.treegrid.defaults。treegrid 是使用显示分层数据在grid中,treegrid 是基于datagrid和关联treeview 和关联可编辑的grid,treegrid 允许你创建定制的,异步加载展开行数据,和显示分层的数据在多列中。如下图所示：650) this.width=650;" src="/blog/311/e09e8d9ef4689a9bdddb328991abf.png" alt="e09e8d9ef4689a9bdddb328991ab" />使用示例　　通过html标记创建treegrid ,大多数情况下treegrid 遵循相同的结构格式化为datagrid&table id="tt" class="easyui-treegrid" style="width:600height:400px"
data-options="url:'get_data.aspx',idField:'id',treeField:'name'"&
&th data-options="field:'name',width:180"&Task Name&/th&
&th data-options="field:'persons',width:60,align:'right'"&Persons&/th&
&th data-options="field:'begin',width:80"&Begin Date&/th&
&th data-options="field:'end',width:80"&End Date&/th&
&/table&　使用javascript创建treegrid&table id="tt" style="width:600height:400px"&&/table&
$('#tt').treegrid({
url:'get_data.aspx',
idField:'id',
treeField:'name',
columns:[[
{title:'Task Name',field:'name',width:180},
{field:'persons',title:'Persons',width:60,align:'right'},
{field:'begin',title:'Begin Date',width:80},
{field:'end',title:'End Date',width:80}
});　　属性　　属性从 datagrid继承,以下是treegrid新增的属性.NameTypeDescriptionDefaultidFieldstring定义键字段标识一个tree节点,该项是必须的.nulltreeFieldstring定义tree节点字段,该项是必须的.nullanimateboolean定义当节点展开/关闭的时候,是否显示动画效果.falseloaderfunction(param,success,error)定义如何从远程服务器端加载数据. 返回false将终止这个动作. 这个函数提供一下参数 :param: 传递给远程服务器的参数对象.success(data):
当检索数据成功之后执行的回调函数.error(): 当检索数据失败的时候调用的回调函数.json
loaderloadFilterfunction(data,parentId)返回过滤后的显示数据.事件　　事件从datagrid继承,
以下是datagrid新增事件.NameParametersDescriptiononClickRowrow当用户点击一个节点时触发.onDblClickRowrow当用户双击一个节点时触发.onClickCellfield,row当用户点击一个表格的时触发.onDblClickCellfield,row当用户双击一个表格的时触发.onBeforeLoadrow,
param一个请求去加载数据之前触发,
返回false将取消加载动作.onLoadSuccessrow,
data数据加载成功之后触发.onLoadErrorarguments数据加载失败之后触发,arguments 参数和jQuery.ajax的error函数一样.onBeforeExpandrow节点展开之前触发,返回false将取消展开动作.onExpandrow节点展开后触发.onBeforeCollapserow节点折叠之前触发,返回false取消折叠动作.onCollapserow节点折叠后触发.onContextMenue,
row在节点上右键点击触发.onBeforeEditrow用户开始编辑一个节点时触发.onAfterEditrow,changes用户结束编辑节点时触发.onCancelEditrow用户取消编辑节点时触发.方法　　许多方法提供一个参数,参数名为id, 这个参数指明tree节点值.NameParameterDescriptionoptionsnone返回treegrid的 options对象.resizeoptions设置treegrid 大小,options包含两个属性:width: treegrid新的宽度.height: treegrid新的高度.fixRowHeightid固定特定行高度.loadDatadata加载
treegrid 数据.reloadid重新加载treegrid
数据.如果传递了id参数, 重新加载特定的tree行, 其他的重新加载所有tree行. 示例代码:$('#tt').treegrid('reload', 2); // 重新加载指定id值是2的行
$('#tt').treegrid('reload'); // 重新加载所有行
reloadFooterfooter重新加载页脚数据.getDatanone得到加载数据.getFooterRowsnone得到页脚数据.getRootnone得到根节点, 返回的是节点对象getRootsnone得到根节点, 返回的是节点数组.getParentid得到父节点.getChildrenid得到子节点.getSelectednone得到选中节点并返回它, 如果没有选中节点返回null.getSelectionsnone得到所有的选中节点.getLevelid得到特定的节点的层级.findid查找特定的节点和返回节点数据.selectid选中一个节点.unselectid取消选中一个节点.selectAllnone选中所有节点.unselectAllnone取消选中所有节点.collapseid折叠一个节点.expandid展开一个节点.collapseAllid折叠所有节点.expandAllid展开所有节点.expandToid展开从根节点到指定的节点.toggleid切换节点的 expanded(展开)/collapsed (关闭)状态.appendparam附加一个节点到父节点. 'param' 参数包含以下属性:parent:父节点id , 如果没有分配,
附加作为根节点.data: 数组, 节点数据.示例代码: // 添加一些节点到选中节点
var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
parent: node.id,
// 节点有一个'id'值,定义是通过'idField'属性
id: '073',
name: 'name73'
removeid移除一个节点和其子节点.refreshid刷新特定的节点.beginEditid开始编辑一个节点.endEditid结束编辑一个节点.cancelEditid取消编辑一个节点.getEditorsid得到特定行编辑器.每一个编辑器都有以下属性:actions:编辑器可以做的动作.target:
目标编辑器jQuery对象.field:字段名.type:编辑器类型.getEditoroptions得到特定的编辑器,
options 包含两个属性:id:行节点id.field:
字段名.以上知识对于充分理解并应用TreeGrid非常的重要，对于不明白的童鞋可以看下！下面分享如何使用EasyUI的TreeGrid控件进行我们的组织机构管理的开发，当然还涉及到其他的知识点，在前面的文章已有介绍，不明白的可以看下前面的文章，这儿重在说明一些方法，当然大家也可交流讨论，提出你们在开发过程中使用的常用方式方法。　　一、“组织机构管理”主界面UI的ASPX代码如下：　　&%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="OrganizeAdmin.aspx.cs" Inherits="RDIFramework.WebApp.Modules.OrganizeAdmin" %&
&asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&
&/asp:Content&
&asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&
&div id="toolbar"&
&%=base.BuildToolBarButtons()%&
&table id="organizeGrid"&&/table&
&script type="text/javascript" src="../Scripts/Business/OrganizeAdmin.js?v=5"&&/script&
&/asp:Content&　可以看到，代码非常的简洁，使用EasyUI开发的好处就在于此，不需要你拖动服务端的控件等这种常规的Asp.NET开发方式，对于这种开发方式的好处不言而喻。　　绑定当前登录用户所拥有的功能按钮列表代码如下：　/// &summary&
/// 获得页面的权限
/// &/summary&
private void GetPermission()
this.permissionAdd = this.IsAuthorized("OrganizeManagement.Add");
this.permissionEdit = this.IsAuthorized("OrganizeManagement.Edit");
this.permissionMove = this.IsAuthorized("OrganizeManagement.Move");
this.permissionDelete = this.IsAuthorized("OrganizeManagement.Delete");
this.permissionExport = this.IsAuthorized("OrganizeManagement.Export");
//this.permissionAccredit = this.IsAuthorized("UserManagement.Accredit");
this.permissionUserOrganizePermission = this.IsAuthorized("OrganizeManagement.UserOrganizePermission");
this.permissionRolerOrganizePermission = this.IsAuthorized("OrganizeManagement.RolerOrganizePermission");
/// &summary&
/// 加载工具栏
/// &/summary&
/// &returns&工具栏HTML&/returns&
public override string BuildToolBarButtons()
StringBuilder sb = new StringBuilder();
string linkbtn_template = "&a id=\"btn{0}\" class=\"easyui-linkbutton\" style=\"float:left\"
plain=\"true\" href=\"javascript:;\" icon=\"{1}\"
{2} title=\"{3}\"&{4}&/a&";
sb.Append("&a id=\"a_refresh\" class=\"easyui-linkbutton\" style=\"float:left\"
plain=\"true\" href=\"javascript:;\" icon=\"icon-reload\"
title=\"重新加载\"&刷新&/a& ");
sb.Append("&div class='datagrid-btn-separator'&&/div& ");
sb.Append(string.Format(linkbtn_template, "Add", "icon-add", permissionAdd ? "" : "disabled=\"True\"", "新增组织机构", "新增"));
sb.Append(string.Format(linkbtn_template, "Edit", "icon-edit", permissionEdit ? "" : "disabled=\"True\"", "修改选中的组织机构", "修改"));
sb.Append(string.Format(linkbtn_template, "Delete", "icon-delete0", permissionDelete ? "" : "disabled=\"True\"", "删除选中组织机构", "删除"));
sb.Append("&div class='datagrid-btn-separator'&&/div& ");
sb.Append(string.Format(linkbtn_template, "MoveTo", "icon-shape_move_forwards", permissionMove ? "" : "disabled=\"True\"", "移动选中的组织机构", "移动"));
sb.Append(string.Format(linkbtn_template, "Export", "icon-export", permissionExport ? "" : "disabled=\"True\"", "导出组织机构数据", "导出"));
sb.Append("&div class='datagrid-btn-separator'&&/div& ");
sb.Append(string.Format(linkbtn_template, "UserOrganizePermission", "icon-layout_key", permissionUserOrganizePermission ? "" : "disabled=\"True\"", "设置用户组织机构权限", "用户组织机构权限"));
sb.Append(string.Format(linkbtn_template, "RoleOrganizePermission", "icon-ruby_key", permissionRolerOrganizePermission ? "" : "disabled=\"True\"", "设置角色组织机构权限", "角色组织机构权限"));
return sb.ToString();
}添加组织机构界面窗口如下：650) this.width=650;" src="/blog/309/d3a703f929f4c98acba4.png" alt="d3a703f929f4c98acba" />在添加组织机构界面，主负责人，副主管数据域的绑定控件使用的是“ComboGrid"控件，绑定的代码如下：bindComboGrid: function () {
top.$('#txt_Manager,#txt_AssistantManager').combogrid({
panelWidth: 320,
idField: 'Id',
textField: 'RealName',
url: 'Modules/handler/UserAdminHandler.ashx?action=GetUserListByPage',
sortName: 'SortCode',
sortOrder: 'asc',
fitColumns: true,
showPageList: false,
striped: true,
pagination: true,
rownumbers: true,
fitColumns: true,
pageSize: 10,
pageList: [10, 20, 30, 50],
method: 'post',
columns: [[
{ title: '登录名', field: 'UserName', width: 60, sortable: true },
{ title: '用户名', field: 'RealName', width: 70 }
});修改组织机构界面如下：650) this.width=650;" src="/blog/309/-ed0c9e5dfcf3.png" alt="-ed0c9e5dfcf" />”修改组织机构“代码如下：EditOrganize: function () { //修改组织机构
if ($(this).linkbutton('options').disabled == true) {
//功能代码逻辑...
var row = mygrid.selected();
if (row) {
var editDailog = top.$.hDialog({
href: formUrl, title: '修改组织机构', iconCls: 'icon-edit', width: 750, height: 520,
onLoad: function () {
pubMethod.bindCtrl(row.Id);
pubMethod.bindCategory();
pubMethod.bindComboGrid();
top.$('#txt_Code').val(row.Code);
top.$('#txt_FullName').val(row.FullName);
top.$('#txt_ShortName').val(row.ShortName);
top.$('#txt_ParentId').combotree('setValue', row.ParentId);
top.$('#txt_Category').combobox('setValue', row.Category);
top.$('#txt_Manager').combogrid('setValue', row.Manager);
top.$('#txt_AssistantManager').combogrid('setValue', row.AssistantManager);
top.$('#txt_OuterPhone').val(row.OuterPhone);
top.$('#txt_InnerPhone').val(row.InnerPhone);
top.$('#txt_Fax').val(row.Fax);
top.$('#txt_Postalcode').val(row.Postalcode);
top.$('#txt_Web').val(row.Web);
top.$('#txt_Address').val(row.Address);
top.$('#chk_Enabled').attr('checked', row.Enabled == "1");
top.$('#chk_IsInnerOrganize').attr('checked', row.IsInnerOrganize == "1");
top.$('#txt_Description').val(row.Description);
submit: function () {
if (top.$('#uiform').validate().form()) {
//保存时判断当前节点所选的父节点，不能为当前节点的子节点，这样就乱套了....
var treeParentId = top.$('#txt_ParentId').combotree('tree'); // 得到树对象
var node = treeParentId.tree('getSelected');
if (node) {
var nodeParentId = treeParentId.tree('find', row.Id);
var children = treeParentId.tree('getChildren', nodeParentId.target);
var nodeIds = '';
var isFind = 'false';
for (var index = 0; index & children. index++) {
if (children[index].id == node.id) {
isFind = 'true';
if (isFind == 'true') {
top.$.messager.alert('温馨提示', '请选择父节点元素！', 'warning');
var vparentid = top.$('#txt_ParentId').combobox('getValue');
var vcategory = top.$('#txt_Category').combobox('getValue');
var vmanager = top.$('#txt_Manager').combogrid('getText');
var vassistantmanager = top.$('#txt_AssistantManager').combogrid('getText');
var query = 'action=EditOrganize&vparentid=' + vparentid + '&vcategory=' + vcategory + '&KeyId=' + row.Id + '&vmanager=' + vmanager + '&vassistantmanager=' + vassistantmanager + '&'
+ top.$('#uiform').serialize();
$.ajaxjson(actionUrl, query, function (d) {
if (d.Success) {
msg.ok(d.Message);
editDailog.dialog('close');
mygrid.reload();
MessageOrRedirect(d);
msg.warning('请选择要修改的组织机构!');
}　删除组织机构代码如下：　DeleteOrganize: function () { //删除组织机构
if ($(this).linkbutton('options').disabled == true) {
//功能代码逻辑...
var row = mygrid.selected();
if (row != null) {
var childs = $('#organizeGrid').treegrid('getChildren', row.Id);
if (childs.length & 0) {
$.messager.alert('警告提示', '当前所选有子节点数据，不能删除。', 'warning');
var query = 'action=DeleteOrganize&KeyId=' + row.Id;
$.messager.confirm('询问提示', '确认要删除选中的组织机构吗？', function (data) {
if (data) {
$.ajaxjson(actionUrl, query, function (d) {
if (d.Success) {
msg.ok(d.Message);
mygrid.reload();
MessageOrRedirect(d);
msg.warning('请选择要删除的组织机构!');
}“用户-组织机构权限设置”功能主要用于设置特定用户可以访问的组织机构。有时我们会有这样的应用，某些数据属于某个组织机构内部的数据，只能指定其他组织机构特定的用户访问，那么通过此设置，我们就可以轻松的控制特定的用户访问指定的组织机构，“用户-组织机构权限设置”如下图所示。650) this.width=650;" src="/blog/309/b10d1afcba2c.png" alt="b10d1afcba2" />　在上图中，我们可以看到对用户“陈俊熙”设置了他可以访问的组织机构，我们现在以他的用户“wikstone”登录系统，可以看到当前用户只能看到对应的组织机构了，如下图所示：650) this.width=650;" src="/blog/311/dbfd6b91e0.png" alt="dbfd6b91e" />　　用户-组织机构权限设置代码如下：SetUserOrganizePermission: function () { //设置用户组织机构权限
if ($(this).linkbutton('options').disabled == true) {
//功能代码逻辑...
var curResourceTargetResourceIds = [];
var setDialog = top.$.hDialog({
title: '（用户-组织机构）权限设置',
width: 670, height: 600, iconCls: 'icon-layout_key', //cache: false,
href: "Modules/html/PermissionBacthSetForm.htm?n=" + Math.random(),
onLoad: function () {
using('panel', function () {
top.$('#panelTarget').panel({ title: '组织机构列表', iconCls: 'icon-org', height: $(window).height() - 3 });
userGrid = top.$('#leftnav').datagrid({
title: '用户列表',
url: 'Modules/handler/UserAdminHandler.ashx',
nowrap: false, //折行
//fit: true,
rownumbers: true, //行号
striped: true, //隔行变色
idField: 'Id', //主键
singleSelect: true, //单选
frozenColumns: [[]],
columns: [[
{ title: '登录名', field: 'UserName', width: 120, align: 'left' },
{ title: '用户名', field: 'RealName', width: 150, align: 'left' }
onLoadSuccess: function (data) {
top.$('#rightnav').tree({
cascadeCheck: false, //联动选中节点
checkbox: true,
lines: true,
url: 'Modules/handler/OrganizeAdminHander.ashx?action=treedata',
onSelect: function (node) {
top.$('#rightnav').tree('getChildren', node.target);
top.$('#leftnav').datagrid('selectRow', 0);
onSelect: function (rowIndex, rowData) {
curResourceTargetResourceIds = [];
var query = 'action=GetPermissionScopeTargetIds'
+ '&resourceCategory=PiUser&resourceId=' + rowData.Id
+ '&targetCategory=PiOrganize';
$.ajaxtext('handler/PermissionHandler.ashx', query, function (data) {
var targetResourceTree = top.$('#rightnav');
targetResourceTree.tree('uncheckedAll');
if (data == '' || data.toString() == '[object XMLDocument]') {
curResourceTargetResourceIds = data.split(',');
for (var i = 0; i & curResourceTargetResourceIds. i++) {
var node = targetResourceTree.tree('find', curResourceTargetResourceIds[i]);
targetResourceTree.tree("check", node.target);
submit: function () {
var allSelectTargetResourceIds = permissionMgr.getSelectedResource().split(',');
var grantResourceIds = '';
var revokeResourceIds = '';
var flagRevoke = 0;
var flagGrant = 0;
while (flagRevoke & curResourceTargetResourceIds.length) {
if ($.inArray(curResourceTargetResourceIds[flagRevoke], allSelectTargetResourceIds) == -1) {
revokeResourceIds += curResourceTargetResourceIds[flagRevoke] + ','; //得到收回的权限列表
while (flagGrant & allSelectTargetResourceIds.length) {
if ($.inArray(allSelectTargetResourceIds[flagGrant], curResourceTargetResourceIds) == -1) {
grantResourceIds += allSelectTargetResourceIds[flagGrant] + ','; //得到授予的权限列表
var query = 'action=GrantRevokePermissionScopeTargets&resourceId=' + top.$('#leftnav').datagrid('getSelected').Id
+ '&resourceCategory=PiUser&targetCategory=PiOrganize'
+ '&grantTargetIds=' + grantResourceIds + "&revokeTargetIds=" + revokeResourceI
$.ajaxjson('handler/PermissionHandler.ashx', query, function (d) {
if (d.Data & 0) {
msg.ok('设置成功！');
alert(d.Message);
}“角色-组织机构权限设置”功能与“用户-组织机构权限设置”功能类似，这儿只是做的对角色的控制。（角色-组织机构）权限设置界面如下：。650) this.width=650;" src="/blog/309/74bb6f72ec.png" alt="74bb6f72ec" />相关资源分享 作者： EricHu出处： /huyong微博： 腾讯Email: QQ 交流： QQ 群：(已满) 平台博客： 【CSDN】http://blog.csdn.net/chinahuyong
【CNBLOGS】/huyong关于作者：高级工程师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案，多年项目开发与管理经验，曾多次组织并开发多个大型项目，精通DotNet，DB（SqlServer、Oracle等）技术。熟悉Java、Delhpi及Linux操作系统，有扎实的网络知识。在面向对象、面向服务以及数据库领域有一定的造诣。如有问题或建议，请多多赐教！本文版权归作者和CNBLOGS博客共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过邮箱或QQ 联系我，非常感谢。650) this.width=650;" src="/blog/307/c0f01d60c364ea1b76d3.jpg" alt="c0f01d60c364ea1b76d" />本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)
本文收录至博客专题：《》