Flex DataGrid自动编号怎么实现？附详细示例代码教程

我们会重点讲“用列渲染器（itemRenderer）结合数据索引生成动态序号”的核心方法，还会解决大家常踩的“分页/筛选后序号重置”“数据更新时序号不自动刷新”这些坑。更省心的是，文中附了完整可直接复制的示例代码，变量和逻辑注释得明明白白，就算是刚接触Flex的新手，跟着改改参数就能用到自己项目里。

不管你是要做简单的表格序号，还是复杂的数据动态更新场景，看完这篇都能搞定，再也不用对着文档瞎琢磨啦！

你有没有过用Flex DataGrid做数据表格时，序号要么得手动一个个输，要么删了一行后后面的序号全乱成一锅粥的情况？我去年帮做企业后台的朋友调这个功能时，他就卡在这里——数据一更新，序号要么重复要么断层，用户投诉说表格看着像没整理过的草稿。后来我帮他用列渲染器加数据索引的方法搞定了，现在他的后台表格序号从来没再出过错。今天就把这个亲测有效的办法拆开来给你讲，连刚接触Flex的新手都能跟着做。

为什么Flex DataGrid自动编号总出错？先搞懂底层逻辑

要解决问题，得先明白问题出在哪。Flex DataGrid的核心是数据源——它显示的数据来自一个集合（比如ArrayCollection、PagedCollectionView），而集合里的每一条数据，本身并没有“序号”这个属性。你要是手动在数据源里加个“index”字段，每次增删数据都循环修改所有元素的“index”值，看起来是能实现序号，但有两个致命问题：

第一，性能差：数据多的时候（比如1000条以上），循环修改会让界面卡半天——我第一次做的时候就踩过这个坑，当时用户导入了500条数据，点删除按钮后等了3秒才反应过来，差点被骂；

第二，场景覆盖不全：如果用了分页、筛选或者排序功能，手动加的“index”不会自动更新——比如分页到第二页，序号应该从11开始，但手动加的“index”还是从1开始，完全不对。

后来我查Adobe官方文档（Adobe Flex 4开发指南）才搞懂：Flex的ItemRenderer（项渲染器）可以直接获取当前数据项在集合中的位置索引，根本不用改数据源。简单说，就是“让表格的序号列自己算当前行的位置，不用数据源瞎掺和”——这才是自动编号的正确思路。

一步一步做：Flex DataGrid自动编号的具体实现

接下来直接上实操，我把步骤拆成“准备数据源→配置序号列→处理特殊场景”，每一步都给你代码和解释，跟着做就行。

你得有一个存数据的集合——比如用ArrayCollection存用户信息，代码大概长这样：

 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable] private var userList:ArrayCollection = new ArrayCollection([
 {name:"张三", age:25, job:"产品经理"},
 {name:"李四", age:30, job:"程序员"},
 {name:"王五", age:28, job:"设计师"}
 ]);
 ]]>

这里的userList就是DataGrid的数据源，里面只有“姓名、年龄、职业”三个字段，没有序号——没关系，后面让序号列自己算。

接下来配置DataGrid的列，重点是序号列要用到itemRenderer。直接看代码：

 <!-
序号列：用ItemRenderer获取索引 >



 <!-
这里的data是当前行的数据项，dataGrid是外层DataGrid的引用 >
 
 textAlign="center" />



 <!-
其他列正常配置 >

重点解释一下序号列的text属性：

这一步做完，你运行代码会发现——序号已经自动生成了！而且增删数据时，序号会自动更新：比如删了“李四”那行，“王五”的序号会从3变成2，完全不用你手动改。

很多人做完第二步，一用分页或者筛选就懵了——比如用PagedCollectionView分页，第二页的序号又从1开始了，这显然不对。别慌，只需要加个分页计算就行。

你得用PagedCollectionView包装数据源（实现分页）：

 <![CDATA[
 import mx.collections.ArrayCollection;
 import mx.collections.PagedCollectionView;
 [Bindable] private var userList:ArrayCollection = new ArrayCollection([/ 数据同上 /]);
 // 分页集合：每页显示2条
 [Bindable] private var pagedUserList:PagedCollectionView = new PagedCollectionView(userList);
 private function init():void {
 pagedUserList.pageSize = 2; // 每页2条
 }
 ]]>

然后把DataGrid的dataProvider改成pagedUserList，再修改序号列的text：

<label text="{(outerDocument.pagedUserList.currentPage 
1)  outerDocument.pagedUserList.pageSize + outerDocument.userDataGrid.dataProvider.getItemIndex(data) + 1}">
 textAlign="center" />

解释一下：

这样分页后，序号就会连续了——第一页是1、2，第二页是3、4，完全符合用户预期。我朋友当时就是卡在分页这里，加了这段计算后，问题立马解决了。

最后：验证方法+常见坑提醒

做完之后，一定要验证这3个场景，确保没问题：

另外还有个小坑要提醒你：如果你的DataGrid用了sortableColumns="true"（可排序），排序后序号会不会乱？放心，不会——因为getItemIndex(data)拿到的是排序后的索引，所以序号会跟着排序结果自动调整。我之前特意试了排序姓名，序号从1到3跟着变，完全没问题。

最后再给你整理个方法对比表，帮你快速选对方案：

现在你跟着做，应该就能搞定Flex DataGrid的自动编号了。要是遇到代码报错或者场景没覆盖到，欢迎在评论区留个言——我帮你看看。或者你有别的更巧的办法，也可以分享出来，咱们一起完善这个方案~

手动给数据源加“index”字段做序号，为什么总出问题？

手动加“index”字段其实是绕了远路，首先性能特别差——如果数据有1000条以上，每次增删都要循环修改所有元素的“index”值，界面会卡顿半天，我第一次做的时候就踩过这坑，用户导入500条数据后删一行，等了3秒才反应过来。其次场景覆盖不全，要是用了分页、筛选或者排序，手动加的“index”不会自动更新，比如分页到第二页，序号应该从11开始，但手动加的还是从1开始，完全不对。

分页后Flex DataGrid的序号怎么保持连续？

分页的关键是算准“当前页之前的总条数”，得用PagedCollectionView的两个属性：currentPage（当前页码）和pageSize（每页条数）。具体公式是“(currentPage

YUANLEISVIP

收藏 链接