学习tree 控件(基础)

前端之家收集整理的这篇文章主要介绍了学习tree 控件(基础)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习tree 控件:http://www.cxseo.net/web/200903/20/news_contentrid229.html

一、树形控件的常用属性

1、dragMoveEnabled:是否在拖放的过程中将节点移动,而不是复制。

2、folderOpenIcon:展开节点时的节点图标

3、folderClosedIcon:关闭节点时的节点图标

4、defaultLeafIcon:叶子节点的图标

5、openItems:在初始化时展开的节点集。

6、showRoot:是否显示数据中的根节点。XML格式的数据一般包含根节点,此时该属性应为false;Array类型的数据一般不包含根节点,该属性设置无效。

7、indentation:节点层次缩进量。

8、doubleClickEnabled:节点是否支持双击事件。

9、dragEnabled:是否允许拖动节点。

10、dropEnabled:在拖动节点的过程中是否允许释放,以移动节点。

11、alternatingItemColors:节点间隔背景色。

12、labelField:作为标签显示的数据的属性

13、labelFunction自定义节点标签

二、树形控件的常用事件

1、itemClick:单击节点触发该事件。

2、itemDoubleClick:双击节点触发该事件。

使用XMLLISTCOLLECTION 和ARRAYCOLLECTION对象的对比。


你也许想知道,在运行时从远程或本地得来的数据被动态修改的时候,应该使用XMLListCollection对象还是ArrayCollection对象作为Tree空间的数据提供者。


如果你使用的数据源提供成形的XML,并且,你想在Tree控件中操作 XML数据。你应该使用XMLListCollection对象作为数据提供者。当使用MXML标记时,如果数据源是XMLList对象,你应该把它绑定到XMLLsitCollection对象的source属性上,然后把 XMLListCollection对象绑定到Tree控件的dataProvider属性上。

当你想要动态改变对象值时,不要使用XMLList或XML对象直接绑定到Tree控件的dataProvider属性上。当数据源是RPC(远程过程调用)服务的lastResult属性,并且你想使用XML数据,确保RPC组件的resultFormat属性被设置成e4x,当你使用e4x结果格式,最总结果就是XMLList,可以绑定在XMLListCollection对象上。

这里有一个例子。为例数据被动态改变,使用ArrayCollection对象作为Tree控件的数据提供器。当使用MXML标记时,如果你期望动态的改变Arrayl,你不应该把Array对象直接绑定到Tree控件的dataProvider属性上。作为代替,你应该绑定Array到一个ArrayCollection对象的source属性上,然后再把ArrayCollection对象绑定到Tree控件的dataProvider属性上。


当数据源是RPC(远程过程调用)服务的lastResult对象,并且RPC组件的resultFormat属性被成object,你应该使用ArrayUtil.toArray()方法来确保对象是一个Array。然后绑定到ArrayCollection对象上,就像下边的例子所示:

<mx:ArrayCollection
id="employeeAC"
source= "{ArrayUtil.toArray(employeeSrv.lastResult.employees.employee)}"/>

例如1:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">

<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
[Bindable]
private var company:XML =
<list>
<department title="Finance" code="200">
<employee name="John H"/>
<employee name="Sam K"/>
</department>
<department title="Operations" code="400">
<employee name="Bill C"/>
<employee name="Jill W"/>
</department>
<department title="Engineering" code="300">
<employee name="Erin M"/>
<employee name="Ann B"/>
</department>
</list>;

[Bindable]
private var companyData:XMLListCollection = new XMLListCollection(company.department);

private function treeLabel(item:Object):String
{
var node:XML = XML(item); //提供该 XML对象限定名称的本地名称部分
if( node.localName() == "department" )
return node.@title;
else
return node.@name;
}


private function addEmployee():void
{
var newNode:XML = <employee/>;
newNode.@name = empName.text;
var dept:XMLList =company.department.(@title == "Operations");
if( dept.length() > 0 ) {
dept[0].appendChild(newNode);
empName.text = "";
}
}
private function removeEmployee():void
{
var node:XML = XML(tree.selectedItem);
if( node == null ) return;
if( node.localName() != "employee" ) return;

var children:XMLList = XMLList(node.parent()).children();
for(var i:Number=0; i < children.length(); i++) {
if( children[i].@name == node.@name ) {
delete children[i];
}
}
}
]]>
</mx:Script>

<mx:Tree id="tree" top="72" left="50" dataProvider="{companyData}"
labelFunction="treeLabel"
height="224" width="179"/>
<mx:HBox>
<mx:Button label="Add Operations Employee" click="addEmployee()"/><mx:TextInput id="empName"/>
</mx:HBox>
<mx:Button label="Remove Selected Employee" click="removeEmployee()"/>
</mx:Application>


例如2:设置tree节点图标

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ // 图标的相对地址 // 注意: 文件夹之间一定要用"/"分隔,而不能用"\"分隔! [Embed(source="1.png")] [Bindable] public var boyIcon:Class; [Embed(source="2.png")] [Bindable] public var girlIcon:Class; // 根据结点的属性设置节点图标 private function SetIcon(item:Object):* { var xml:XML = item as XML; if(xml.attribute("sex")=="男") { return boyIcon; } else { return girlIcon; } } // Tree控件的数据源 [Bindable] public var jpXml:XML= <member jpname="祖先" sex="男"> <member jpname="胡迪" sex="男"> </member> <member jpname="胡俊" sex="男"> </member> <member jpname="胡三" sex="女"> </member> </member> public function AddMember():void { var newMember:XML = <member jpname="胡易衡" sex="男"> </member> //// 在根结点的第一个子结点前面加一个子第一个子结点 //jpXml.appendChild(newMember); //// 在根结点的最后一个子结点前面加一个子第一个子结点 //jpXml.prependChild(newMember); // 给结点添加一个子结点 // 添加子女 jpXml.member.(@jpname=="胡俊").appendChild(newMember); // 给结点添加一个兄弟结点 // 先找到该结点父结点,然后添加给该父结点添加子结点 //jpXml.member.(@jpname=="胡俊").parent().appendChild(newMember); // 修改结点的值 //jpXml.member.(@jpname=="胡俊").@jpname="姓名修改"; txrXml.text= jpXml.member.(@jpname=="胡俊").@jpname; // 用于测试 } ]]> </mx:Script> <mx:Tree x="27" y="81" width="161" height="300" id="treeXml" dataProvider="{jpXml}" labelField="@jpname" showDataTips="true" iconFunction="SetIcon" horizontalScrollPolicy="on"></mx:Tree> <mx:Button x="65" y="40" label="Button" id="btnXml" click="AddMember()" /> <mx:TextArea x="235" y="83" width="258" height="237" id="txrXml"/> </mx:Application>

原文链接:https://www.f2er.com/xml/299291.html

猜你在找的XML相关文章