`

转：easy ui tree

 
阅读更多
使用示例
Tree 可以在<ul>元素定义,标记可以定义叶子节点,子节点,节点可以是li元素和内置的ul的列表,下面展示的元素使树节点内嵌ul元素: 
<ul id="tt" class="easyui-tree">  
    <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>

Tree 也可以在一个空的ul元素中定义和使用javascript加载数据 
<ul id="tt"></ul>  


$('#tt').tree({  
    url:'tree_data.json'  
});

使用loadFilter处理 ASP.NET web services输出的json数据. 
$('#tt').tree({  
    url: ...,  
    loadFilter: function(data){  
        if (data.d){  
            return data.d;  
        } else {  
            return data;  
        }  
    }  
});


Tree 数据转换
所有节点都包含以下属性:
  • id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
  • text: 显示的节点文本
  • state: 节点状态, 'open' 或者 '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#"  
    }]  
}]


异步加载树
tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如: 
<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

tree的加载是通过URL  'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据 
[{  
    "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到远程服务器检索子节点
这个教程创建异步的树click me!!!,展示如何写服务器端代码根据需求返回tree数据.

属性
NameTypeDescriptionDefault
urlstring一个从远程服务器检索数据的URL.null
methodstring检索数据的http方法类型.post
animateboolean定义当展开/折叠节点的时候是否显示效果.false
checkboxboolean定义是否显示checkbox在所有节点之前.false
cascadeCheckboolean定义是否级联选择.true
onlyLeafCheckboolean定义是否仅仅只是在叶子节点显示checkbox.false
linesboolean定义是否显示树线.false
dndboolean定义是否启用drag and drop.false
dataarray这个节点数据将被加载. $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }]});null
loaderfunction(param,success,error)定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数param: 这个参数对象将传送给远程服务器success(data): 当检索数据成功之后的回调函数error(): 当检索数据出现异常的时候调用的回调函数.json loader
loadFilterfunction(data,parent)返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数data:装载的是原始数据.parent: DOM 对象, 指定父节点.


事件
许多回调函数提供'node'参数, 都包含以下属性:
  • id: 绑定到节点的标识值.
  • text:显示文本.
  • iconCls: 显示icon的css样式.
  • checked: 节点是否选中.
  • state: 节点状态, 'open' 或者 'closed'.
  • attributes: 绑定到节点的自定义属性.
  • target: 目标 DOM 对象.
NameParametersDescription
onClicknode当用户点击节点的时候触发. 示例代码: $('#tt').tree({ onClick: function(node){ alert(node.text);  // alert node text property when clicked }});
onDblClicknode当用户双击一个节点的时候触发.
onBeforeLoadnode, param当一个请求加载数据在前触发, 返回false取消加载动作.
onLoadSuccessnode, data当数据加载成功之后触发.
onLoadErrorarguments当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 .
onBeforeExpandnode节点展开之前触发,返回false取消展开动作.
onExpandnode当节点展开之后触发.
onBeforeCollapsenode节点折叠之前触发,返回false将取消折叠动作.
onCollapsenode当节点折叠之后触发.
onChecknode, checked当用户点击checkbox的时候触发.
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'">Append</div> <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div></div>
onDroptarget, source, point当节点被放置的时候触发. target: DOM 对象,这个节点是被放置的目标. source: 源节点. point:指明drop操作,可用值有: 'append','top' or 'bottom'.
onBeforeEditnode在编辑节点之前触发.
onAfterEditnode编辑节点之后触发.
onCancelEditnode取消编辑动作时候触发.


方法
NameParameterDescription
optionsnone返回tree 的options.
loadDatadata加载tree数据.
getNodetarget得到特定的节点对象.
getDatatarget得到特定节点数据, 包含其子节点.
reloadtarget重新加载tree数据.
getRootnone得到根节点, 返回节点对象
getRootsnone得到根节点, 返回节点数组.
getParenttarget得到父节点,target参数指明节点DOM对象.
getChildrentarget得到子节点,target 参数指明节点DOM对象.
getCheckednone得到所有选中节点.
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对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.
collapseAlltarget折叠所有节点.
expandAlltarget展开所有节点.
expandTotarget展开从根节点到指定的节点 .
appendparam附加一些子节点到父节点中. param参数有两个属性: parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点. data: array, the nodes data. Code example: // 添加一些节点到选择的节点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切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.
insertparam插入一个节点到特定节点的之前或之后.'param'参数包含以下属性: before: DOM 对象,节点插入到之前. after: DOM 对象, 节点插入到之后. data: object, 节点数据. 以下代码展示,如何插入新节点到选择节点之前: var node = $('#tt').tree('getSelected');if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } });}
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启用 drag 和 drop 功能.
disableDndnone禁用 drag 和drop 功能.
beginEdittarget开始编辑一个节点.
endEdittarget结束编辑一个节点.
cancelEdittarget取消编辑一个节点.
分享到：
| 转：easyui tree自定义属性的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics