本节课重点了解 EasyUI 中 Tree(树)组件的使用方法， 这个组件依赖于 Draggable(拖
动)和 Droppable(放置)组件。
一． 事件列表
很多事件的回调函数都包含'node'参数，其具备如下属性：
id：绑定节点的标识值。
text：显示的节点文本。
iconCls：显示的节点图标 CSS 类 ID。
checked：该节点是否被选中。
state：节点状态，'open' 或 'closed'。
attributes：绑定该节点的自定义属性。
target：目标 DOM 对象。
//部分事件
$('#box').tree({
url : 'tree.php',
lines : true,
checkbox : true,
onlyLeafCheck : true,
dnd : true,
onClick : function (node) {
console.log(node);
},
onDblClick : function (node) {
console.log(node);
},
onBeforeLoad : function (node, param) {
console.log(node);
console.log(param);
//return false;
},
onBeforeLoad : function (node,param) {
console.log(node);
console.log(param);
},
onLoadError : function (arguments) {
console.log(arguments);
},
onBeforeExpand : function (node) {
console.log(node);
},
onExpand : function (node) {
console.log(node);
},
onBeforeCollapse : function (node) {
console.log(node);
},
onCollapse : function (node) {
console.log(node);
},
onBeforeCheck : function (node) {
console.log(node);
},
onCheck : function (node, checked) {
console.log(node);
console.log(checked);
},
onBeforeSelect : function (node) {
console.log(node);
},
onContextMenu: function(e, node){
e.preventDefault();
// 查找节点
$('#box').tree('select', node.target);
// 显示快捷菜单
$('#menu').menu('show', {
left: e.pageX,
top: e.pageY
});
}
onBeforeDrag : function (node) {
console.log(node);
},
onDragEnter : function (target, source) {
console.log(target);
console.log(source);
},
onBeforeDrop : function (target, source, point) {
console.log(target);
console.log(source);
console.log(point);
},
});