在DataGrid的GridColumn列中加入按钮宣染器

时间2024-01-25 10:58:39发布访客分类HTML浏览426

导读：收集整理的这篇文章主要介绍了html5教程-在DataGrid的GridColumn列中加入按钮宣染器，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...

收集整理的这篇文章主要介绍了html5教程-在DataGrid的GridColumn列中加入按钮宣染器，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

在项目中需要做如一个如下图效果的这样一个功能：

需要在DataGrid的GrIDColumn列中加入按钮宣染器：

1 首先声明一个spark DataGrid.在最后一列中加入按钮宣染器，红色代码部分

[htML]
s:DataGrid id="DataGrid2" verticalScrollpolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
    s:columns>
            s:ArrayList>
                s:GridColumn headerText="地区名称" dataField="areaName" />
                s:GridColumn headerText="地区NO" dataField="areaNo" />
                s:GridColumn headerText="是否使用" dataField="iSUSE" labelFunction="isUseValue"/>
                SPAN style="COLOR: #ff0000"> s:GridColumn ITemRenderer="com.tm.renderer.operateItem" editable="false"/> /SPAN>
            /s:ArrayList>
    /s:columns>
/s:DataGrid>

s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
s:columns>
   s:ArrayList>
    s:GridColumn headerText="地区名称" dataField="areaName" />
    s:GridColumn headerText="地区NO" dataField="areaNo" />
    s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
    s:GridColumn itemRenderer="com.tm.renderer.OPErateItem" editable="false"/>
   /s:ArrayList>
/s:columns>
/s:DataGrid> 2 在宣染器类GridItemRenderer中，有2个按钮，并且为这2个按钮，加了自定义事件，派发出去：

[java]
fx:Script>
        ![CDATA[
            import com.tm.event.OperateEvent;
            PRivate function removeItem():void {
                trace(data);
                VAR removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
                this.dispatchEvent(removeEvent);
            }

            private function updateItem():void {
                var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
                this.dispatchEvent(updateEvent);
            }
        ]]>
/fx:Script>

s:Button label="编辑" click="updateItem()"/>
s:Button label="删除" click="removeItem()"/>

fx:Script>
  ![CDATA[
   import com.tm.event.OperateEvent;
   private function removeItem():void {
    trace(data);
    var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
    this.dispatchEvent(removeEvent);
   }

   private function updateItem():void {
    var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
    this.dispatchEvent(updateEvent);
   }
  ]]>
/fx:Script>

s:Button label="编辑" click="updateItem()"/>
s:Button label="删除" click="removeItem()"/> 3 自定义事件如下：

[java]
public class OperateEvent extends Event
    {
        public var data:Object;
        public static const REMOVE:String = "remove";
        public static const UPDATE:String = "update";
        public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
        {
            this.data = data;
            super(type, bubbles, cancelable);
        }
    }

public class OperateEvent extends Event
{
  public var data:Object;
  public static const REMOVE:String = "remove";
  public static const UPDATE:String = "update";
  public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
  {
   this.data = data;
   super(type, bubbles, cancelable);
  }
}
4 最后我们需要在主程序中，也就是使用了spark 的 DataGrid的类中，在creationComplete初始化方法中，加入对自定义事件的监听方法：

[html]
protected function completeHandler(event:FlexEvent):void
            {
                SPAN style="COLOR: #cc0000"> DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI);
                DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI); /SPAN>
                serverPagingBar1.dataGrid=DataGrid2;
                //flex 分页
                serverPagingBar1.pagingFunction=pagingFunction;
            }

protected function CompleteHandler(event:FlexEvent):void
   {
    DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI);
    DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI);
    serverPagingBar1.dataGrid=DataGrid2;
    //flex 分页
    serverPagingBar1.pagingFunction=pagingFunction;
   } 5 在监听到这两件事件之后，编写处理函数：removeUI 删除，update 编辑 .如下：

[html]
protected function updateUI(event:OperateEvent):void
            {
                var areaUI:AreaUI = PopUpManager.createPopUp(this,AreaUI) as AreaUI;
                areaUI.state = "update";
                areaUI.areaVo = event.data as AreaVo;
                PopUpManager.centerPopUp(areaUI);
            }

protected function updateUI(event:OperateEvent):void
   {
    var areaUI:AreaUI = PopUpManager.createPopUp(this,AreaUI) as AreaUI;
    areaUI.state = "update";
    areaUI.areaVo = event.data as AreaVo;
    PopUpManager.centerPopUp(areaUI);
   } [html] view plaincopyprint?protected function removeUI(event:OperateEvent):void
            {
                Alert.okLabel = '确定';
                Alert.cancelLabel = '取消';
                Alert.show("确定要删除该记录","确定删除该记录？",Alert.OK|Alert.CANCEL,this,removeFunction);
                recId = event.data.recNo;

            }

protected function removeUI(event:OperateEvent):void
   {
    Alert.okLabel = '确定';
    Alert.cancelLabel = '取消';
    Alert.show("确定要删除该记录","确定删除该记录？",Alert.OK|Alert.CANCEL,this,removeFunction);
    recId = event.data.recNo;

   } 结束！

在项目中需要做如一个如下图效果的这样一个功能：

需要在DataGrid的GridColumn列中加入按钮宣染器：

1 首先声明一个spark DataGrid.在最后一列中加入按钮宣染器，红色代码部分

[html]
s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
    s:columns>
            s:ArrayList>
                s:GridColumn headerText="地区名称" dataField="areaName" />
                s:GridColumn headerText="地区NO" dataField="areaNo" />
                s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
                SPAN style="COLOR: #ff0000"> s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/> /SPAN>
            /s:ArrayList>
    /s:columns>
/s:DataGrid>

s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
s:columns>
   s:ArrayList>
    s:GridColumn headerText="地区名称" dataField="areaName" />
    s:GridColumn headerText="地区NO" dataField="areaNo" />
    s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
    s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/>
   /s:ArrayList>
/s:columns>
/s:DataGrid> 2 在宣染器类GridItemRenderer中，有2个按钮，并且为这2个按钮，加了自定义事件，派发出去：

[java]
fx:Script>
        ![CDATA[
            import com.tm.event.OperateEvent;
            private function removeItem():void {
                trace(data);
                var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
                this.dispatchEvent(removeEvent);
            }

            private function updateItem():void {
                var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
                this.dispatchEvent(updateEvent);
            }
        ]]>
/fx:Script>

s:Button label="编辑" click="updateItem()"/>
s:Button label="删除" click="removeItem()"/>

[html]
protected function CompleteHandler(event:FlexEvent):void
            {
                SPAN style="COLOR: #cc0000"> DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI);
                DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI); /SPAN>
                serverPagingBar1.dataGrid=DataGrid2;
                //flex 分页
                serverPagingBar1.pagingFunction=pagingFunction;
            }

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Array Class const div flex HTML Import let post-format-gallery State this

若转载请注明出处：在DataGrid的GridColumn列中加入按钮宣染器
本文地址： https://pptw.com/jishu/586441.html

基于html5 localStorage的购物车JS脚本 [使用Html5 CfxixiJS制作APP]如何用iscroll制作水平滚动的List布局