在技术上,这其实没什么纠结的,只是上一个功能关于动态grid弄好已经接近18:00,这临近下班的时间再搞这个问题,而且紧急,在感情还是上蛮纠结的。加上系统本来已经就有个tree在运转,当然数据格式不是基于XML的,只不过那个tree实在太臃肿而且问题不断,现在要重写就更纠结了。
还好我之前在另一个模块写过一个基于XML数据的Tree,代码还算简洁,复用度蛮高,只不过那个场景下不是Lazy Loading,现在要改成Lazy Loading而已。连写带调半个小时搞定,呵呵。
首先,上次树的定义可以复用,ABCTree.mxml(为避免×××嫌疑,名字以ABC代替):
<?xml version="1.0" encoding="utf-8"?>
<mx:Tree xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Metadata>
[Event(name="treeLoaded", type="flash.events.Event")]
</mx:Metadata>
</mx:Tree>
其次,上次的TreeRadioItemRenderer类也可以复用,只需继承重写两个方法即可满足当前不同业务。TreeRadioItemRenderer.as如下:
public class TreeRadioItemRenderer extends TreeItemRenderer
{
public function TreeRadioItemRenderer(){
super();
}
protected var radioButton:RadioButton;
override protected function createChildren():void{
super.createChildren();
radioButton = new RadioButton();
radioButton.selected = false;
addChild( radioButton );
radioButton.addEventListener(Event.CHANGE, changeHandler);
}
/**
* update dataProvider when user click CheckBox
*/
protected function changeHandler( event:Event ):void {
//Set Value Here for your Model
}
/**
* Initial data when component initialization
*/
override protected function commitProperties():void{
super.commitProperties();
if (null != data) {
var s:int = int(data.selected);
var selected:Boolean = s > 0 ? true : false;
radioButton.selected = selected;
} else {
radioButton.selected = false;
}
}
/**
* reset itemRenderer's width
*/
override protected function measure():void{
super.measure();
measuredWidth += radioButton.getExplicitOrMeasuredWidth();
}
/**
* re-assign layout for tree, move lable to right
* @param unscaledWidth
* @param unscaledHeight
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var startx:Number = data ? TreeListData( listData ).indent : 0;
if (disclosureIcon)
{
disclosureIcon.x = startx;
startx = disclosureIcon.x + disclosureIcon.width;
disclosureIcon.setActualSize(disclosureIcon.width,
disclosureIcon.height);
disclosureIcon.visible = data ?
TreeListData( listData ).hasChildren :
false;
}
if (icon)
{
icon.x = startx;
startx = icon.x + icon.measuredWidth;
icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
}
radioButton.move(startx, ( unscaledHeight - radioButton.height ) / 2 );
label.x = startx + radioButton.getExplicitOrMeasuredWidth();
}
}
继承后的ABCTreeRenderer.as:
public class ABCTreeRenderer extends TreeRadioItemRenderer
{
public function ABCTreeRenderer()
{
super();
}
public var itemXml: XML;
//用来记录选择的Node的值
override protected function changeHandler( event: Event ):void
{
ABCTree.selectedXmlNode = itemXml;
}
override public function set data(value:Object):void{
if(value != null){
super.data = value;
this.itemXml = XML(value);
if(this.itemXml.@id == "1000" ){
super.radioButton.visible = false;
}else
super.radioButton.visible = true;
}
}
override protected function commitProperties():void
{
super.commitProperties();
if(ABCTree.selectedXmlNode != null) {
if(ABCTree.selectedXmlNode.@id == data.@id)
{
radioButton.selected = true;
}else {
radioButton.selected = false;
}
}
}
}
这样我可以完整的实现树了:
<scenario:ABCTree id="proTree" dataProvider="{model.abcTreeData}" itemRenderer="...ABCTreeRenderer" itemOpen="onItemOpen(event)" labelField = "@name" treeLoaded="afterInit()" width="100%" dataTipFunction="tipFun" showDataTips="true"/>
页面初始化方法:
private function init():void{
needLoad = false;
model.abcTreeData = XML("<node id=\"1000\" name=\"这是根节点\" level=\"1\" isBranch=\"true\" />");
proTree.dispatchEvent(new Event("treeLoaded"));
}
public function initLoad():void{
if(needLoad)
init();
}
树加载完以后,利用afterInit事件加载第一层数据:
private function afterInit():void{
Mask.show("loadABCTree", "Loading tree data...");
var deg:BusDelegate = new BusDelegate();
deg.getABCTreeNode(model.abcTreeData.@id,classificationsLoaded, loadFailed);
}
//当load完第一层触发
private function classificationsLoaded(event:ResultEvent):void{
try{
var str:String = exceptionProcess(String(event.result));
if(str != "error"){
var ch:XMLList = new XMLList(str);
model.abcTreeData.appendChild(ch);
}
}catch(e){
needLoad = true;
}finally{
Mask.close("loadABCTree");
}
}
//Load Tree Data 有异常
private function loadFailed(event:FaultEvent):void {
needLoad = true;
Mask.close("loadABCTree");
if(event.fault.rootCause is ChannelEvent && event.fault.faultString == 'Channel disconnected'){
//channel will handle this fault
}else if(event.fault.rootCause is ChannelFaultEvent && event.fault.faultString == 'error'){
channel will handle this fault
}else{
if(event.fault.faultString != null && event.fault.faultString.indexOf("RemoteAccessException") >= 0)
Alert.show("Exception occurred, may ABC remote service not ready.");
else
Alert.show("Exception:" + event.fault.faultString);
}
}
//处理后台返回回来是exception数据还是正常的数据,空也算exception
private function exceptionProcess(str:String): String{
var respObj:Object = JSON.decode(str);
var respStatus: String = respObj.respStatus;
if (respStatus == "failed") {
var errorMessages: String = respObj.errorMessages;
if(errorMessages.lastIndexOf(":")!=-1)
errorMessages=errorMessages.substring(errorMessages.lastIndexOf(":")+1,errorMessages.length);
Alert.show(errorMessages);
return "error";
}
return String(respObj.result);
}
加载下一层:
private function loadNextLevel():void{
if( theClickItem != null && theClickItem.children().length() == 0 ){
Mask.show("loadABCTree", "Loading tree data...");
var deg:BusDelegate = new BusDelegate ();
deg.getAbcTreeNode(theClickItem.@id,nextLeavlLoaded, loadFailed);
}
}
private function nextLeavlLoaded(event:ResultEvent):void{
try{
var str:String = exceptionProcess(String(event.result));
if(str != "error"){
var ch:XMLList = new XMLList(str);
theClickItem.appendChild(ch);
}
}catch(e){
needLoad = true;
}finally{
Mask.close("loadABCTree");
}
}
最后在onItemOpen(event)事件中来触发loadNextLevel方法:
var theClickItem:XML = null;
private function onItemOpen(event:TreeEvent):void{
theClickItem = XML(event.item);
if( theClickItem.@level == 8 )//值需加载8层
return;
loadNextLevel();
}
分享到:
相关推荐
在实际应用中,可能还会涉及到性能优化,如延迟加载(Lazy Loading)以减少初始加载的数据量,或者添加全选/全不选按钮等增强用户体验的功能。 总之,Flex Tree + Checkbox级联勾选是一个强大的UI功能,它提高了...
In this article I want to discuss the lazy loading mechanism provided by NHibernate. It is recommended for maximum flexibility to define all relations in your domain as lazy loadable. This is the ...
在网页开发中,"页面实现Lazy Loading效果"是一种优化用户体验的技术策略,特别是在处理大量图片或者内容的页面时。Lazy Loading,即延迟加载或惰性加载,是指只在用户滚动到可视区域时才加载图片或其他资源,而不是...
当应用需要加载图片时,特别是网络图片,采用“懒加载”(Lazy Loading)策略是提高性能和节省资源的有效方式。这个“IOS TableView Lazy Loading Demo”就是演示了如何将UITableView与懒加载技术相结合,以优化用户...
Lazy Loading:懒加载的常见问题与解决方案.docx
在“lazy_load_tree_layui.zip”这个压缩包中,我们看到了一个经过自动化构建的layui源代码,其中特别添加了懒加载功能,这对于处理大数据量的树形结构数据尤为关键。本文将深入解析这个懒加载树组件的实现原理及...
在移动设备上,由于网络资源有限以及用户对页面加载速度的高要求,图片懒惰加载(Lazy Loading)技术成为了一种优化网页性能的有效方法。"lazyloading.rar"这个压缩包文件提供了一个实现移动端图片懒惰加载的解决...
Lazy Loading:CSS懒加载策略.docx
Lazy Loading:懒加载技术概论.docx
Lazy Loading:JavaScript懒加载实现.docx
Lazy Loading:懒加载与用户体验.docx
Lazy Loading:视频懒加载实现方法.docx
Lazy Loading:懒加载与SEO优化.docx
Lazy Loading:懒加载与性能优化.docx
在提供的"lazyLoading.rar"压缩包中,包含了一个完整的实现图片懒加载的实例。其中,HTML5页面应该包含了使用`data-src`的`<img>`标签,JavaScript文件(可能是.js后缀)则包含了处理滚动事件和图片加载逻辑的代码。...
当处理大型XML文件时,考虑到性能,可以使用延迟加载(lazy loading)策略,只在需要时加载节点的子节点,以减少内存消耗。 总的来说,C#的WinForms应用中,使用TreeList控件展示XML文件结构,既直观又高效。通过...
此外,`Tree`组件的性能优化也是一个重要的话题,如延迟加载(lazy loading)技术,它只在需要时加载节点,从而提高应用程序的响应速度。 工具方面,Flex Builder或Flash Builder可能是开发者常用的集成开发环境...
Lazy Loading:懒加载框架与库介绍.docx
Lazy Loading:懒加载的历史与发展.docx
Lazy Loading:懒加载未来趋势与研究.docx