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 数据加载地址
ajaxType String ajax类型:get/post。
ajaxOptions Object ajax配置对象。如:ajaxOptions="{type:'post', async: true, data: {a:1, b: true}, dataType: 'text', contentType: 'application/x-www-form-urlencoded;charset=utf-8'}"。
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
checkOnTextClick Boolean 点击节点文本切换选择checkbox 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             //节点对象
}
节点文本编辑完成时激发。