Flex Mobile 上的数据网格
Adobe 告诉我们不要使用 Datagrid< /a> 在移动设备上。我正在创建一个 Blackberry Playbook 应用程序,该应用程序具有更多的屏幕空间来显示数据表。那么有几个问题出现了!
如果我不应该使用 DataGrid,我应该使用什么? (列表不算数,因为在我的应用程序中,我有 10 个表,每个表都有不同的列数和列宽)
好吧,如果我必须使用 Datagrid,我如何设置它的大小以准确显示所有内容数据?例如,某些表的行长度不同,因此 requestedRowCount='-1' 似乎不起作用(参见下面的示例)
代码
<s:DataGrid requestedRowCount="-1" requestedColumnCount="-1" variableRowHeight="true" styleName="dataGrid" id="partiesGrid" dataProvider="{arr1}" skinClass="skins.DataGridSkin" click="navigator.pushView(view.AssessmentInvolvementEditView)">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="name" headerText="Name" width="150"/>
<s:GridColumn dataField="role" headerText="Role" width="150"/>
<s:GridColumn dataField="startdate" headerText="Start" width="100"/>
<s:GridColumn dataField="enddate" headerText="End" width="100"/>
<s:GridColumn dataField="presponsibility" headerText="Response" width="150"/>
<s:GridColumn dataField="pcarer" headerText="Carer" width="110"/>
<s:GridColumn dataField="kworker" headerText="Worker" width="110"/>
<s:GridColumn dataField="kteam" headerText="Team" width="110"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>`
结果(注意高度不适合 3 行,它增加了底部的空间)!
Adobe tells us to not use Datagrid on mobile devices. I'm creating a Blackberry Playbook application that has more screen space to potentially display a table of data. So a few questions arise!
If I shouldn't use DataGrid, what should I use? (List doesn't count because in my application I have 10's of tables each with different numbers of columns and column widths)
Ok, if I have to use a Datagrid, how can I set the size of it to show exactly all the data? For example, some tables have rows of different lengths, so requestedRowCount='-1' doesn't seem to work (See example below)
The Code
<s:DataGrid requestedRowCount="-1" requestedColumnCount="-1" variableRowHeight="true" styleName="dataGrid" id="partiesGrid" dataProvider="{arr1}" skinClass="skins.DataGridSkin" click="navigator.pushView(view.AssessmentInvolvementEditView)">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="name" headerText="Name" width="150"/>
<s:GridColumn dataField="role" headerText="Role" width="150"/>
<s:GridColumn dataField="startdate" headerText="Start" width="100"/>
<s:GridColumn dataField="enddate" headerText="End" width="100"/>
<s:GridColumn dataField="presponsibility" headerText="Response" width="150"/>
<s:GridColumn dataField="pcarer" headerText="Carer" width="110"/>
<s:GridColumn dataField="kworker" headerText="Worker" width="110"/>
<s:GridColumn dataField="kteam" headerText="Team" width="110"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>`
The Result (Notice how the height doesnt fit the 3 rows, it adds space at the bottom)!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
让数据网格仅显示添加的数据并非不可能,但这不是我会做的,特别是对于移动应用程序。
就个人而言,我会使用包裹在高度/宽度 100% 的 Scroller 中的 DataGroup(使用 virtualLayout=true)(仅在数据“溢出”时显示)。 DataGroups 默认设置为显示所有数据。您必须为数据创建自己的项目渲染器,并且可以创建自己的“标题”。
通过这样做,您将从网格中删除许多功能,但这是移动应用程序中很少使用的功能。另外,如果您创建数据组,您可以添加自己的触摸功能和手势来执行操作,同时保持网格的“权重”较低,以提供良好的用户体验。
It's not impossible to make the datagrid show only the data that's added, but it's not what I would do, especially for a mobile application.
Personally, I would use a DataGroup (using virtualLayout=true) wrapped in a Scroller set to height/width 100% (which would only show when the data 'overflows'). The DataGroups default settings to show all data. You'll have to create your own item renderers for the data and can create your own 'headers'.
By doing this, you're removing a lot of functionality from the grid, but it's something that's rarely used in mobile applications. Plus, if you create the datagroup, you can add your own touch functionality and gestures to do things, while keeping the 'weight' of the grid low to give a good user experience.
使用宽度=“100%”和高度=“100%”
use width="100%" and height="100%"