在技术上,这其实没什么纠结的,只是上一个功能关于动态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();
}
分享到:
相关推荐
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 ...
UITableView 與 Lazy Loading 結合 當cell 需要顯示照片時, 由NSURLConnect 去下載圖片.
NULL 博文链接:https://xdjava.iteye.com/blog/1745136
在layui的源代码里面添加了懒加载功能代码,这是自动化构建之后的代码
前端代码实现图片懒加载 , 内含完整的html5页面 , js 以及图片资源 , 有兴趣的朋友可以参考一下
移动端图片懒惰加载,直加载能看到的图片,当欢动手机屏幕新的图片才会加载,只需引入给的文件中的js和css再做一些简单的设置就能使用
懒惰的加载
图像的反延迟加载, 在任何网页上加载所有图像 - 一旦页面加载即可。 图像的反延迟加载, 在任何网页上加载所有图像 - 一旦页面加载就会。 语言:English (United States)
React Lazy Loading - 很容易与 React 集成到 Lazyload 组件、图像等。它会监视元素并告诉您元素何时进入视口。 这样可以在视口中的组件和初始加载减少时执行任何操作。 实现“无限滚动”网站,在您滚动时加载和...
Yii2 的延迟加载模块用于内容延迟加载的 Yii2 模块主要特点: 显示... 在应用程序配置文件的modules部分添加一个新模块,例如: 'modules' => [ 'lazyloading' => ['class' => 'denar90\lazyloading\LazyLoading' ,'m
Flex入门教程汇编.pdf ...3.优化Flex应用程序的性能,包括使用缓存、lazy loading和优化数据库查询等。 本教程旨在帮助初学者快速入门Flex开发,并提供了丰富的实践经验和样例代码,帮助读者快速掌握Flex开发的技能。
Laravel开发-eloquent-log-lazy-loading 记录(或禁用)雄辩的延迟加载关系。
NULL 博文链接:https://iintothewind.iteye.com/blog/1234870
需求: vue-cli项目树形控件:一级节点为本地节点...el-tree class="treeitems" :data="data" node-key="id" :props="defaultProps" :load="loadNode" lazy :default-expanded-keys="[0]" @node-click="handle
今天起床,拿起手机开机第一时间当然是打开微信了,左右滑动Viewpager,发现它使用了一种叫惰性加载,或者说懒加载(lazy-loading)的方式加载Viewpager中的Fragment。效果如图: 什么是lazy-loading呢?顾名思义...
一个markdown-it插件,支持Chrome 75的本机图像延迟加载。... const lazy_loading = require('markdown-it-image-lazy-loading'); md.use(lazy_loading); md.render(`![](example.png“图片标题”)`); //
2.安装说明版本: 节点:14.15.1 Npm:6.14.8 React:17.0.1 从Github下载代码: git clone https://github.com/antoineratat/react_lazyloading.git 导航到项目目录。 cd react_intersection_observer 安装节点模块...
Ig-Lazy-Module-Loader This library helps with loading modules (features) in ...In the demo app there's two examples of lazy loading: java library - compiled first to jar and then to dex file android
Lazy
1、勾选左侧的功能资源,点击【添加】,可将内容添加到右侧,并且左侧勾选的数据删除;勾选右侧的已选资源,效果同...4、后台给到的数据是:所有的资源(多维数组)和已分配的资源(一维数组,包含(半勾选)父级数据)