加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

Flex之旅--AdvancedDataGrid 修改树节点图标

发布时间：2020-12-15 04:11:31 所属栏目：百科 来源：网络整理
导读：Flex之旅--AdvancedDataGrid 修改树节点图标 分类： Flex开发 新的征程 2012-12-26 10:43 410人阅读 评论(0) 收藏 举报 ? ? ? ? 使用Flex AdvancedDataGrid可以在列表中展示树形结构，但默认的图标为文件夹及文件图标，如图。如果想修改图标，且只是简单替换

Flex之旅--AdvancedDataGrid 修改树节点图标

分类： Flex开发 新的征程 2012-12-26 10:43 410人阅读 评论(0) 收藏 举报

? ? ? ? 使用Flex AdvancedDataGrid可以在列表中展示树形结构，但默认的图标为文件夹及文件图标，如图。如果想修改图标，且只是简单替换默认图标可以使用如下方式：

[html] view plain copy
  1. <mx:AdvancedDataGrid?folderOpenIcon="@Embed('assets/images/open.jpg')"???
  2. ????????folderClosedIcon="@Embed('assets/images/close.jpg')"???
  3. ????????defaultLeafIcon="@Embed('assets/images/leaf.jpg')">??

? ? ? ??

? ? ? ? 但如果想根据数据不同，显示不同的图标会麻烦一些。如上图，要求不同部门显示不同图标，人员要根据职位显示不同图标。在测试过程中试过使用姓名列的itemRenderer，但这种方法只能改掉叶子节点的图标，非叶子节点的文件夹图标改不掉。后来试过直接使用AdvancedDataGrid的itemRenderer，但也没能实现想要的效果。最后还是从folderOpenIcon，folderClosedIcon，defaultLeafIcon入手，写一个类继承Image，根据数据不同赋不同的source值，代码如下：

[java] view plain copy
  1. package?com.demo??
  2. {??
  3. ????import?flash.events.Event;??
  4. ????import?mx.controls.Alert;??
  5. ????import?mx.controls.Image;??
  6. ????import?mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer;??
  7. ????import?mx.formatters.DateFormatter;??
  8. ??
  9. ????public?class?FolderAndLeafIcon?extends?Image??
  10. ????{??
  11. ????????[Embed(source="assets/images/employee.jpg")]?????
  12. ????????private?const?employee:Class;??
  13. ??????????
  14. ????????[Embed(source="assets/images/manager.jpg")]?????
  15. ????????private?const?manager:Class;??
  16. ??????????
  17. ????????[Embed(source="assets/images/renli.jpg")]?????
  18. ????????private?const?renli:Class;??
  19. ??????????
  20. ????????[Embed(source="assets/images/yanfa.jpg")]?????
  21. ????????private?const?yanfa:Class;??
  22. ??????????
  23. ????????public?function?FolderAndLeafIcon()??
  24. ????????{??
  25. ????????????super();??
  26. ????????????this.addEventListener(Event.ADDED_TO_STAGE,?setIconSource);??
  27. ????????}??
  28. ??????????
  29. ????????private?function?setIconSource(event:Event):void{??
  30. ????????????var?folderIcon:FolderAndLeafIcon?=?event.currentTarget?as?FolderAndLeafIcon;??
  31. ??????????????
  32. ????????????if(folderIcon){??
  33. ????????????????folderIcon.source?=?getIconSourceValue(folderIcon);??
  34. ????????????}??
  35. ????????}??
  36. ??????????
  37. ????????public?function?getIconSourceValue(folderIcon:FolderAndLeafIcon):Class{??
  38. ????????????var?advancedGridGroupItemRender:AdvancedDataGridGroupItemRenderer?=?folderIcon.parent?as?AdvancedDataGridGroupItemRenderer;??
  39. ????????????var?source:Class;??
  40. ??????????????
  41. ????????????if(advancedGridGroupItemRender){??
  42. ??????????????????
  43. ????????????????//?当advancedGridGroupItemRender.data包含dept，name,manager等属性时，当前是叶子节点??
  44. ????????????????if?(advancedGridGroupItemRender.data.hasOwnProperty("manager"))?{??
  45. ??????????????????????
  46. ????????????????????var?m:int?=?advancedGridGroupItemRender.data.manager;??
  47. ??????????????????????
  48. ????????????????????if?(m?==?1)?{??
  49. ????????????????????????source?=?manager;??
  50. ????????????????????}??
  51. ????????????????????else?if?(m?==?0)?{??
  52. ????????????????????????source?=?employee;??
  53. ????????????????????}??
  54. ????????????????}??
  55. ????????????????else?{??//?非叶子节点??
  56. ????????????????????var?dept:String?=?advancedGridGroupItemRender.listData.label;??
  57. ??????????????????
  58. ????????????????????if?(dept?==?"人力")?{??
  59. ????????????????????????source?=?renli;??
  60. ????????????????????}??
  61. ????????????????????else?if?(dept?==?"研发")?{??
  62. ????????????????????????source?=?yanfa;??
  63. ????????????????????}??
  64. ????????????????}??
  65. ????????????}??
  66. ??????????????
  67. ????????????return?source;??
  68. ????????}??
  69. ????}??
  70. }??
? ? ? ? 上面代码获得advancedGridGroupItemRender是关键，还有就是怎样获得数据也是关键，advancedGridGroupItemRender.listData.label获得的是当前单元格的文本内容，advancedGridGroupItemRender.data获得的是当前行的数据。非叶子节点时advancedGridGroupItemRender.data得到的行数据是空的，只能通过advancedGridGroupItemRender.listData.label得到当前单元格文本内容。测试时在这个地方花费了很多时间，一直得不到data中的属性值。 ? ?

? ? ? ? 下面看一下调用的代码(注意第一列不能设置visible="false"，否则无法显示数据)：

[html] view plain copy
  1. <fx:Declarations>??
  2. ????<mx:GroupingCollection?id="gc"?source="{dataSource}">????
  3. ????????<mx:Grouping>????
  4. ????????????<mx:GroupingField?name="dept"/>????
  5. ????????</mx:Grouping>????
  6. ????</mx:GroupingCollection>???
  7. </fx:Declarations>??
  8. ??
  9. <fx:Script>??
  10. ????<![CDATA[?
  11. ????????import?com.demo.FolderAndLeafIcon;?
  12. ?????????
  13. ????????import?mx.collections.ArrayCollection;?
  14. ????????[Bindable]?
  15. ????????public?var?dataSource:ArrayCollection?=?new?ArrayCollection([?
  16. ????????????{dept:"人力",?name:"张三",?sex:0,?age:25,?telnumber:"123456",?manager:1},?
  17. ????????????{dept:"人力",?name:"李四",?sex:1,?age:20,?manager:0},?
  18. ????????????{dept:"研发",?name:"王五",?age:21,?
  19. ????????????{dept:"研发",?name:"赵六",?age:22,?name:"钱七",?age:23,?manager:0}?
  20. ????????]);?
  21. ????]]>??
  22. </fx:Script>??
  23. ??
  24. <mx:AdvancedDataGrid?dataProvider="{gc}"?initialize="gc.refresh()"?defaultLeafIcon="{FolderAndLeafIcon}"??
  25. ?????????????????????folderOpenIcon="{FolderAndLeafIcon}"?folderClosedIcon="{FolderAndLeafIcon}"?>??
  26. ????<mx:columns>??
  27. ????????<mx:AdvancedDataGridColumn?headerText="姓名"?dataField="name"??/>??
  28. ????????<mx:AdvancedDataGridColumn?headerText="性别"?dataField="sex"?itemRenderer="com.demo.SexRenderer"/>??
  29. ????????<mx:AdvancedDataGridColumn?headerText="年龄"?dataField="age"?textAlign="center"/>??
  30. ????????<mx:AdvancedDataGridColumn?headerText="电话"?dataField="telnumber"?textAlign="center"/>??
  31. ????</mx:columns>??
  32. </mx:AdvancedDataGrid>??
? ? ? ? 上面性别列定义了itemRenderer，显示图片，代码如下：
[html] view plain copy
  1. <s:MXAdvancedDataGridItemRenderer?xmlns:fx="http://ns.adobe.com/mxml/2009"???
  2. ??????????????????????????????????xmlns:s="library://ns.adobe.com/flex/spark"???
  3. ??????????????????????????????????xmlns:mx="library://ns.adobe.com/flex/mx"???
  4. ??????????????????????????????????focusEnabled="true">??
  5. ??????
  6. ????<fx:Script>??
  7. ????????<![CDATA[?
  8. ????????????import?mx.controls.Alert;?
  9. ????????????[Embed(source="assets/images/male.jpg")]????
  10. ????????????private?const?male:Class;????
  11. ?????????????
  12. ????????????[Embed(source="assets/images/female.jpg")]????
  13. ????????????private?const?female:Class;??
  14. ?????????????
  15. ????????????private?function?getIcon(sex:String):Class?{?
  16. ?????????????????
  17. ????????????????if?(sex?==?"1")?{?
  18. ????????????????????return?male;?
  19. ????????????????}?
  20. ????????????????else?if?(sex?==?"0"){?
  21. ????????????????????return?female;?
  22. ????????????????}?
  23. ????????????????else?{?
  24. ????????????????????return?null;?
  25. ????????????????}?
  26. ????????????}?
  27. ?????????????
  28. ????????????private?function?getIcon1(data:Object):Class?{?
  29. ?????????????????
  30. ????????????????if?(data.sex?==?1)?{?
  31. ????????????????????return?male;?
  32. ????????????????}?
  33. ????????????????else?if?(data.sex?==?0){?
  34. ????????????????????return?female;?
  35. ????????????????}?
  36. ????????????????else?{?
  37. ????????????????????return?null;?
  38. ????????????????}?
  39. ????????????}?
  40. ????????]]>??
  41. ????</fx:Script>??
  42. ????<s:layout>??
  43. ????????<s:HorizontalLayout?verticalAlign="middle"?horizontalAlign="center"?/>??
  44. ????</s:layout>??
  45. ????<mx:Image?source="{getIcon(listData.label)}"/>??
  46. ????<!--<mx:Image?source="{getIcon1(data)}"/>-->??
  47. </s:MXAdvancedDataGridItemRenderer>??
? ? ? ? 上面代码使用两个方法获得图片，一个是通过data，一个是listData.label，还是前面说的，data是当前行数据，listData.label是当前单元格文本。最后效果如下图：



? ? ? ? 追加简单方法：

? ? ? ? 发现一简单方法，AdvancedDataGrid有个iconFunction属性，类型是function，自己定义一个function返回图标。现在可以删掉defaultLeafIcon，folderOpenIcon，folderClosedIcon，添加iconFunction="getIcon"，执行效果和前面一样。

[java] view plain copy
  1. private?function?getIcon(item:Object):Class?{??
  2. ??????
  3. ????var?source:Class;??
  4. ??????
  5. ????//?如果是非叶子节点，则item存在GroupLabel属性，值为节点文字内容??
  6. ????if?(item.GroupLabel?==?"人力")?{??
  7. ????????source?=?renli;??
  8. ????}??
  9. ????else?if?(item.GroupLabel?==?"研发")?{??
  10. ????????source?=?yanfa;??
  11. ????}??
  12. ????else?{??//?叶子节点时item为当前行数据??
  13. ????????if?(item.manager?==?1)?{??
  14. ????????????source?=?manager;??
  15. ????????}??
  16. ????????else?if?(item.manager?==?0)?{??
  17. ????????????source?=?employee;??
  18. ????????}??
  19. ????}??
  20. ??????
  21. ????return?source;??
  22. }??
下图为debug模式下，item对象数据内容：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同