您的位置：首页 > 产品设计 > UI/UE

EasyUI之树形结构tree

2017-12-05 11:22 363 查看

原文地址：http://blog.csdn.net/ya_1249463314/article/details/70305730

1.样式



树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

2.静态方式生成树

[html]
view plain
copy
print?

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>tree</title>  
<meta http-equiv="content-type" content="text/html;charset=UTF-8">  
<!-- 引入css文件 -->  
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>  
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>  
  
<!-- 引入js文件 -->  
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>  
</head>  
<body>  
    <ul id="tt" class="easyui-tree">     
       <li>  
            <span>第一章</span>  
            <ul>  
                <li>  
                    <span>第一节</span>  
                    <ul>  
                        <li>  
                            <span>第一条</span>  
                        </li>  
                        <li>  
                            <span>第二条</span>  
                        </li>  
                    </ul>  
                </li>  
                <li>  
                    <span>第二节</span>  
                </li>  
            </ul>  
       </li>  
       <li>  
            <span>第二章</span>  
       </li>  
    </ul>    
</body>  
</html>  

结果：



3.动态方式生成树

[html]
view plain
copy
print?

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>tree02</title>  
<meta http-equiv="content-type" content="text/html;charset=UTF-8">  
<!-- 引入css文件 -->  
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>  
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>  
  
<!-- 引入js文件 -->  
<script type="text/javascript" src="js/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>  
  
</head>  
<body>  
    <ul id="treeId">     
        
    </ul>    
</body>  
<script type="text/javascript">  
    $("#treeId").tree({  
        url:'/easyUI/json/province.json'  
          
    });  
</script>  
</html>  

json文件：province.json

[html]
view plain
copy
print?

[{      
    "id":1,      
    "text":"杭州",   
    "children":[  
        {      
            "text":"下城区",      
            "checked":true     
        },  
        {      
            "text":"西湖区",      
            "state":"open",        
            "children":[  
                {      
                    "text":"超市",      
                    "checked":true     
                },  
                {      
                    "id": 8,      
                    "text":"银行"   
                }  
            ]      
        }  
    ]        
},{  
    "id": 2,     
    "text":"北京"      
}]    

结果：



4.文档

属性

属性名属性值类型描述默认值
urlstring检索远程数据的URL地址。null
methodstring检索数据的HTTP方法。（POST / GET）post
animateboolean定义节点在展开或折叠的时候是否显示动画效果。false
checkboxboolean定义是否在每一个借点之前都显示复选框。false
cascadeCheckboolean定义是否层叠选中状态。true
onlyLeafCheckboolean定义是否只在末级节点之前显示复选框。false
linesboolean定义是否显示树控件上的虚线。false
dndboolean定义是否启用拖拽功能。false
dataarray节点数据加载。
$('#tt').tree({
data: [{
text: 'Item1',
state: 'closed',
children: [{
text: 'Item11'
},{
text: 'Item12'
}]
},{
text: 'Item2'
}]
});

null
formatterfunction(node)定义如何渲染节点的文本。

代码示例：

$('#tt').tree({
formatter:function(node){
return node.text;
}
});

false
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：

param：发送到远程服务器的参数对象。

success(data)：当检索数据成功的时候调用的回调函数。

error()：当检索数据失败的时候调用的回调函数。		json loader
loadFilterfunction(data,parent)返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：

data：加载的原始数据。

parent: DOM对象，代表父节点。		 

 

事件

很多事件的回调函数都包含'node'参数，其具备如下属性：

[align=left]id：绑定节点的标识值。[/align]

[align=left]text：显示的节点文本。[/align]

[align=left]iconCls：显示的节点图标CSS类ID。[/align]

[align=left]checked：该节点是否被选中。[/align]

[align=left]state：节点状态，'open' 或 'closed'。[/align]

[align=left]attributes：绑定该节点的自定义属性。[/align]

[align=left]target：目标DOM对象。[/align]

事件名事件参数描述
onClicknode在用户点击一个节点的时候触发。

代码示例： 

$('#tt').tree({
onClick: function(node){
alert(node.text);  // 在用户点击的时候提示
}
});

onDblClicknode在用户双击一个节点的时候触发。
onBeforeLoadnode, param在请求加载远程数据之前触发，返回false可以取消加载操作。
onLoadSuccessnode, data在数据加载成功以后触发。
onLoadErrorarguments在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。
onBeforeExpandnode在节点展开之前触发，返回false可以取消展开操作。
onExpandnode在节点展开的时候触发。
onBeforeCollapsenode在节点折叠之前触发，返回false可以取消折叠操作。
onCollapsenode在节点折叠的时候触发。
onBeforeChecknode, checked在用户点击勾选复选框之前触发，返回false可以取消选择动作。（该事件自1.3.1版开始可用）
onChecknode, checked在用户点击勾选复选框的时候触发。
onBeforeSelectnode在用户选择一个节点之前触发，返回false可以取消选择动作。
onSelectnode在用户选择节点的时候触发。
onContextMenue, node在右键点击节点的时候触发。

代码示例： 

// 右键点击节点并显示快捷菜单
$('#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:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>

onBeforeDragnode在开始拖动节点之前触发，返回false可以拒绝拖动。（该事件自1.3.2版开始可用）
onStartDragnode在开始拖动节点的时候触发。（该事件自1.3.2版开始可用）
onStopDragnode在停止拖动节点的时候触发。（该事件自1.3.2版开始可用）
onDragEntertarget, source在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。

target：释放的目标节点元素。

source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragOvertarget, source在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。

target：释放的目标节点元素。

source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onDragLeavetarget, source在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。

target：释放的目标节点元素。

source：开始拖动的源节点。
（该事件自1.3.2版开始可用）
onBeforeDroptarget, source, point在拖动一个节点之前触发，返回false可以拒绝拖动。

target：释放的目标节点元素。

source：开始拖动的源节点。

point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
（该事件自1.3.3版开始可用）		 
onDroptarget, source, point当节点位置被拖动时触发。

target：DOM对象，需要被拖动动的目标节点。

source：源节点。

point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
onBeforeEditnode在编辑节点之前触发。
onAfterEditnode在编辑节点之后触发。
onCancelEditnode在取消编辑操作的时候触发。

 

方法

方法名方法参数描述
optionsnone返回树控件属性。
loadDatadata读取树控件数据。
getNodetarget获取指定节点对象。
getDatatarget获取指定节点数据，包含它的子节点。
reloadtarget重新载入树控件数据。
getRootnone获取根节点，返回节点对象。
getRootsnone获取所有根节点，返回节点数组。
getParenttarget获取父节点，'target'参数代表节点的DOM对象。
getChildrentarget获取所有子节点，'target'参数代表节点的DOM对象。
getCheckedstate获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。
代码示例：

var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// 获取不确定的节点

译者注：（1.3.4新增获取方式）

var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);

getSelectednone获取选择节点并返回它，如果未选择则返回null。
isLeaftarget判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。
findid查找指定节点并返回节点对象。

代码示例： 

// 查找一个节点并选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

selecttarget选择一个节点，'target'参数表示节点的DOM对象。
checktarget选中指定节点。
unchecktarget取消选中指定节点。
collapsetarget折叠一个节点，'target'参数表示节点的DOM对象。
expandtarget展开一个节点，'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为'id'的参数)将会发送给服务器

请求子节点的数据。
collapseAlltarget折叠所有节点。
expandAlltarget展开所有节点。
expandTotarget打开从根节点到指定节点之间的所有节点。
scrollTotarget滚动到指定节点。（该方法自1.3.4版开始可用）
appendparam追加若干子节点到一个父节点，param参数有2个属性：

parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。

data：数组，节点数据。

代码示例：

// 追加若干个节点并选中他们
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
data: [{
id: 23,
text: 'node23'
},{
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
},{
text: 'node242'
}]
}]
});

toggletarget打开或关闭节点的触发器，target参数是一个节点DOM对象。
insertparam在一个指定节点之前或之后插入节点，'param'参数包含如下属性：

before：DOM对象，在某个节点之前插入。

after：DOM对象，在某个节点之后插入。

data：对象，节点数据。
下面的代码展示了如何将一个新节点插入到选择的节点之前：

var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: {
id: 21,
text: 'node text'
}
});
}

译者注：（1.3.4新增获取方式）
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: [{
    id: 23,
    text: 'node23'
                },{
    	    text: 'node24',
                    state: 'closed',
    children: [{
text: 'node241'
    },{
text: 'node242'
    }]
                }]
});
}

removetarget移除一个节点和它的子节点，'target'参数是该节点的DOM对象。
poptarget移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。
updateparam更新指定节点。'param'参数包含以下属性：

target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。
代码示例：

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
});
}

enableDndnone启用拖拽功能。
disableDndnone禁用拖拽功能。
beginEdittarget开始编辑一个节点。
endEdittarget结束编辑一个节点。
cancelEdittarget取消编辑一个节点。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航