首页 教程 API文档

数据表格组件

2015-10-30 13:53:27

属性


父模块 widget
Demo地址 DataGrid

描述


DataGrid是一个基于widget的数据表格组件

数据表格组件图片

成员列表


方法名称 成员类型 描述
each public 遍历表格的行数据
columnResizable public 表头可调整大小
selectionMode public 表格选择模式
valueFormat public value格式化类型
columnDroppable public 表头可拖动状态
columnSortable public 是否可通过表头对行排序
columnTextAlign public 表头文字对齐方式
cell public 获取指定单元格
column public 得到表头单元格
row public 获取指定行
queryRowByIndex public 通过索引号得到行
queryRowByID public 通过ID得到行
queryCellByColumnName public 通过表头名称得到单元格
queryCellByIndex public 通过索引号得到单元格
queryColumnByIndex public 通过索引号得到表头单元格
queryColumnIndexByName public 通过表头单元格名称查询索引号
computeRowIndexByCell public 通过单元格得到行的索引号
queryColumnByName public 通过名称查询表头单元格
rowIndex public 得到行索引号
rowCheckable public 行是否可被选中的
rowNumbers public 表格是否显示行号
headerVisible public 表头可见状态
contextMenu public 表格上下文菜单
stripeRows public 表格行间的斑马线
selectedRow public 当前已经选中的行
selectedCell public 当前已经选中的单元格
selectColumn public 选中表格中的指定列
updateCellByColumnName public 通过表头名称更新单元格
updateCellByIndex public 通过索引号更新单元格
updateRowByIndex public 通过索引号更新行
updateRowByID public 通过指定ID更新行
value public 表格value值读写
moveColumn public 对表格的列的位置进行移动
swapColumn public 交换表格列的位置
insertColumn public 在表格中插入列
sortColumn public 对表格指定列进行排序
appendColumn public 在表格中添加列
appendRow public 添加新的行
resetColumnClass public 重置表头单元格class名称
refresh public 刷新表格
repaint public 重绘表格数据
clearSelected public 清空所有选择项
removeColumn public 移除指定列
removeRow public 移除指定行
clear public 清空表格所有行
clearCellWidgets public 清空单元格上的widget组件
clearRowBlocks public 清空表格数据块

参数选项


名称 类型 默认值 描述
defaultClass String StdUI_DataGrid 数据表格组件的默认class名称
level Number 4 DataGrid所在layout中的等级
height Number 300 默认高度
minWidth Number 120 最小宽度
minHeight Number 60 最小高度
headerHeight Number 29 表头高度
headerVisible Boolean true 表头是否显示的
columnWidth Number 80 列的默认宽度
columnResizable Boolean true 是否点击列的表头单元格进行宽度调整
columnSortable Boolean false 是否可以点击列的表头单元格进行排序
columnTextAlign String left 表头单元格文字对齐方式
columnDroppable Boolean true 列是否可以进行位置拖动
columnEditable Boolean false 列的表头单元格是否可以编辑文字
rowHeight Number 30 行的高度
rowNumbers Boolean false 是否显示行号
rowCheckable Boolean false 行是否可以被勾选的(拥有勾选框)
rowCheckboxWidth Boolean 40 行勾选框所属列的宽度
cellPadding Number 3 单元格的边距
cellEditable Boolean false 单元格是否可以被编辑的
cellBorder Boolean false 单元格是否拥有border
cellTextAlign String left 单元格的文字对齐方式
contextMenu Object null 表格的上下文菜单
stripeRows Boolean false 表格行是否拥有斑马线,隔行变色
hoverMode String row 鼠标进入时候的状态,取值范围有row,cell
selectionMode String row

表格的选择模式(点击时候选中),取值范围有

名称 描述
row 点击行的时候,选中该行
rows 点击行的时候,选中该行,当按下ctrl键时,点击的行都会被选中
cell 点击单元格的时候,选中该单元格
cells 单击单元格的时候,选中该单元格,当按下ctrl键时,点击的单元格都会被选中
checkedRows 当行被勾选的时候,行会被选中
none 没有任何选中行为
items Array null 需要添加的表格行数据,对应appendRow方法
columns Array null 需要添加的表头数据,对应appendColumn方法
valueFormat String auto

value值的格式类型,当执行value方法获取值的时候,会按照指定的格式类型进行返回

取值范围有:

名称 描述
auto 自动
array 数组格式的数据
object Object对象格式的数据

事件


名称 回调参数 描述
clear 当清空表格时候,clear事件会被触发
selectionModeChange 改变的选择模式 当选择模式被改变的时候,selectionModeChange事件会被触发
cellChange

1.单元格的索引位置

2.单元格的文本

当单元格被编辑之后,cellChange事件会被触发
columnClick 表头单元格的索引号 当表头单元格被点击时候,columnClick事件会被触发
rowClick 行的位置 当行被点击的时候,rowClick事件会被触发
rowDblClick 行的位置 当行被双击的时候,将会触发rowDblClick事件
cellClick 单元格位置 单元格被点击时候触发的事件
columnDblClick 表头单元格索引号 当表头单元格双击时候,columnDblClick事件会被触发
cellDblClick 行的位置 双击单元格的时候触发cellDblClick事件
columnDropStart

1. 当前的x坐标

2. 当前的y坐标

当表头单元格开始拖动的时候会触发columnDropStart事件
columnDropStop

1. 当前的x坐标

2. 当前的y坐标

当表头单元格停止拖动的时候会触发columnDropStop事件
removeColumn 执行removeColumn方法时候传递的参数 当执行removeColumn方法移除表头单元格时候,该事件会被触发
removeRow 执行removeRow方法时候传递的参数 当执行removeRow方法移除行的时候,该事件会被触发

相关例子



Std.ui("DataGrid",{
    renderTo:"body",
    height:400,
    width:500,
    hoverMode:"cell",
    selectionMode:"column",
    stripeRows:true,
    rowNumbers:true,
    rowCheckable:true,
    cellEditable:true,
    columnSortable:true,
    css:{
        float:"left",
        marginRight:"5px"
    },
    columns:[
        {
            name:"a",
            text:"1",
            type:"template",
            template:new Std.template("<span style='color:red'>$<?=value?></span>")
        },{
            name:"b",
            text:"2"
        },{
            name:"c",
            text:"Sex",
            type:"widget",
            ui:"SwitchBox",
            width:180,
            option:{
                items:[
                    {text:"male",value:0},
                    {text:"female",value:1}
                ]
            },
            resizable:false
        },{
            name:"d",
            text:"LineEdit",
            type:"widget",
            ui:"LineEdit"
        },{
            name:"e",
            text:"切换"
        }
    ],
    items:[
        {
            cells:[
                a:1,b:2,c:0,d:"text",e:4
            ]
        },
        {
            cells:[
                a:2,b:3,c:1,d:"text1",e:4
            ]
        }
    ]
});