FlexDataGrid实现列中下拉列表与行勾选功能
Flex 框架的 DataGrid 里想加点交互功能？像在列中加个下拉列表、让用户勾选每行数据，其实都不难，关键是搞懂itemRenderer的玩法。
Flex 的 DataGrid 可以说是老牌的表格控件了，展示数据稳得。而它最大的好处，就是你可以在每列自定义渲染器。比如在某列放个ComboBox，让用户点一下就能选值；在每行前头放个CheckBox，勾上就表示选中，适合做多选操作。
实现下拉列表这块，建议自定义一个ItemRenderer组件，继承SkinnableComponent或ListBase都行。里面放个ComboBox，用data绑定当前行的数据项，记得监听change事件更新数据模型。
像这样写监听函数就挺实用：
private function onComboBoxChange(event:Event):void {
data.values = event.target.selectedItem.value;
}再说行勾选，也就是CheckBox那一套，逻辑上差不多。定义个CheckBoxItemRenderer，勾选状态绑到data.isChecked，监听change事件响应业务逻辑，像是批量删除、批量修改这种。
参考代码如下：
private function onCheckBoxChange(event:Event):void {
data.isChecked = event.target.selected;
// 触发业务逻辑或事件
}别忘了把这俩渲染器应用到 DataGrid 的对应columns上，设置itemRenderer属性就行。搞定之后，每一行都有下拉和复选框，用户操作也直观，交互体验一下子就上来了。
如果你用 Flex 在做数据交互的项目，不妨试试这种玩法，灵活又实用。想拓展点功能？加点提示、校验、联动逻辑都不难，关键是上手先熟练这两个组件。
文件大小：22.24KB
评论区