Javascript - ExtJs - TreePanel组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript - ExtJs - TreePanel组件相关的知识，希望对你有一定的参考价值。
TreePanel组件（Ext.tree.TreePanel）logogram：Ext.tree.Panel | xtype:treepanel
树与节点
树面板组件的根是源头，从根上拓展出其它的子节点和叶子节点，前者可以继续拓展出子节点，后者因为是叶子，所以不再有子节。Json自身就类似树结构，所以使用Json作为树面板的data是顺理成章的事。节点都来自Ext.data.NodeInterface接口，该接口提供了对节点的创建、删除、替换、查找、获取、插入等操作。而且Ext.data.NodeInterface对象与Ext.data.Model对象之间存在可交换使用的属性、方法，所以前者不但是节点同时也是一个记录对象。也即你可以把节点看成Ext.data.Model对象，可以同时使用两者所具备的属性或方法。
树.配置
store: Ext.data.store
//配置数据存储器。配置root指定节点数据。
root ：节点数据
//节点数据，如果配置了store就不需要再配置此项，两项任选其一。
rootVisible: bool
//是否显示根节点。
renderTo: Element | Dom ID | Dom
//渲染到哪个元素里。
enableDD: bool
//是否可拖动节点到其它任意节点中。
lines: bool
//是否显示树的层次线
selModel：Ext.selection.Model
//选择模式，参看：选择模式
collapsible：bool
//是否在树的标题栏显示一个折叠展开的按钮用于折叠或展开整棵树
trackMouseOver: bool
//鼠标划过节点时是否显示背景色
useArrows：bool
//节点前的折叠展开图标使用vista风格的三角形图标
columns：[]
//与GridPanel的columns用法完全相同，此项主要用于将树显示为表格树
displayField: string
//默认树节点的文本显示的是text字段，此项可以指定其它的字段用于显示节点文本
valueField: string
////默认树节点的值是id字段，此项可以指定其它的字段作为节点的值
folderSort：bool
//是否排序
hideHeaders：bool
//当树为表格树时是否显示列头
//配置数据存储器。配置root指定节点数据。
root ：节点数据
//节点数据，如果配置了store就不需要再配置此项，两项任选其一。
rootVisible: bool
//是否显示根节点。
renderTo: Element | Dom ID | Dom
//渲染到哪个元素里。
enableDD: bool
//是否可拖动节点到其它任意节点中。
lines: bool
//是否显示树的层次线
selModel：Ext.selection.Model
//选择模式，参看：选择模式
collapsible：bool
//是否在树的标题栏显示一个折叠展开的按钮用于折叠或展开整棵树
trackMouseOver: bool
//鼠标划过节点时是否显示背景色
useArrows：bool
//节点前的折叠展开图标使用vista风格的三角形图标
columns：[]
//与GridPanel的columns用法完全相同，此项主要用于将树显示为表格树
displayField: string
//默认树节点的文本显示的是text字段，此项可以指定其它的字段用于显示节点文本
valueField: string
////默认树节点的值是id字段，此项可以指定其它的字段作为节点的值
folderSort：bool
//是否排序
hideHeaders：bool
//当树为表格树时是否显示列头
树.方法
getRootNode()
//获取根节点，返回Ext.data.NodeInterface
expand(bool)
//bool：是否开启动画效果
//展开树
expandPath(idPath)
//idPath：节点id的路径
//展开处于参数指定的路径的节点
//示例：
//将展开根节点01下的0101子节点
tree.expandPath("/01/0101");
selectPath(idStrPath)
//与expandPath类似，但同时会选中节点的复选框。
collapse(direction, bool)
//折叠树
//direction：折叠的方向，可能的值如下：
//Ext.Component.DIRECTION_TOP
//Ext.Component.DIRECTION_RIGHT
//Ext.Component.DIRECTION_BOTTOM
//Ext.Component.DIRECTION_LEFT
//bool：是否开启动画效果
collapseAll()
//折叠所有节点
disable(bool)
//启用或禁用树
getChecked()
//获取选中的节点，返回Ext.data.NodeInterface[]
getSelectionModel()
//获取选择模式对象，可调用isSelected(record)方法测试某节点是否被选中
getView()
//获取视图
nextNode()
//返回在树的遍历顺序的下一个节点组件，返回Ext.Component。
nextSibling()
//返回此组件的下一个同级组件
previousNode()
//返回在树的遍历顺序的前一个节点的组件.
previousSibling()
//返回此组件的前一个同级组件
//获取根节点，返回Ext.data.NodeInterface
expand(bool)
//bool：是否开启动画效果
//展开树
expandPath(idPath)
//idPath：节点id的路径
//展开处于参数指定的路径的节点
//示例：
//将展开根节点01下的0101子节点
tree.expandPath("/01/0101");
selectPath(idStrPath)
//与expandPath类似，但同时会选中节点的复选框。
collapse(direction, bool)
//折叠树
//direction：折叠的方向，可能的值如下：
//Ext.Component.DIRECTION_TOP
//Ext.Component.DIRECTION_RIGHT
//Ext.Component.DIRECTION_BOTTOM
//Ext.Component.DIRECTION_LEFT
//bool：是否开启动画效果
collapseAll()
//折叠所有节点
disable(bool)
//启用或禁用树
getChecked()
//获取选中的节点，返回Ext.data.NodeInterface[]
getSelectionModel()
//获取选择模式对象，可调用isSelected(record)方法测试某节点是否被选中
getView()
//获取视图
nextNode()
//返回在树的遍历顺序的下一个节点组件，返回Ext.Component。
nextSibling()
//返回此组件的下一个同级组件
previousNode()
//返回在树的遍历顺序的前一个节点的组件.
previousSibling()
//返回此组件的前一个同级组件
树.事件
itemclick：fn(view, node)
//view：视图
//node：当前被点击的节点
//节点被点击时触发
checkchange：fn(node, isChecked)
//node：复选框状态改变的节点
//isChecked：true或false
//节点的复选框状态改变时触发
beforeitemexpand: fn(node)
//node：当前被展开的node
//展开节点时触发
beforeitemcontextmenu: fn(view, record, item, index, e)
//右击某项时触发
//示例：
listeners: {
beforeitemcontextmenu: function ( view, record, item, index, e) {
e.preventDefault(true);
alert(record.get("id"));
}
}
//view：视图
//node：当前被点击的节点
//节点被点击时触发
checkchange：fn(node, isChecked)
//node：复选框状态改变的节点
//isChecked：true或false
//节点的复选框状态改变时触发
beforeitemexpand: fn(node)
//node：当前被展开的node
//展开节点时触发
beforeitemcontextmenu: fn(view, record, item, index, e)
//右击某项时触发
//示例：
listeners: {
beforeitemcontextmenu: function ( view, record, item, index, e) {
e.preventDefault(true);
alert(record.get("id"));
}
}
节.配置
id: string
//节点的标识
text: string
//节点名称
checked: bool
//在当前节点显示复选框且是否选中。
expandable: bool
//是否允许节点有展开折叠的功能
expanded：bool
//展开或折叠当前节点，true为展开
qtip: string
//鼠标滑过当前节点显示的提示信息
qtitle: string
//提示信息的标题
singleClickExpanded: bool
//是否单击节点时就展开这个节点（+-或箭头都是单击时展开，但节点被单击时默认是展开的，可设为false即不展开，只有双击才会展开）
leaf: bool
//是否是叶子，此项影响到节点前的+-图标的显示，如果为false则显示图标，默认为false。还影响字节的显示，如果此项为true，但同时又配置了当前节点的children，那么children就不会显示出来。
children: [Ext.data.Model实例, ……]
//子节点，此项用于配置子节点，但如果要获取子节点应使用childNodes属性。
alllowDrag: bool
//是否允许拖动自身
allowDrop: bool
//是否允许接收来自拖动的节点
href：stringUrl
//指示链接地址
hrefTarget
//指示如何打开链接
//节点的标识
text: string
//节点名称
checked: bool
//在当前节点显示复选框且是否选中。
expandable: bool
//是否允许节点有展开折叠的功能
expanded：bool
//展开或折叠当前节点，true为展开
qtip: string
//鼠标滑过当前节点显示的提示信息
qtitle: string
//提示信息的标题
singleClickExpanded: bool
//是否单击节点时就展开这个节点（+-或箭头都是单击时展开，但节点被单击时默认是展开的，可设为false即不展开，只有双击才会展开）
leaf: bool
//是否是叶子，此项影响到节点前的+-图标的显示，如果为false则显示图标，默认为false。还影响字节的显示，如果此项为true，但同时又配置了当前节点的children，那么children就不会显示出来。
children: [Ext.data.Model实例, ……]
//子节点，此项用于配置子节点，但如果要获取子节点应使用childNodes属性。
alllowDrag: bool
//是否允许拖动自身
allowDrop: bool
//是否允许接收来自拖动的节点
href：stringUrl
//指示链接地址
hrefTarget
//指示如何打开链接
节.属性.property
childNodes
//获取当前节点的所有子节点，返回代表子节点的Object数组，可通过在迭代时get到节点的属性
firstChild
//获取当前节点的第一个子节点
lastChild
//获取当前节点的最后一个子节点
previousSibling
//获取紧靠在当前节点前的第一个兄弟节点
nextSibling
//获取紧靠在当前节点后的第一个兄弟节点
isFirst
//当前节点是否是其父节点所包含的第一个子节点
isLast
//当前节点是否是其父节点所包含的最后一个子节点
parentNode
//获取当前节点的父节点
parentId
//获取当前节点的父节点的id
index
//获取当前节点在其父节点中所处的索引
depth
//获取深度级别
//节没有提供测试是否自身是否被选中，可使用树的getChecked(0方法或使用树的getSel
//获取当前节点的所有子节点，返回代表子节点的Object数组，可通过在迭代时get到节点的属性
firstChild
//获取当前节点的第一个子节点
lastChild
//获取当前节点的最后一个子节点
previousSibling
//获取紧靠在当前节点前的第一个兄弟节点
nextSibling
//获取紧靠在当前节点后的第一个兄弟节点
isFirst
//当前节点是否是其父节点所包含的第一个子节点
isLast
//当前节点是否是其父节点所包含的最后一个子节点
parentNode
//获取当前节点的父节点
parentId
//获取当前节点的父节点的id
index
//获取当前节点在其父节点中所处的索引
depth
//获取深度级别
//节没有提供测试是否自身是否被选中，可使用树的getChecked(0方法或使用树的getSel
节.方法
appendChild(Ext.data.NodeInterface | Ext.data.NodeInterface[])
//在当前节点的末尾添加新节点
expand(bool)
//bool：为true时将自动递归展开所有子节点
//展开
isExpanded()
//是否是展开状态
collapse()
//折叠
collapseChildren()
//折叠当前节点的所有子节点
createNode()
//创建节点，占时没搞懂怎么创建后加入tree
destroy()
//自毁
eachChild(fn)
//遍历当前节点的所有子节点，在函数的任何位置返回false则会终止遍历
findChild(property, value, deep)
//property：属性名
//value：属性值
//deep：深度级别，如果为true则查找范围包括后代节点
//查找具备参数指定的属性和属性值的第一个子节点，返回 Ext.data.NodeInterface
findChildBy(fn, scope, deep)
//fn：如果某节点匹配函数的规则，必须返回true
//scope：作用域
//deep：深度级别，如果为true则查找范围包括后代节点
//通过自定义函数查找匹配的第一个子节点，返回 Ext.data.NodeInterface
getChildAt(index)
//获取指定索引处的子节点，返回 Ext.data.NodeInterface
getDepth()
//获取当前节点的深度级别
getPath()
//获取当前节点相对于根节点的层级路径
hasChildNodes()
//是否具有子节点
indexOf(childNode)
//在当前节点中获取参数指定的子节点的索引
indexOfId(string)
//在当前节点中根据参数指定的ID获取子节点
insertBefore(x, y)
//x | y：当前节点的子节点
//在当前节点的子节点中，将x插入到y之前
insertChild(index, node)
//将节点插入到当前节点的子节点的索引指定处
isLeaf()
//是否是叶子节点
isRoot()
//是否是根节点
remove(bool)
//移除自身，如果bool为true，则直接销毁。
removeAll()
//移除所有子节点
removeChild(childNode, bool)
//移除参数指定的子节点，如果bool为true则直接销毁
replaceChild(new,old)
//在当前节点中，用new替换old
//在当前节点的末尾添加新节点
expand(bool)
//bool：为true时将自动递归展开所有子节点
//展开
isExpanded()
//是否是展开状态
collapse()
//折叠
collapseChildren()
//折叠当前节点的所有子节点
createNode()
//创建节点，占时没搞懂怎么创建后加入tree
destroy()
//自毁
eachChild(fn)
//遍历当前节点的所有子节点，在函数的任何位置返回false则会终止遍历
findChild(property, value, deep)
//property：属性名
//value：属性值
//deep：深度级别，如果为true则查找范围包括后代节点
//查找具备参数指定的属性和属性值的第一个子节点，返回 Ext.data.NodeInterface
findChildBy(fn, scope, deep)
//fn：如果某节点匹配函数的规则，必须返回true
//scope：作用域
//deep：深度级别，如果为true则查找范围包括后代节点
//通过自定义函数查找匹配的第一个子节点，返回 Ext.data.NodeInterface
getChildAt(index)
//获取指定索引处的子节点，返回 Ext.data.NodeInterface
getDepth()
//获取当前节点的深度级别
getPath()
//获取当前节点相对于根节点的层级路径
hasChildNodes()
//是否具有子节点
indexOf(childNode)
//在当前节点中获取参数指定的子节点的索引
indexOfId(string)
//在当前节点中根据参数指定的ID获取子节点
insertBefore(x, y)
//x | y：当前节点的子节点
//在当前节点的子节点中，将x插入到y之前
insertChild(index, node)
//将节点插入到当前节点的子节点的索引指定处
isLeaf()
//是否是叶子节点
isRoot()
//是否是根节点
remove(bool)
//移除自身，如果bool为true，则直接销毁。
removeAll()
//移除所有子节点
removeChild(childNode, bool)
//移除参数指定的子节点，如果bool为true则直接销毁
replaceChild(new,old)
//在当前节点中，用new替换old
树的例子
var tree = new Ext.tree.TreePanel({
title: "Simple Tree",
renderTo: Ext.getBody(),
width: 200,
height: 150,
root: {
text: "根",
children: [
{ text: "哲学", leaf: false },
{ text: "数理", leaf: false },
{ text: "英语", leaf: false },
]
}
});
title: "Simple Tree",
renderTo: Ext.getBody(),
width: 200,
height: 150,
root: {
text: "根",
children: [
{ text: "哲学", leaf: false },
{ text: "数理", leaf: false },
{ text: "英语", leaf: false },
]
}
});
动态添加节点
//创建一个节点
var childNode = { Text: addValue, ParentID: parentID };
fatherNode.appendChild(childNode);
var childNode = { Text: addValue, ParentID: parentID };
fatherNode.appendChild(childNode);
动态加载树
store专门有一个叫做Ext.data.TreeStore的数据存储器，它对树面板提供了支持，可以使用proxy请求服务端的数据。通常我们读取的树的节点数据都来自数据库的表，而表字段名称不一定就和text、leaf、parentId完全一样，这样就需要创建本地数据模型（Ext.data.Model）匹配数据库表的字段，通过Ext.data.TreeStore这个专门针对动态加载树的存储器去请求服务端的数据。那么假如服务端的数据并没有text这样的字段，树又如何显示节点名称呢？只需要配置树的displayField和valueField就OK，前者指定节点显示的名称是服务端数据的哪个字段，后者指定节点id或者父id，这由你自己决定。以下创建了一棵动态加载数据的树，首次Ajax加载只获取第一层节点，然后在proxy上注册了侦听，当某节点被展开时proxy会继续发起Ajax请求并将PID的值设为当前被展开节点的ID。服务端request到这个值再从数据库查询出其下的子节点，通过JsonCovert将记录转换位字符串输送到客户端。这样，proxy会自动将子节点绑定到被展开的那个节点下面，不需要我们做额外的工作。
数据库
客户端
//创建model
Ext.define("trees", {
extend: "Ext.data.Model",
//对应数据库表的字段
fields: [\'ID\', "Text", "ParentID"]
});
//创建Store
var treeStore = Ext.create("Ext.data.TreeStore", {
model: "trees",
proxy: {
type: "ajax",
url: "treeHandler.ashx",
extraParams: { PID: 0 },
reader: {
type: \'json\',
root: \'ds\'
}
},
listeners: {
beforeexpand: function (node) {
// 因为根节点是服务端JsonConvert返回的数据，root是ds
// ds是不需要显示的，所以首次渲染树时就会自动展开树
// 此时node是不确定的，直到用户展开了树才能捕获被展开的节点
if (node.get(\'ID\')) { this.proxy.extraParams.PID = node.get(\'ID\'); }
}
},
//自动加载数据，即不需要在后面load了
autoLoad: true
});
//创建树
var MyTree = Ext.create("Ext.tree.Panel", {
renderTo: Ext.getBody(),
width: 220,
title: \'simpleDataTree\',
store: treeStore,
useArrows: true,
rootVisible: false,
displayField: "Text",
valueField: "ParentID"
})
Ext.define("trees", {
extend: "Ext.data.Model",
//对应数据库表的字段
fields: [\'ID\', "Text", "ParentID"]
});
//创建Store
var treeStore = Ext.create("Ext.data.TreeStore", {
model: "trees",
proxy: {
type: "ajax",
url: "treeHandler.ashx",
extraParams: { PID: 0 },
reader: {
type: \'json\',
root: \'ds\'
}
},
listeners: {
beforeexpand: function (node) {
// 因为根节点是服务端JsonConvert返回的数据，root是ds
// ds是不需要显示的，所以首次渲染树时就会自动展开树
// 此时node是不确定的，直到用户展开了树才能捕获被展开的节点
if (node.get(\'ID\')) { this.proxy.extraParams.PID = node.get(\'ID\'); }
}
},
//自动加载数据，即不需要在后面load了
autoLoad: true
});
//创建树
var MyTree = Ext.create("Ext.tree.Panel", {
renderTo: Ext.getBody(),
width: 220,
title: \'simpleDataTree\',
store: treeStore,
useArrows: true,
rootVisible: false,
displayField: "Text",
valueField: "ParentID"
})
服务端
public void ProcessRequest( HttpContext context )
{
context.Response.ContentType = "text/plain";
string PID = context.Request["PID"];
DataSet ds = Trees.GetList( "ParentID=" + PID );
if (ds.Tables.Count == 0) { 找出 ExtJs 中 Ext.panel.tree 中的选定项目是不是有子项
{
context.Response.ContentType = "text/plain";
string PID = context.Request["PID"];
DataSet ds = Trees.GetList( "ParentID=" + PID );
if (ds.Tables.Count == 0) { 找出 ExtJs 中 Ext.panel.tree 中的选定项目是不是有子项