jquery easyui tree学习
/**约定的服务器返回的数据格式：{"description":"test","link":"link","nodeId":1,"nodeName":"节点0","parentNodeId":0}
* nodeId:唯一标示节点 nodeId=1代表根节点，根节点的parentNodeId为0
* parentNodeId：父节点nodeId
*/
var data = "[{\"description\":\"test\",\"link\":\"link\",\"nodeId\":1,\"nodeName\":\"节点0\",\"parentNodeId\":0},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":2,\"nodeName\":\"节点1\",\"parentNodeId\":1},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":3,\"nodeName\":\"节点2\",\"parentNodeId\":1},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":4,\"nodeName\":\"节点3\",\"parentNodeId\":2},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":5,\"nodeName\":\"节点4\",\"parentNodeId\":3},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":6,\"nodeName\":\"节点5\",\"parentNodeId\":3}]";注意：
很多事件的回调方法都有一个node的参数，这个参数包含了下面的属性：
id,text,iconCls,checked,state,attributes,target
Events
Many events callback function can take the 'node' parameter, which contains following properties:
很多事件的回调方法都有一个node的参数，这个参数包含了下面的属性：
- id: An identity value bind to the node.
- text: Text to be showed.
- iconCls: The css class to display icon.
- checked: Whether the node is checked.
- state: The node state, 'open' or 'closed'.
- attributes: Custom attributes bind to the node.
- target: Target DOM object.
处理服务器返回的数据：
/**约定的服务器返回的数据格式：{"description":"test","link":"link","nodeId":1,"nodeName":"节点0","parentNodeId":0}
* nodeId:唯一标示节点 nodeId=1代表根节点，根节点的parentNodeId为0
* parentNodeId：父节点nodeId
*/
//data为服务器返回的数据（json格式）
var data = "[{\"description\":\"test\",\"link\":\"link\",\"nodeId\":1,\"nodeName\":\"节点0\",\"parentNodeId\":0},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":2,\"nodeName\":\"节点1\",\"parentNodeId\":1},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":3,\"nodeName\":\"节点2\",\"parentNodeId\":1},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":4,\"nodeName\":\"节点3\",\"parentNodeId\":2},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":5,\"nodeName\":\"节点4\",\"parentNodeId\":3},"
+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":6,\"nodeName\":\"节点5\",\"parentNodeId\":3}]";
var json = JSON.parse(data);//将字符串解析为json对象
var tree = {};//定义存放结果的tree对象
//将数据添加children属性，并依据nodeId存放到tree对象中
$.each(json,function(i,obj){
this.children = [];//添加children属性
tree[this.nodeId] = this;//nodeId为key，当前对象为value存放到tree对象中
});
$.each(json,function(i,obj){
if(this.parentNodeId != 0){
tree[this.parentNodeId].children.push(this); //除了根节点之外，其余节点都追加到父节点的chileren数组中
}
});
var temp = [];
temp.push(tree[1]);//获取根节点，其余节点不需要
tree = temp;
/**
* 将给定的节点及其子节点(children)转为easyui要求的结构
* @param {Object} tree1
* @return {TypeName}
*/
function toTree(tree1){
var arr = [];
var length = tree1.length;
if(length<=0){
return arr;
}
var obj = null;
for(var i=0;i<length;i++){
obj = {};
obj.id = tree1[i].nodeId;
obj.text = tree1[i].nodeName;
obj.attributes = {
"description":tree1[i].description,
"link":tree1[i].link,
"nodeName":tree1[i].nodeName,
"parentNodeId":tree1[i].parentNodeId
};
obj.children = toTree(tree1[i].children);//递归children节点
arr.push(obj);
}
return arr;
}
tree = toTree(tree);
console.info(JSON.stringify(tree));//得到的就是最终的easyui要求的格式经过上面的处理得到的json数据为：
[{"id":1,"text":"节点0","attribute":{"description":"test","link":"link","nodeName":"节点0","parentNodeId":0},"children":[{"id":2,"text":"节点1","attribute":{"description":"test","link":"link","nodeName":"节点1","parentNodeId":1},"children":[{"id":4,"text":"节点3","attribute":{"description":"test","link":"link","nodeName":"节点3","parentNodeId":2},"children":[]}]},{"id":3,"text":"节点2","attribute":{"description":"test","link":"link","nodeName":"节点2","parentNodeId":1},"children":[{"id":5,"text":"节点4","attribute":{"description":"test","link":"link","nodeName":"节点4","parentNodeId":3},"children":[]},{"id":6,"text":"节点5","attribute":{"description":"test","link":"link","nodeName":"节点5","parentNodeId":3},"children":[]}]}]}]然后在页面显示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/icon.css">
<script type="text/javascript" src="jquery_easyui/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery_easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt2').tree({
data:data //data就是上面的 json 数据
});
});
/** 添加些额外的处理
$(function(){
$('#tt2').tree({
data:tree,
checkbox:false,
onlyLeafCheck:false,
dnd:false,
onClick:function(node){//点击事件
$("#tt2").tree("toggle",node.target);//当前被点击的节点自动关闭/展开
console.info(node.attributes.link);//获取自定义的属性
}
});
});
*/
</script>
</head>
<body>
jquery easyui test demo: <br><br>
<ul id="tt2"></ul>
</body>
</html>就可以看到树状结构了。
参考资料：
树形菜单
使用$.fn.tree.defaults重载默认值。
依赖关系
- 一般拖动
- 拖动至容器
使用方法
树形菜单可以用<ul>标签定义，它可以定义叶子节点和子节点，代码示例如下：
- <ul id="tt">
- <li>
- <span>Folder</span>
- <ul>
- <li>
- <span>Sub Folder 1</span>
- <ul>
- <li>
- <span><a href="#">File 11</a></span>
- </li>
- <li>
- <span>File 12</span>
- </li>
- <li>
- <span>File 13</span>
- </li>
- </ul>
- </li>
- <li>
- <span>File 2</span>
- </li>
- <li>
- <span>File 3</span>
- </li>
- </ul>
- </li>
- <li>
- <span>File21</span>
- </li>
- </ul>
也可以用不带<li>的<ul>标签来定义：
- <ul id="tt"></ul>
- $('#tt').tree({
- url:'tree_data.json'
- });
树形菜单的数据格式
每个节点都拥有以下属性：
- id：节点id，对载入远程数据很重要。
- text：显示在节点的文本。
- state：节点状态，'open' or 'closed'，默认为'open'。当设置为'closed'时，拥有子节点的节点将会从远程站点载入它们。
- checked：表明节点是否被选择。
- attributes：可以为节点添加的自定义属性。
- children：子节点，必须用数组定义。
示例代码：
- [{
- "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#"
- }]
- }]
属性
名称类型描述默认值url（超链接）string（字符串）用以载入远程数据的超链接地址。nullmethod（方法）string（字符串）获取数据的HTTP方法。postanimate（动画）boolean（布尔型）定义当节点打开或关闭时是否显示动画效果。falsecheckbox（复选框）boolean（布尔型）定义是否在每个节点之前显示复选框。falsecascadeCheck（级联选择）boolean（布尔型）定义是否支持级联选择。trueonlyLeafCheck（只选叶子节点）boolean（布尔型）定义是否只在叶子节点之前显示复选框。falsednd（拖放）boolean（布尔型）定义是否支持拖放。falsedata（数据）array（数组）将被载入的节点数据。null事件
多数事件回调函数都有'node'参数，该参数包含如下属性：
- id：节点的唯一标识。
- text：显示在节点上的文本。
- checked：节点是否被选择。
- attributes：节点的自定义属性。
- target：目标DOM对象。
id：节点id。
text：显示在节点上的文本。
checked：节点是否被选择。
attributes：节点的自定义属性。
target：被点击的目标DOM对象。onDblClicknode当用户双击节点时触发。onBeforeLoadnode, param在请求载入数据之前触发，返回false将取消载入。onLoadSuccessnode, data当数据载入成功时触发。onLoadErrorarguments当数据载入失败时触发，arguments参数跟jQuery.ajax的'error'函数一样。onBeforeExpandnode在节点打开之前触发，返回false将取消打开。onExpandnode在节点被打开时触发。onBeforeCollapsenode在节点被关闭之前触发，返回false将取消关闭。onCollapsenode当节点被关闭时触发。onChecknode, checked当用户点击复选框时触发。onBeforeSelectnode在节点被选择之前触发，返回false将取消选择。onSelectnode当节点被选择时触发。onContextMenue, node当节点被鼠标右键点击时触发。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对象。getCheckednone获取所有被选择的节点。getSelectednone获取被选择的节点并返回，如果没有节点被选择则返回null。isLeaftarget判断指定的节点是否是叶子节点，target参数是一个节点DOM对象。findid查找指定的节点并返回节点对象。selecttarget选择一个节点，target参数是一个节点DOM对象。checktarget设置指定的节点为已选择状态。unchecktarget设置指定的节点为未选择状态。<collapsetarget关闭节点，target参数是一个节点DOM对象。expandtarget打开节点，target参数是一个节点DOM对象。collapseAlltarget关闭所有的节点。expandAlltarget打开所有的节点。expandTotarget打开从根节点到指定节点之间的所有节点。appendparam添加若干子节点到一个父节点，param参数有2个属性：parent：DOM对象，将要被添加子节点的父节点，如果未指定，子节点将被添加至根节点。
data：数组，节点数据。toggletarget打开或关闭节点的触发器，target参数是一个节点DOM对象。insertparam在一个指定节点之前或之后插入节点，'param'参数包含如下属性：
before：DOM对象，在某个节点之前插入。
after: DOM对象，在某个节点之后插入。
data：对象，节点数据。removetarget移除一个节点和它的子节点，target参数是一个节点DOM对象。poptarget移除一个节点和它的子节点，该方法跟remove方法一样，不同的是它将返回被移除的节点数据。updateparam更新指定的节点，param参数有如下属性：
target(DOM对象，将被更新的目标节点)，id，text，iconCls，checked等。enableDndnone启用拖动特性。disableDndnone禁用拖动特性。beginEditnodeEl开始编辑节点。endEditnodeEl结束编辑节点。cancelEditnodeEl取消编辑节点。
相关推荐
wklken的笔记 2019-12-24
wordmhg 2019-10-29
wyqwilliam 2019-10-20
helloworlddm 2011-12-13
vanseparis 2011-06-20
heshizui 2011-05-08
paypalmts 2019-07-01
cfh00 2013-06-04
chenchun 2018-01-26
潘小安 2019-06-27
想要让你的网站显示个性图标，首先需要制作个icon的图标，其次需要在页面的“<head></head>”间添加如下代码：。--可以在收藏夹中显示出图标--><linkrel="Bookmark"typ
johncena 2014-08-29
健康学习 2013-11-19
teresalxm 2011-09-16