Question

我在flex中有这段代码：

<mx:Application ... >
....
<mx:DataGrid id="filtros" styleName="grid" rowCount="10" dataProvider="{_larcFiltros}" allowMultipleSelection="true" >
            <mx:columns>
            <mx:DataGridColumn dataField="titulo" textAlign="left">
              <mx:headerRenderer>
                <mx:Component>              
                  <mx:HBox width="100%" horizontalAlign="left" >                       
                    <mx:CheckBox click="outerDocument._mCheckAll(0)" />
                    <mx:Label text="Título" />
                  </mx:HBox>              
                </mx:Component> 
              </mx:headerRenderer>          
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Descripción" dataField="resumen"/>
...
</mx:Application>

当我单击复选框时，我不希望列进行排序，但是当我在复选框外单击时，在我要排序的标题中。如何在单击标题时单击复选框或复选框外部来查看？

有什么想法吗？

非常感谢！

Answer 1

将按钮放在DataGridColumn的headerrender中时遇到了类似的问题。如果单击该按钮，我想阻止列排序，否则如果单击标题内的任何其他位置，我希望列正常排序。

我的解决方案是通过向headerrenderer添加一个公共属性来完成的，该公共属性指示鼠标是否位于按钮上或标题的其余部分：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
mouseDown="{handleMouseClick(event);}"
width="100%" height="100%">
<mx:Script>
    <![CDATA[
        import mx.controls.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        [Embed(source="assets/images/search-icon-small.png")]
        [Bindable] private var searchIcon:Class;

        [Bindable] private var _headerText:String;
        [Bindable] public var searchClicked:Boolean = false;

        override public function set data(value:Object):void {
            if (value)
                this._headerText = (value as DataGridColumn).headerText;    
        }   

        private function handleMouseClick(e:MouseEvent):void {
            searchClicked = e.target is Button;
        }           
    ]]>
</mx:Script>
<mx:Label id="lbl_header" text="{_headerText}"/>
<mx:Button icon="{searchIcon}" height="20" width="20" right="20" mouseDownOutside="{searchClicked = false}" mouseDown="{searchClicked = true}"/>

在父应用程序上，侦听datagrid的headerRelease事件（代码缩写）：

    <mx:DataGrid id="dg_members" headerRelease="{handleSort(event);}"/>

    private function handleSort(e:DataGridEvent):void {
     if ((e.itemRenderer as SearchHeader).searchClicked)
         e.preventDefault();
 }

可能有更优雅的解决方案，但这很快而且很脏。

Answer 2

Improvement to the earlier answer

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseDown="{handleClick(event)}">
    <mx:Script>
       <![CDATA[
        import mx.core.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        private var column : DataGridColumn;

        private function handleClick(e:MouseEvent) : void {

            if(e.target is Button){
                e.stopPropagation();
            }            
        }


        override public function set data(value:Object):void {
            column = value as DataGridColumn
            headerBtn.label = (value as DataGridColumn).headerText;
        }

        private function btnClick(event:MouseEvent):void{
                //do something
        }

    ]]>
   </mx:Script>
   <mx:Button id="headerBtn" click="{btnClick(event)}" />
</mx:Canvas>

Answer 3

添加事件侦听器以进行单击并检查event.target类型是否为CheckBox：

替换它：

<mx:CheckBox click="outerDocument._mCheckAll(0)" />

带

<mx:CheckBox click="onHeaderClick(event)" />

并实现onHeaderClick方法

private function onHeaderClick(event:MouseEvent):void
{
    if(event.target is CheckBox) {
        trace("Checkbox was clicked");
    } else {
        trace("Column was clicked");
    }
}

Answer 4

这是zhaupin解决方案的更清晰版本，不需要在headerRender之外进行任何修改。在渲染器中设置数据时，存储此渲染器所用的列，然后根据单击目标切换列的可排序性。

标题渲染器中的

：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseDown="{handleClick(event)}">
    <mx:Script>
       <![CDATA[
        import mx.core.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        private var column : DataGridColumn;

        private function handleClick(e:MouseEvent) : void {

            if(e.target is Button){
                column.sortable = false;
            }
            else{
                column.sortable = true;
            }
        }


        override public function set data(value:Object):void {
            column = value as DataGridColumn
            headerBtn.label = (value as DataGridColumn).headerText;
        }

        private function btnClick(event:MouseEvent):void{
                //do something
        }

    ]]>
   </mx:Script>
   <mx:Button id="headerBtn" click="{btnClick(event)}" />
</mx:Canvas>

如果您将其用于除按钮之外的任何其他组件，只需更换按钮即可使用您正在使用的组件。

标题中其他对象上的任何单击侦听器仍将触发（例如btnClick here）以及此handleClick函数，因此这些函数仍将正常运行。

Datagrid - 当push headerRenderer复选框时，停止事件HEADER_RELEASE

4 个答案: