flex表格的使用

Flex中表格使用datagrid+columns两个组件构成,dagagrid中定义了表格的外观属性和数据源
Columns中定义了表格的列名还有对应的字段,方便从数据源取得数据

数据源的赋值一般有两种方法:
第一种:直接在datagrid中定义数据源
Var dataSource:ArrayCollection = new ArrayCollection(); //数据源的格式
<mx:DataGrid id = “grid” dataProvider="{dataSource}"> 通过这种直接绑定的形式获得数据源

第二种:外部赋值,通过id来确定数据源
Var dataSource:ArrayCollection = new ArrayCollection();
<ms:DataGrid id = “grid”>
grid.dataProvider = dataSource; //通过这种赋值的方式来获取数据源

表格的列
<mx:columns>
<mx:DataGriColumn headerText = “columnName” width = 88 dataField = “columnName”>
</mx:columns>
表格的列名是headerText,具体的值是由dataField从数据源中取得的

注:在<mx:DataGrid>中,还可以设置滚动条,双击事件,单击事件等,点击事件获得具体对象可以通过selectedItem这个对象获取。

时间: 2024-10-26 15:52:29

flex表格的使用的相关文章

Flex 使用列表和表格

Flex 设计了不同的控件来实现列表和表格,不仅能够将数据显示在表格和列表中,还可以实现对数据进行操纵,修改等更加强大的功能. 与列表和表格相关的控件如下所示: 列表控件(List Control):将数据显示在垂直的列表中. 水平列表控件(HorizontalList Control):与列表控件相似,水平列表控件是以水平的方式横向浏览数据. 片式列表控件(TileList Control):与上述两种列表控件类似,片式列表中不仅可以显示文字,数据,还可以显示该数据相关的图片. 组合框控件(C

flex布局构建大屏框架并支持翻页动画、滚动表格功能

本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效果图: 滚动列表效果图及核心代码: var myH = $(".tableBoy").height() + 10;//获取容器高度 确定可视区域 $(".tableBoy").css({ 'height': myH + "px", "overf

Flex 实现表格布局 (微信小程序)

微信小程序自己开发了一套 wxml + wxss,对许多 HTML 标签和 CSS 属性不支持. 不支持 table 标签,推荐使用 flex 布局. 自然而然的想法:flex 嵌套,效果还不错,贴代码如下: <view id="panel" class="flex-column"> <view class="flex-cell flex-row"> <text class="flex-cell flex-

flex 分页打印表格功能

private function printHandler():void{ var printJob:FlexPrintJob = new FlexPrintJob(); printJob.printAsBitmap = true; if (printJob.start()){ var myPrintData:PrintDataGrid=new PrintDataGrid(); var dataCol:DataGridColumn = new DataGridColumn(); dataCol.

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

实现表格分页

由于工作需要,经常在开发中需要实现表格分页这种特效,目的的为提升用户体验,减少大数据渲染数量. 分页的分两种,一种是要和服务器交互,另一种是一次性拿到所有数据,在本地做分页处理.本次主要谈论第二种. 分页原理很简单,无非就是数组切片. 最关键是这两句: var startRow = (currentPage - 1) * pageSize;  //currentPage 为当前页,pageSize为每页显示的数据量var endRow = currentPage * pageSize -1: 比

Ext.grid.Panel表格特性Feature

Ext.grid.feature.Feature是一类针对Ext.grid.Panel 的特殊插件,提供了可以被扩展的基本模板方法.子类包括: 1.Ext.grid.feature.RowBody 表格行体 行体特性为表格追加了tr标签,跨越了原始表格的所有列,在表格中展示一些描述性的特殊信息时非常有用,行体在默认状态下是隐藏的,如果需要展示行体必须覆盖getAdditionalData方法,代码如下: //Ext.grid.feature.RowBody示例 Ext.onReady(funct

ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2

运行效果: 此文介绍了根据操作左侧菜单在右面板展示相应内容. 一.主页 先看一下跳转主页的方式:由在webapp根目录下的index.jsp跳转至demo的index.jsp 下面是demo的index.jsp的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% response.setHeade

ExtJS4.2学习(15)树形表格

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html ------------------------------------------------------------------------------------------- 以下是完整代码: /** * Grid * 此js演示了ExtJS之树形表格 * 注意:在加载附件时要注意路径.如加载TreeStore——'tr