mini.Tree

树形控件。

Extend

mini.DataGrid

Usage

<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:300px;padding:5px;" 
    showTreeIcon="true" textField="text" idField="id" >        
</ul>

Screenshots

Examples

Base Example Create Tree Lazy Tree Navigation Tree Selection ContextMenu
Add/Remove/Update Node Expand/Collapse Draw Node MoveNode Window

Properties

NameTypeDescriptionDefault Set? Get? Tag?
data Array 树形数据对象 √√√
url String 数据加载地址 √√√
value String 选中的节点值 √√√
idField String 值字段。 id √√√
textField String 节点文本字段 text √√√
iconField String 图标字段 iconCls √√√
nodesField String 子级节点字段 children √√√
parentField String 父节点字段 pid √√√
imgField String 节点图片字段。 img √√√
imgPath String 节点图片路径。节点可以设置"img"属性。 √√√
resultAsTree Boolean url数据是否列表 true √√√
dataField String 数据列表字段 √√√
checkedField String checked字段 checked √√√
checkRecursive Boolean 是否联动选择父子节点。比如选中父节点,自动全选子节点。 false √√√
autoCheckParent Boolean 是否自动选择父节点。比如选中子节点,将父节点也自动选中。 false √√√
expandOnLoad Boolean/Number 加载后是否展开。比如:true展开所有节点;0展开第一级节点。以此类推。 false √√√
showTreeIcon Boolean 显示节点图标 true √√√
showTreeLines Boolean 显示树形线条 true √√√
allowSelect Boolean 允许选择节点 true √√√
showCheckBox Boolean 允许Check模式选中节点 false √√√
showFolderCheckBox Boolean 当showCheckBox为true时,是否显示父节点CheckBox true √√√
showExpandButtons Boolean 显示折叠展开图标 true √√√
enableHotTrack Boolean 移动节点上时高亮显示 true √√√
expandOnDblClick Boolean 双击节点展开收缩 true √√√
expandOnNodeClick Boolean 单击节点展开收缩 true √√√
allowLeafDropIn Boolean 是否允许拖拽投放到子节点内 false √√√
allowDrag Boolean 是否允许拖拽节点 false √√√
allowDrop Boolean 是否允许投放节点 false √√√

Methods

NameParameterDescriptionReturn
load ( url ) 加载数据。
loadData ( Array ) 加载树形数据。
loadList ( Array, idField, parentField ) 加载列表数据。比如:tree.loadList(list, "id", "pid")
getList ( ) 获取节点数组。 Array
isChanged ( ) 是否已修改。 Boolean
accept ( ) 清除所有行修改痕迹。
loadNode ( node ) 懒加载节点下一级数据。
getRootNode ( ) 获取根节点。 Object
getAncestors ( node ) 获得所有父节点 Array
getParentNode ( node ) 获得父节点 Object
getChildNodes ( node ) 获得子节点集合。 Array
getAllChildNodes ( node ) 获得所有子节点集合。 Array
isAncestor ( pnode, node ) pnode是否是node的父级节点。 Boolean
isLeaf ( node ) 是否叶子节点。
getLevel ( node ) 获得节点层级。 Number
isExpandedNode ( node ) 是否展开节点。 Boolean
isCheckedNode ( node ) 是否Check选中的节点。 Boolean
isVisibleNode ( node ) 是否显示节点。 Boolean
isEnabledNode ( node ) 是否启用节点。 Boolean
bubbleParent ( node, fn, scope ) 由当前节点开始一直上溯到根节点,调用fn,直到fn返回false为止。 Control
cascadeChild ( node, fn, scope ) 遍历所有层次的子节点, 直到返回false
eachChild ( node, fn, scope ) 遍历下一级子节点
removeNodes ( nodes ) 删除多个节点
removeNode(node) 删除节点
addNodes ( nodes, parentNode ) 增加多个节点
addNode ( node, index, parentNode ) 加入节点
updateNode ( node, options ) 更新节点内容。比如:tree.updateNode(node, {text: "abc"});
moveNode(node, targetNode, action) 移动节点。action值:before|after|add。
setNodeText ( node, String ) 设置节点文本
setNodeIconCls ( node, String) 设置节点图标
getNode ( value ) 根据值获取节点对象
enableNode ( node ) 启用节点
disableNode ( node ) 禁用节点
findNodes ( fn, scope ) 查找节点数据。如:
var nodes = tree.findNodes(function(node){
    if(node.name.indexOf("abc") != -1) return true;
});
filter ( fn, scope ) 过滤。如:
tree.filter(function(node){
    if(node.name.indexOf("abc") != -1) return true;
});
clearFilter ( ) 取消过滤
expandNode ( node ) 展开节点
collapseNode ( node ) 收缩节点
expandLevel ( Number ) 展开层次节点
collapseLevel ( Number ) 折叠层次节点
expandPath ( node ) 展开节点路径
collapsePath ( node ) 折叠节点路径
expandAll ( ) 展开所有节点
collapseAll ( ) 收缩所有节点
scrollIntoView ( node ) 视图滚动至节点
selectNode ( node ) 选中节点
getSelectedNode ( ) 获取选中的节点
checkNode ( node ) Check多选节点
uncheckNode ( node ) 取消Check多选节点
checkNodes ( nodes ) Check多选多个节点
uncheckNodes ( nodes ) 取消Check多选多个节点
checkAllNodes ( ) Check多选所有节点
uncheckAllNodes ( ) 取消Check多选所有节点
getCheckedNodes ( haveParent ) haveParent: Boolean。是否包含父节点。 获取Check选中的多个节点
getValue ( haveParent) haveParent: Boolean。是否包含父节点。 获取Check选中的节点值

Events

NameEventObjectDescription
drawnode
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean,        //是否叶子
  nodeHtml: String,       //节点html
  showCheckBox: Boolean,  //是否显示checkbox
  iconCls: String,        //图标样式
  showTreeIcon: Boolean   //是否显示图标
}
绘制节点时发生
nodedblclick
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean
}
节点双击时发生
nodeclick
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean
}
节点点击时发生
nodemousedown
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean
}
节点鼠标按下时发生
dragstart
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  nodes: Array,           //节点对象数组
  dragText: String,         //拖拽节点描述信息
  cancel: false
}
选择节点前发生
beforenodeselect
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean,
  cancel: false
}
选择节点前发生
nodeselect
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean
}
节点选中时发生
beforeload 数据加载前发生
preload 数据加载,设置到Tree前发生
loaderror
{
    sender: Object, //表格对象
    xhr: Object, //ajax对象
    errorMsg: String //错误信息
    errorCode: int  //错误码
}
数据加载错误时发生
load
{
    sender: Object, //表格对象
    xhr: Object,    //ajax对象
    data: Array     //数据    
}
数据加载成功时发生
loadnode
{
  sender: Object,         //树对象
  node: Object           //节点对象 
}
beforenodecheck
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean,
  checked: Boolean,       //Check状态
  cancel: false
}
Check选择前发生
nodecheck
{
  sender: Object,         //树对象
  node: Object,           //节点对象
  isLeaf: Boolean
}
Check选择时发生
beforeexpand
{
  sender: Object,         //树对象
  node: Object
}
展开节点前发生
expand
{
  sender: Object,         //树对象
  node: Object
}
展开节点后发生
beforecollapse
{
  sender: Object,         //树对象
  node: Object
}
折叠节点前发生
collapse
{
  sender: Object,         //树对象
  node: Object
}
折叠节点后发生
beforedrop
{
  sender: Object,         //树对象
  dragNode: Object,         //拖拽的节点
  dropNode: Object,         //目标投放节点
  dragAction: String,        //投放方式:add/after/before
  cancel: Boolean
}
拖拽投放前发生。"e.cancel = true"可取消
drop
{
  sender: Object,         //树对象
  dragNode: Object,         //拖拽的节点
  dropNode: Object,         //目标投放节点
  dragAction: String        //投放方式:add/after/before
}
拖拽投放时发生
givefeedback
{
  sender: Object,           //树对象
  from: Object,             //拖拽来源树
  node: Object,             //拖拽的节点
  targetNode: Object,       //目标投放节点
  effect: String            //投放方式:add/after/before/no。
}
拖拽投放前发生。用于决定是否可投放。
endedit
{
  sender: Object,           //树对象
  node: Object             //节点对象
}
节点文本编辑完成时激发。