给DataGrid加一个自动序列rowIndex的列

转载 2012年03月31日 22:14:34

给DataGrid加一个自动序列rowIndex的列 - 阿蔡 - 古越之地

在桌面应用程序开发的时候,我们经常会给DataGrid或者表格的第一列加上行序列号,以此给用户一个提示当前数据所在的行号,就类似于Excel的左边列。Flex的DataGrid并没有自动提供这样的属性。那么如何解决这个问题呢,方法有很多种,我们可以在DataGrid的数据源dataProvider中添加这样的行序列号,这个方法的弊端就是这个序列号和行数据(row data)绑定在一起,当DataGrid经过排序后,这个序列号就面目全非了。

删除(在这里我提供一个更加简单实用的方法。利用的就是DataGridColunm的listData属性,该属性有一个rowIndex。

效果图如上,第一列的索引(index)是独立于数据源dataProvider的,而且其他DataGridColumn的排序也不会影响第一列序号的正确性。利用下面的两行代码就能实现这一的效果。)

【编辑修改】

经过测试,发现一个bug,当数据多出现竖向滚动条时,下一屏的索引出错。

用另外一种更加直接简单的办法是用labelFunction和dataProvider数据源的获取当前索引号方法可以解决。

最新代码如下:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">     

<mx:Script>

<![CDATA[

      import mx.events.FlexEvent;

      import mx.events.ScrollEvent;

      import mx.controls.dataGridClasses.DataGridColumn;

      import mx.collections.XMLListCollection;

      import mx.collections.ArrayCollection;

      privatevar xml:XML = <root>

            <vo region='southwest1' name='name1' id='id1' actual='111' estimate='1111'/>

            <vo region='southwest2' name='name2' id='id2' actual='222' estimate='2222'/>

            <vo region='southwest3' name='name3' id='id3' actual='333' estimate='3333'/>

            <vo region='southwest4' name='name4' id='id4' actual='444' estimate='4444'/>

            <vo region='southwest5' name='name5' id='id5' actual='555' estimate='5555'/>

            <vo region='southwest6' name='name6' id='id6' actual='666' estimate='6666'/>

            <vo region='southwest7' name='name7' id='id7' actual='777' estimate='7777'/>

            <vo region='southwest8' name='name8' id='id8' actual='888' estimate='8888'/>

            <vo region='southwest9' name='name9' id='id9' actual='999' estimate='9999'/>

            <vo region='southwest' name='name10' id='id10' actual='111' estimate='3333'/>

            <vo region='southwest' name='name11' id='id11' actual='111' estimate='3333'/>

            </root>;

      [Bindable]

      privatevar dpFlat:XMLListCollection = new XMLListCollection(xml.vo);

     

      privatefunction LabFunc(item:Object, column:DataGridColumn):String

      {

            return ((dpFlat.getItemIndex(item)+1).toString());

      }

]]>

</mx:Script>

      <mx:DataGrid id="myADG" dataProvider="{dpFlat}" horizontalScrollPolicy="auto"

      width="100%" height="100%" minWidth="500">           

      <mx:columns>

            <mx:DataGridColumn labelFunction="LabFunc" width="30" minWidth="10" sortable="false" headerText="NO." resizable="false"/>

            <mx:DataGridColumn dataField="@region" headerText="Region" />                

            <mx:DataGridColumn dataField="@name" headerText="Name"/>

            <mx:DataGridColumn dataField="@id" headerText="Id"/>

            <mx:DataGridColumn dataField="@actual" headerText="Actual"/>

            <mx:DataGridColumn dataField="@estimate" headerText="Estimate"/>                               

      </mx:columns>

</mx:DataGrid>         

</mx:Application>

源码下载 | Sample下载

----------------------------------------老的代码如下,存在bug-------------------------------------:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

      import mx.controls.dataGridClasses.DataGridColumn;

      import mx.collections.XMLListCollection;

      import mx.collections.ArrayCollection;

      privatevar xml:XML = <root>

            <vo region='southwest1' name='name1' id='id1' actual='111' estimate='1111'/>

            <vo region='southwest2' name='name2' id='id2' actual='222' estimate='2222'/>

            <vo region='southwest3' name='name3' id='id3' actual='333' estimate='3333'/>

            <vo region='southwest4' name='name4' id='id4' actual='444' estimate='4444'/>

            <vo region='southwest5' name='name5' id='id5' actual='555' estimate='5555'/>

            <vo region='southwest6' name='name6' id='id6' actual='666' estimate='6666'/>

            <vo region='southwest7' name='name7' id='id7' actual='777' estimate='7777'/>

            <vo region='southwest8' name='name8' id='id8' actual='888' estimate='8888'/>

            <vo region='southwest9' name='name9' id='id9' actual='999' estimate='9999'/>

            <vo region='southwest' name='name10' id='id10' actual='111' estimate='3333'/>

            <vo region='southwest' name='name11' id='id11' actual='111' estimate='3333'/>

            </root>;

      [Bindable]

      privatevar dpFlat:XMLListCollection = new XMLListCollection(xml.vo);

     

]]>

</mx:Script>

<mx:DataGrid id="myADG" dataProvider="{dpFlat}" horizontalScrollPolicy="auto"

      width="100%" height="100%" minWidth="500">           

      <mx:columns>

            <mx:DataGridColumn width="30" minWidth="10" sortable="false" headerText="NO." resizable="false">

            <mx:itemRenderer>

            <mx:Component>

                  <mx:DataGridItemRenderer>

                  <mx:Script>

                  <![CDATA[

                        import mx.controls.dataGridClasses.DataGridListData;

                        overridepublicfunctionset data(value:Object):void{

                              super.data = value;

                              var dgListData:DataGridListData = listData as DataGridListData;

                              dgListData.label = (dgListData.rowIndex+1).toString();                                                                        }

                  ]]>

                  </mx:Script>

                  </mx:DataGridItemRenderer>

            </mx:Component>

            </mx:itemRenderer>

            </mx:DataGridColumn>

            <mx:DataGridColumn dataField="@region" headerText="Region" />                

            <mx:DataGridColumn dataField="@name" headerText="Name"/>

            <mx:DataGridColumn dataField="@id" headerText="Id"/>

            <mx:DataGridColumn dataField="@actual" headerText="Actual"/>

            <mx:DataGridColumn dataField="@estimate" headerText="Estimate"/>                               

      </mx:columns>

</mx:DataGrid>         

</mx:Application>

注意粗体的两行代码。

转载:http://wmcai.blog.163.com/blog/static/480242008111115724283/

相关文章推荐

给DATAGRID控件生成的列表添加序号

我用的数据库是ACCESS 2003,查了好多资料才知道ACCESS用的是JET SQL,而SQL SERVER 用的是T-SQL,有很大差别,JET SQL是相当烂的,很多不支持,本来想用dec...

請問EXT GRID 如何通過rowIndex和columnIndex改變列內容?

如下拿出行列出來后請問如何根據這個值改變對應單元格的內容?   function cellclick(grid, rowIndex, columnIndex, e) { v...
  • e_wsq
  • e_wsq
  • 2012年01月07日 01:10
  • 841

绑定adodc的datagrid自动调整列宽

  • 2014年10月06日 17:10
  • 1KB
  • 下载

winform中自动调节datagrid列宽(c#)

  • 2007年12月18日 10:11
  • 37KB
  • 下载

在DataGrid里面绑定ComboBox列时无法在编辑模板下默认选中一个备选值的一种解决方法

今天同事遇到一个关于DataGrid模板列里添加一个ComboBox控件的问题。 大致的情景如下面的截图所示: William的性别是Male,但是当双击性别列(它是一个带有ComboBo...
  • Neils03
  • Neils03
  • 2013年01月30日 13:08
  • 1652

esayui datagrid 列内容超长自动换行

列自动换行 其实很简单 首先 datagrid 增加 nowrap: false 属性, 然后重写     datagrid-cell         .datagrid-cell      ...
  • csvszhy
  • csvszhy
  • 2015年11月12日 17:30
  • 359

Flex DataGrid 自动设置列宽

最近项目中用datagrid. 不爽的是列太多了, 他又不能自动设置列宽, 一个一个设置也不知道多宽为妙, 于是写了个自动设置列宽的方法, 希望用到的可以参考, 不明白的留言, 呵呵!       ...

easyui datagrid 列的内容超出所定义的列宽时,自动换行

定义表单  nowrap="false" pagination : true, // 当true时在DataGrid底部显示一个分页工具栏。默认false  rownumbers : tr...
  • china165
  • china165
  • 2015年02月03日 09:23
  • 12156

RDIFramework.NET框架Web中datagrid与treegrid控件自动生成右键菜单与列标题右键菜单

在实际应用中常可以看到数据展示控件有右键菜单的功能,对应的列标题也可以右键弹出快捷菜单设置指定列的显示与隐藏等功能。在我们的RDIFramework.NET Web框架中,只要是使用了EasyUI的D...

给Repeater、Datalist和Datagrid增加自动编号列

给Repeater、Datalist和Datagrid增加自动编号列 号 内容 1 Taye 2 BOx 3 Glass 4 Sta...
  • lfzjky
  • lfzjky
  • 2011年11月11日 14:38
  • 292
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:给DataGrid加一个自动序列rowIndex的列
举报原因:
原因补充:

(最多只允许输入30个字)