构建 TreeListView 类的新实例。
| 全称 | mx.controls.TreeListView |
| 命名空间 | mx.controls |
| 类 | TreeListView |
| 继承层次结构 | TreeListViewPagedControlControl |
| 源文件 | ~\mx\scripts\controls\TreeListView.js |
提供一个数据项以树结构显示的列表控件。
示例 1
以下是一个 TreeListView 控件的示例。
| JavaScript 代码 |
var treeList = new mx.controls.TreeListView({
type: "local",
images:
[
{ itemType: "folder", imageUrl: "$/icons/folder.png" },
{ itemType: "role", imageUrl: "$/icons/role.png" }
], // 控件中所有使用的图片集合
itemMenu:
{
items:
[
{ name: "appendRoot", text: "添加根节点" },
{ name: "append", text: "添加子节点" },
"-",
{ name: "remove", text: "删除" }
],
onitemclick: _toolStrip_itemclick
}, // 定义数据项的右键菜单
columns:
[
{ name: "name", text: "名称" },
{ name: "value", text: "值" }
], // 定义列
items:
[
{
name: "Folder1",
value: "folder1",
itemType: "folder", // itemType 的值与 images 集合中对象的 name 属性值相对应，显示相应的图片
items:
[
{
name: "A1",
value: "a1",
itemType: "role"
}
] // Folder1 的子数据项节点
},
{
name: "Folder2",
value: "folder2",
itemType: "folder",
expanded: true, // 设置默认展开节点
items:
[
{
name: "Folder2-1",
value: "folder2-1",
itemType: "folder",
expanded: true,
items:
[
{
name: "B1",
value: "b1",
itemType: "role"
},
{
name: "B2",
value: "b2",
itemType: "role"
}
]
}
]
}
], // 定义数据项。可以嵌套，表示数据项子节点
onitemdoubleclick: _treeItem_doubleclick
});
function _treeItem_doubleclick(e)
{
alert("您双击的项的名称为：" + e.item.getValue("name"));
}
function _toolStrip_itemclick(e)
{
if (e.item.name == "appendRoot")
{
treeList.appendItem({
name: "root",
value: "根节点",
itemType: "folder"
});
}
} |
构造函数
| 名称 | 说明 |
| TreeListView() | 构建 TreeListView 类的新实例。 |
初始化函数
| 名称 | 说明 |
| init() |
方法
字段
| 名称 | 说明 |
| alias | 获取或设置一个字符串，表示控件的别名。 |
| allColumns | 获取一个集合，包含控件中显示的所有 TreeListViewColumn 的集合。 |
| allowDragging | 获取一个 Boolean 值，表示数据项节点是否允许拖拽。该字段必须在初始化前设置。 暂未提供行拖拽功能，该属性设置无效，暂时保留。 |
| allowEditing | 获取和设置一个 Boolean 值， 该属性表示是否允许编辑。 |
| allowPaging | 获取和设置一个 Boolean 值，表示是否可以分页。 |
| autoLoad | 获取或设置一个 Boolean 值，该属性表示是否自动执行远程数据加载。 |
| baseUrl | 获取或者设置一个属性，表示数据加载的服务地址。请参见 RESTClient.baseUrl |
| border | 获取控件的边框样式。如“1px solid red”，表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
| bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
| client | |
| columns | 获取一个集合，包含控件中第一层列 TreeListViewColumn 与列分组 TreeListViewColumnGroup 的集合。 |
| contextMenu | 一个 ContextMenu 对象，表示控件的右键菜单。 |
| cssClass | 指定css伪类名称，设置控件显示样式 |
| dicts | 获取或者设置一个数组，该值表示数据项的数据字典。例如： [ {name: "gender", values:[{text: "女", value: "female"}, {text: "男", value: "male"}]}, {name: "fruit", values:[{text: "苹果", value: "appple"}, {text: "香蕉", value: "banana"}]}, ] |
| display | 获取控件的显示样式值。如“none”，表示隐藏控件； “block”表示强制作为块对象呈递。请使用 setDisplay。注：该"block"值不能在ComplexGrid控件中使用。 方法设置该字段的值。 |
| displayCheckBox | 获取或者设置一个 Boolean 值，表示是否显示多选框。默认显示多选框。 |
| displayHead | 获取一个 Boolean 值，表示是否显示列标题。请使用 setDisplayHead 方法设置该字段的值。 |
| displayImage | 获取一个 Boolean 值，表示是否需要在 TreeListViewItem 中显示图标。该字段必须在初始化前设置。 |
| displayRowNumber | 获取或设置一个 Boolean 值，表示是否需要显示行序号。 |
| enabled | 获取控件是否可以对用户交互作出响应。如果该值为 true，则表示控件可以对用户交互作出响应；反之则不能。 请使用 setEnabled 方法设置该字段的值。 |
| eTag | 获取控件的标签。 |
| filter | 获取或设置一个 JSON 对象，该属性将用作数据加载的查询参数。 |
| height | |
| idField | 获取或设置一个属性，该属性将用作 TreeListView 中数据项的 id 值。 |
| images | 获取一个集合，包含 TreeListView 中所有使用的图片。 |
| imageSize | 获取 TreeListViewItem 图片的大小。该字段必须在初始化前设置。 |
| itemCount | 获取和设置一个 Number 值，表示当前的总记录数。 |
| itemMenu | 一个 ContextMenu 对象，表示数据项节点的右键菜单。 |
| items | 获取一个集合，包含数据项列表中的根数据项（TreeListViewItem 类型）。请使用 setItems 方法设置该集合的值。 |
| layoutConfigs | 获取或者设置一个 JSON 对象，该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
| left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
| padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2 像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
| pageIndex | 获取和设置一个 Number 值，表示当前第几页。 |
| pageSize | 获取和设置一个 Number 值，表示当前每页允许显示的记录数。 |
| pageSizeOptions | 获取和设置一个数组值，表示分页记录数可设置的选项。 |
| parent | 获取控件所属的父对象。 |
| permissionID | 获取或设置一个字符串，表示控件的权限标识。 |
| position | 获取控件位置样式值。如“static”，表示无特殊定位，对象遵循 HTML 定位规则。请使用 setPosition
方法设置该字段的值。
该字段的可选值包括:
|
| right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
| searchBox | 设置或者获取一个 DataGridSearchBox 对象。 |
| searchParamType | 获取或设置表格的查询条件类型。json 表示查询参数filter 的值采用 Json 对象的形式传递。string 表示查询参数 filter 的值采用字符串的形式传递。
该字段必须在初始化前设置。
该字段可选的值包括：
|
| selection | 获取一个对象，表示 TreeListView 中当前选中的数据项节点（TreeListViewItem 类型）。 |
| singleSelect | 获取或者设置一个 Boolean 值，表示是支持多选。该属性与 displayCheckBox 属性等价，建议使用 displayCheckBox属性。 |
| top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
| treeField | 获取或设置一个属性，该属性将用作 TreeListView 中数据项以树型结构显示的字段值。 |
| type | 获取数据加载的类型。
该字段可选的值包括：
|
| visible | 获取一个 Boolean 值，表示控件是否可见。如果该值为 true，则表示控件可见；反之则不可见。请使用 setVisible 方法设置该字段的值。 |
| width | |
| $body1 | |
| $body2 | |
| $bodyTable1 | |
| $e | 获取该控件的占位符，该占位符为一个 JQuery 对象。 |
| $grid | |
| $head1 | |
| $headTable1 | |
| $view | |
| $view1 | |
| $view2 | |
| _items | 受保护的。 |
事件
| 名称 | 说明 |
| oncelledited | 编辑后事件。 |
| oncellediting | 编辑前事件。 |
| ondeleted | |
| ondeleting | 数据项删除前事件。 |
| onexpanded | 数据项展开后事件。 |
| onexpanding | 数据项展开前事件。 |
| onitemcountchanged | 总记录数改变时触发该事件。 |
| onitemdoubleclick | 当双击数据项列表中项的时候，将触发该事件。 |
| onload | 数据加载事件。 |
| onpageindexchanged | 当前的页面索引变更时触发该事件。调用 moveToPage 方法是触发该事件。 |
| onselectionchanged | 当控件当前的选择项发生改变后，将触发该事件。通常调用 selectItem 、 deselectItem 、 deselectAll 等方法后会触发该事件。 |
| onselectionchanging | 当控件当前的选择项发生改变的时候，将触发该事件。通常调用 selectItem 方法时会触发该事件。 |
方法详细信息
appendColumn(p_column) 方法
appendColumn(p_name, [p_text], [p_width], [p_align]) 方法
参数
- p_name一个 JSON 对象（如 { name:"class", text:"类", dataType:"string", width:150, align:"center" }），表示 TreeListViewColumn 的一组属性值；或一个字符串，表示 TreeListViewColumn 对象的 TreeListViewColumn.name 字段的值。
- p_text可选的。一个字符串，表示 TreeListViewColumn 对象的 TreeListViewColumn.text 字段的值。
- p_width可选的。一个数字（如 500）或字符串（如“500px”或“50%”），表示列的宽度。
- p_align可选的。一个字符串，表示列中文本的对齐方式。可以为“left”左对齐、“right”右对齐、“center”居中对齐、“justify”两端对齐。
示例 1
请参见 ListView.appendColumn 方法的示例。
appendColumns(p_columns) 方法
向 TreeListView 的 添加一组列集合。
参数
- p_columns一个数组，该数组包含了一组 TreeListViewColumn 对象 或者 TreeListViewColumnGroup 对象。
appendImage(p_image) 方法
appendItem(p_item) 方法
参数
- p_item一个 JSON 对象（如 { name:"bruce", value:"lee" }，“name”和“value”分别为列（TreeListViewColumn 类型）的 TreeListViewColumn.name 字段值）或一个 TreeListViewItem 对象。
示例 1
以下是为 TreeListView 添加一个
TreeListViewItem 的示例。
| JavaScript 代码 |
treeList.appendItem({
name: "C",
value: "c",
itemType: "folder",
items: [
{ name: "C1", value: "c1", itemType: "role" },
{ name: "C2", value: "c2", itemType: "role" }
]
}); |
appendItems(p_items) 方法
向 TreeListView 的数据项列表（items 集合）添加一组数据项节点。
参数
- p_items一个数组，该数组包含了一组 TreeListViewItem 对象。
示例 1
以下是为 TreeListView 添加一组
TreeListViewItem 的示例。
| JavaScript 代码 |
treeList.appendItems([
{
name: "C",
value: "c",
itemType: "folder",
items: [
{ name: "C1", value: "c1", itemType: "role" },
{ name: "C2", value: "c2", itemType: "role" }
]
},
{
name: "D",
value: "d",
itemType: "folder",
items: [
{ name: "D1", value: "d1", itemType: "role" },
{ name: "D2", value: "d2", itemType: "role" }
]
}
]); |
checkAll() 方法
全选
checkItem(p_item) 方法
commitChanges() 方法
重置修改的记录。
contains($p_target) 方法
返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。
参数
- $p_target一个 JQuery 对象，或 JQuery 选择器对应的字符串（如“#container”），或 HTML DOM 元素。
继承自
deselectItem(p_item, [p_triggerEvent]) 方法
清除对 TreeListView 中指定数据项节点的选定。
参数
- p_item一个 TreeListViewItem 对象，表示要清除对该项的选定。
- p_triggerEvent可选的。默认值为“true”。一个 Boolean 值，表示是否要触发 onselectionchanged 事件。如果该值为 true，则触发事件；反之则不触发。
endEdit() 方法
结束编辑。
expandAll() 方法
展开所有节点。
getChanges() 方法
获取修改的记录。
getItem(p_expression) 方法
isCheckedAll(p_item) 方法
判断 TreeListView的数据项是否全部选中，或者判断某一个 TreeListViewItem 数据项的子项是否全部选中。
参数
- p_item表示一个 TreeListViewItem 数据项。默认不赋值，表示获取TreeListView的数据项全部选中状态。
load(p_callback) 方法
数据加载。
参数
- p_callback回调函数。
load(p_data) 方法
数据加载。
参数
- p_data一个 JSON 数组 或者 一个字符串， 其中 JSON 数组表示本地数据集合；字符串表示数据加载的服务地址。
load(p_params) 方法
数据加载。
参数
- p_params一个 JSON 对象，表示服务请求的参数。
load(p_data, p_callback) 方法
数据加载。
参数
- p_data一个 JSON 数组 或者 一个字符串， 其中 JSON 数组表示本地数据集合；字符串表示数据加载的服务地址。
- p_callback回调函数。
load(p_data, p_params) 方法
数据加载。
参数
- p_data一个 JSON 数组 或者 一个字符串， 其中 JSON 数组表示本地数据集合；字符串表示数据加载的服务地址。
- p_params一个 JSON 对象，表示服务请求的参数。
load(p_data, p_params, p_callback) 方法
数据加载。
参数
- p_data一个 JSON 数组 或者 一个字符串， 其中 JSON 数组表示本地数据集合；字符串表示数据加载的服务地址。
- p_params一个 JSON 对象，表示服务请求的参数。
- p_callback回调函数。
loadChildren(p_item, p_callback) 方法
loadChildren(p_item, p_params) 方法
loadChildren(p_item, p_params, p_callback) 方法
moveTo(p_left, p_top) 方法
移动控件到指定位置。
参数
- p_left一个数字，表示 css 样式的 left 属性。
- p_top一个数字，表示 css 样式的 top 属性。
继承自
moveToPage(p_index) 方法
rejectChanges() 方法
撤销修改的记录。
removeItem(p_item) 方法
删除指定数据项。
参数
- p_item
resizeTo(p_width, p_height) 方法
重设控件的大小。
参数
- p_width控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
selectItem(p_item, [p_triggerEvent]) 方法
选择 TreeListView 列表中的指定的数据项节点。
参数
- p_item一个数字（如 1），表示行号；或者一个 TreeListViewItem 对象；或者TreeListViewItem 对象的 id;
- p_triggerEvent可选的。默认值为“true”。一个 Boolean 值，表示是否要触发 onselectionchanged 事件。如果该值为 true，则触发事件；反之则不触发。
setBorder(p_border) 方法
setBottom(p_bottom) 方法
setColumnVisible(p_columnName, p_visible) 方法
设置列的可见性。
参数
- p_columnName表示列的名称。
- p_visible一个 Boolean 值。
setCssClass(p_cssClass) 方法
setDisplay(p_display) 方法
setHeight(p_height) 方法
setPadding(p_padding) 方法
setPosition(p_position) 方法
setTop(p_top) 方法
setVisible(p_visible) 方法
setWidth(p_width) 方法
unCheckedItem(p_item) 方法
$wrap([p_obj]) 方法
返回一个 JQuery 对象。
参数
- p_obj可选的。默认值为“me.$e”。一个 JQuery 对象，或继承自 Control 的控件，或字符串，或 HTML DOM 元素。如果参数为 JQuery 对象，则返回本身；如果参数为继承自 Control 的控件，则返回控件的 $e 对象；如果参数为字符串，则返回以字符串为选择器的 JQuery 对象；如果参数为空，则返回控件本身的 $e 对象。
继承自
_adjustSizeForIE6() 方法
受保护的。IE6调整大小，为兼容IE6
字段详细信息
allColumns 字段
获取一个集合，包含控件中显示的所有 TreeListViewColumn 的集合。
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.controls.TreeListViewColumn。
集合索引
列的名称（TreeListViewColumn.name）或列在集合中的序号（从 0
开始计数）。
allowDragging 字段
获取一个 Boolean 值，表示数据项节点是否允许拖拽。该字段必须在初始化前设置。
暂未提供行拖拽功能，该属性设置无效，暂时保留。
默认值
false
allowEditing 字段
获取和设置一个 Boolean 值， 该属性表示是否允许编辑。
默认值
false
autoLoad 字段
获取或设置一个 Boolean 值，该属性表示是否自动执行远程数据加载。
client 字段
dicts 字段
获取或者设置一个数组，该值表示数据项的数据字典。例如：
[
{name: "gender", values:[{text: "女", value: "female"}, {text: "男", value: "male"}]},
{name: "fruit", values:[{text: "苹果", value: "appple"}, {text: "香蕉", value: "banana"}]},
]
display 字段
获取控件的显示样式值。如“none”，表示隐藏控件；
“block”表示强制作为块对象呈递。请使用 setDisplay。注：该"block"值不能在ComplexGrid控件中使用。
方法设置该字段的值。
继承自
displayCheckBox 字段
获取或者设置一个 Boolean 值，表示是否显示多选框。默认显示多选框。
默认值
true
displayRowNumber 字段
获取或设置一个 Boolean 值，表示是否需要显示行序号。
默认值
true
enabled 字段
filter 字段
获取或设置一个 JSON 对象，该属性将用作数据加载的查询参数。
images 字段
获取一个集合，包含 TreeListView 中所有使用的图片。
集合
该字段是一个集合数组字段。
集合索引
JSON 对象在集合中的序号（从 0 开始计数）或 JSON 对象的 itemType 属性值。
items 字段
获取一个集合，包含数据项列表中的根数据项（TreeListViewItem 类型）。请使用
setItems 方法设置该集合的值。
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.controls.TreeListViewItem。
集合索引
数据项在集合中的序号（从 0 开始计数）。
layoutConfigs 字段
padding 字段
获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2
像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。
继承自
position 字段
获取控件位置样式值。如“static”，表示无特殊定位，对象遵循 HTML 定位规则。请使用 setPosition
方法设置该字段的值。
该字段的可选值包括:
- static
- relative
- absolute
- fixed
继承自
searchParamType 字段
获取或设置表格的查询条件类型。json 表示查询参数filter 的值采用 Json 对象的形式传递。string 表示查询参数 filter 的值采用字符串的形式传递。
该字段必须在初始化前设置。
该字段可选的值包括：
- json
- string
singleSelect 字段
type 字段
获取数据加载的类型。
该字段可选的值包括：
- remote
- local
默认值
remote
$body1 字段
$body2 字段
$bodyTable1 字段
$grid 字段
$head1 字段
$headTable1 字段
$view 字段
$view1 字段
$view2 字段
_items 字段
受保护的。
事件详细信息
oncelledited 事件
编辑后事件。
oncellediting 事件
编辑前事件。
ondeleted 事件
ondeleting 事件
数据项删除前事件。
onexpanded 事件
数据项展开后事件。
onexpanding 事件
数据项展开前事件。
onload 事件
数据加载事件。
onpageindexchanged 事件
onselectionchanged 事件
onselectionchanging 事件
当控件当前的选择项发生改变的时候，将触发该事件。通常调用 selectItem 方法时会触发该事件。
参数
- cancel可通过设置 cancel 参数为 true 来取消当前操作。默认为 false。
- item一个 TreeListViewItem 对象，即将被选择的项。