构建 DataGrid 类的新实例。
全称 | mx.datacontrols.DataGrid |
命名空间 | mx.datacontrols |
类 | DataGrid |
继承层次结构 | DataGridPagedControlControl |
源文件 | ~\mx\scripts\datacontrols\DataGrid.js |
JavaScript 代码 |
var dataGrid = new mx.datacontrols.DataGrid({
baseUrl: "http://bruce-pc:8892/mx/rest/getData"
}); |
JavaScript 代码 |
//创建一个带查询框的表格,查询框有姓名,学校,学院,性别四个查询条件,其中性别查询条件为下拉框。
var dataGrid = new mx.datacontrols.DataGrid({
baseUrl: "http://bruce-pc:8892/mx/rest/getData",
searchBox: {
initHidden: false,
fields: [
{
name: "name",
caption: "姓名"
},
{
name: "school",
caption: "学校"
},
{
name: "xueyuan",
caption: "学院"
},
{
name: "sex",
caption: "性别" ,
editorType: "DropDownEditor"
}
]
}
}); |
JavaScript 代码 |
//创建一个每页10条数据,列允许排序,第一列显示 CheckBox,不显示表格列分割线的表格。
var dataGrid = new mx.datacontrols.DataGrid({
baseUrl: "http://bruce-pc:8892/mx/rest/getData",
displayColSplitLine: false,//不显示表格列分割线
pageSize: 10,//每页10条数据
height:"80%",
allowSorting:true,//列允许排序
displayCheckBox:true,//第一列显示 CheckBox
columns: [
{
name: "name",
caption: "姓名",
width:150,
align:"right",
dataAlign:"center"
},
{
name: "school",
caption: "学校"
},
{
name: "xueyuan",
caption: "学院"
}
]
}); |
JavaScript 代码 |
//创建一个姓名列列头标题靠右显示,数据居中显示的表格,宽度为150px。
var dataGrid = new mx.datacontrols.DataGrid({
baseUrl: "http://bruce-pc:8892/mx/rest/getData",
columns: [
{
name: "name",
caption: "姓名",
width:150,
align:"right",
dataAlign:"center"
},
{
name: "school",
caption: "学校"
},
{
name: "xueyuan",
caption: "学院"
}
]
}); |
JavaScript 代码 |
//创建一个可编辑的表格,性别列的值为“1”时,显示为“男”,否则显示为“女”。并且性别列进行编辑时显示为下拉框。其他默认为文本框。
var sexData = [
{ text: "男", value: "1" },
{ text: "女", value: "2" }
];
var dataGrid = new mx.datacontrols.DataGrid({
baseUrl: "http://bruce-pc:8892/mx/rest/getData",
allowEditing: true,
columns: [
{
name: "name",
caption: "姓名",
width:150,
align:"right",
dataAlign:"center"
},
{
name: "school",
caption: "学校"
},
{
name: "xueyuan",
caption: "学院"
{
name: "sex", caption: "性别",
width:"auto",
renderCell: function(p_item, $p_cell)
{
var value = null;
if (parseInt(p_item.getValue("sex")) == 1)
{
value = "男";
}
else
{
value = "女";
}
$p_cell.text(value);
},
editorType: "DropDownEditor",
editor: {items: sexData}
}
]
}); |
名称 | 说明 |
DataGrid() | 构建 DataGrid 类的新实例。 |
名称 | 说明 |
init() |
名称 | 说明 |
activeEditor | 获取当前表格激活的编辑器,如果没有,返回null |
alias | 获取或设置一个字符串,表示控件的别名。 |
allowAdjusting | 获取或设置一个 Boolean 值,该值表示是否可以调整 DataGrid 控件中列的宽度。如果该值为 true,表示可以调整;反之则不可以。 |
allowDraggingColumn | 获取或设置一个 Boolean 值,该值表示是否可以调整 DataGrid 控件中的列头的顺序。如果该值为 true,表示可以调整;反之则不可以。 |
allowDraggingItem | 获取或设置一个 Boolean 值,该值表示是否可以拖动 {@link mx.datacontrols.DataGrid.DataGridItem} 项。 |
allowDraging | 获取或设置一个 Boolean 值,该值表示是否可以调整 DataGrid 控件中列的宽度。如果该值为 true,表示可以调整;反之则不可以。 该属性和 allowDraggingColumn 属性意义相同。 |
allowEditing | 获取一个 Boolean 值,表示表格控件是否允许编辑。 |
allowInterlacedRow | 获取或设置一个 Boolean 值,表示表格是否要隔行变色。 |
allowMultipleSorting | 获取或设置一个 Boolean 值,表示是否允许多列排序。 |
allowPaging | 获取和设置一个 Boolean 值,表示是否可以分页。 |
allowSorting | 获取或设置一个 Boolean 值,表示所有列是否允许排序。 |
autoSelect | 获取或设置一个值,表示当列表中没有选中项的时候,是否自动选择第一个数据项。如果该值为 true,则自动选择;反之则不自动选择。 |
autoWrap | 获取或设置表格数据行是否自动换行。 |
baseUrl | 请参见 EntityContainer.baseUrl 属性。如果 DataGrid 的 entityContainer 由外界创建,那么该属性不需要设置; 否则需要设置该属性的值。 |
border | 获取控件的边框样式。如“1px solid red”,表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
columns | 获取和设置一个集合,用于创建含控件中显示的所有 DataGridColumn。 |
contextMenu | 一个 ContextMenu 对象,表示控件的右键菜单。 |
cssClass | 指定css伪类名称,设置控件显示样式 |
display | 获取控件的显示样式值。如“none”,表示隐藏控件; “block”表示强制作为块对象呈递。请使用 setDisplay。注:该"block"值不能在ComplexGrid控件中使用。 方法设置该字段的值。 |
displayCheckBox | 获取或设置一个 Boolean 值,该值表示数据项之前是否显示一个选择框。如果该值为 true,则表示显示;反之则不显示。请使用 setDisplayCheckBox 方法设置该字段的值。 |
displayColSplitLine | 获取一个 Boolean 值,表示是否显示列的分割线。 |
displayHead | 获取一个 Boolean 值,表示是否显示列头。请使用 setDisplayHead 方法设置该字段的值。 |
displayPrimaryKey | 获取或设置一个 Boolean 值,该值表示是否显示主键列。 |
displayRowNumber | 获取或设置一个 Boolean 值,该值表示数据项之前是否显示行号。如果该值为 true,则表示显示;反之则不显示。请使用 setDisplayRowNumber 方法设置该字段的值。 |
displayStatisticRow | 获取或设置一个 Boolean 值,该值表示表格是否显示统计行。如果该值为 true,则表示显示;反之则不显示。 请使用 setDisplayStatisticRow 方法设置该字段的值。 如果需要设置某列的统计值,请使用 DataGridColumn.setStatisticValue 方法,或者使用 DataGridColumn.statisticValue 属性设置初始统计值。 |
editOnSelected | 获取或设置一个 Boolean 值,表示表格是否使用选中后编辑。 |
enabled | 获取控件是否可以对用户交互作出响应。如果该值为 true,则表示控件可以对用户交互作出响应;反之则不能。 请使用 setEnabled 方法设置该字段的值。 |
enableHeadContextMenu | 一个布尔值,指示是否启用表头上下文菜单 |
entityContainer | 获取一个 EntityContainer 对象(通常是 GridEntityContainer 类型),表示表格的数据源。 请使用 setEntityContainer 方法设置该字段的值。 |
eTag | 获取控件的标签。 |
filter | 获取或设置表格的过滤条件。请使用 setFilter 方法设置该字段的值。 |
headContextMenu | 一个 ContextMenu 对象,表示表头的右键菜单。 |
height | 参见 Control 的 Control.height 属性。 |
importExcelOptions | 获取或设置解析文件的范围。
一个 JSON 对象(如 {horizontalBegin : 1, horizontalEnd : 0, verticalBegin : 1, verticalEnd : 0, sheetNumber : 1, separatorNum : 0}; )
参数说明。
|
itemCount | 获取和设置一个 Number 值,表示当前的总记录数。 |
itemDefaultData | 表格记录的默认值 |
itemMenu | 一个 ContextMenu 对象,表示数据项的右键菜单。 |
items | 获取一个集合,包含数据项列表中所有的项(DataGridItem 类型)。请使用 setItems 方法设置该字段的值。 |
layoutConfigs | 获取或者设置一个 JSON 对象,该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
moveByShortcutKey | 获取或设置一个 Boolean 值,表示是否使用向上快捷键(ctrl+↑)或向下快捷键(ctrl+↓)移动表格行。 |
multipleSortColumns | 获取或设置一个字符串,表示需要多列排序的列名称(如“age,gender,name”),以逗号分隔,排序顺序为从左向右。 |
padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素; “4px 2px 3px 1px”则表示上边距为 4 像素,右边距为 2 像素,下边距为 3 像素,左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
pageIndex | 在数据创建中调用,加入这个处理是因为,如果在创建数据的过程中要先清理掉当前表格的编辑状态。 如果清除编辑器出错,则中止新数据的创建过程,如果不清除,由于_editingItem没有切换,可能会造成在调用renderCell时,渲染出错的情况 |
pageNaviBar | 获取一个 PageNaviBar 对象。 表示当前 DataGrid 的分页工具条。 |
pageSize | 获取和设置一个 Number 值,表示当前每页允许显示的记录数。 |
pageSizeOptions | 获取和设置一个数组值,表示分页记录数可设置的选项。 |
parent | 获取控件所属的父对象。 |
permissionID | 获取或设置一个字符串,表示控件的权限标识。 |
position | 获取控件位置样式值。如“static”,表示无特殊定位,对象遵循 HTML 定位规则。请使用 setPosition
方法设置该字段的值。
该字段的可选值包括:
|
primaryKey | 获取或设置一个属性,该属性对应的值将用作 DataGrid 中数据项的 id 值,表示主键唯一值。 |
printHideFields | 是否打印默认隐藏的字段。 |
right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
rowNumberColWidth | 获取或设置序号列的宽度。 |
saveMessage | 获取和设置一个字符串,该属性表示表格数据保存成功后的提示信息。当用户设置为空或者空字符串时,保存动作发生后将不提示信息。 |
searchBox | 获取或设置一个 DataGridSearchBox 对象. |
searchParamType | 获取或设置表格的查询条件类型。json 表示查询参数filter 的值采用 Json 对象的形式传递。string 表示查询参数 filter 的值采用字符串的形式传递。
该字段必须在初始化前设置。
该字段可选的值包括:
|
selection | 获取一个对象,表示 DataGrid 中当前选定的数据项(DataGridItem类型)。 该属性特指背景色选中的行所在的数据项。 |
selections | 获取一个集合,表示 DataGrid 中当前选定的所有数据项(DataGridItem类型)的集合。 注意:该数组不是勾选项的集合。如果需要获取勾选项的集合,请使用 {@link getCheckedItems()} 方法。 |
sortColumn | 获取上一次进行排序的列(DataGridColumn 类型)。 |
sorter | 获取或设置一个字符串,表示请求服务时的排序条件。如“NAME ASC, AGE DESC”。 |
sortOrder | 获取或设置一个 Boolean 值,该值表示是否按升序或降序对 DataGrid 控件中的数据项进行排序。如果该值为 true,表示按升序排序;反之则降序。 |
top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
usePercentage | 指示是否使用列宽百分比自适应 |
validateOnSaving | 一个布尔值,指示数据在保存之前是否校验空值 |
visible | 获取一个 Boolean 值,表示控件是否可见。如果该值为 true,则表示控件可见;反之则不可见。请使用 setVisible 方法设置该字段的值。 |
width | 参见 Control 的 Control.width 属性。 |
$e | 获取该控件的占位符,该占位符为一个 JQuery 对象。 |
_columns | 受保护的。原始的元数据列头信息 |
_hasOverrideRenderCell | 受保护的。获取一个 Boolean 值,表示是否有重写 renderCell 方法的列。 |
_tempColumnName | 受保护的。 |
名称 | 说明 |
oncelledited | 当数据项进行编辑后,将触发该事件。 |
oncellediting | 当数据项进行编辑时,将触发该事件。此时单元格内编辑器尚未创建。 |
oneditorcreated | 当数据项的某个单元格内编辑器被创建激活后,将触发该事件。 |
oneditorcreating | 当数据项的某个单元格内编辑器被创建前,将触发该事件。 |
onitemchecked | 当数据项的选中状态发生改变后,将触发该事件。 |
onitemclick | 当单击列表中项的时候,将触发该事件。 |
onitemcountchanged | 总记录数改变时触发该事件。 |
onitemcreated | 当列表项被创建后,将触发该事件。 |
onitemdoubleclick | 当双击列表中项的时候,将触发该事件 |
onitemindexchanged | 当数据项索引发生改变的时候,将触发该事件。通常调用 moveItem、DataGridItem.moveUp、DataGridItem.moveDown、DataGridItem.moveTo 方法时会触发该事件。 |
onload | 当数据加载完后,将触发该事件。 |
onloading | 当数据容器开始加载数据时,将触发该事件。调用 load 方法时会触发该事件。 |
onpageindexchanged | 当前的页面索引变更时触发该事件。调用 moveToPage 方法是触发该事件。 |
onselectionchanged | 当控件当前的选择项发生改变后,将触发该事件。调用 selectItem、 removeItem、 deselectItem 等方法后会触发该事件。 |
onselectionchanging | 当控件当前的选择项发生改变的时候,将触发该事件。调用 selectItem 方法时会触发该事件。 |
onvalidate | 当数据校验完后,将触发该事件。 |
JavaScript 代码 |
dataGrid.appendColumn("gender", "性别", "150", "center");
dataGrid.appendColumn({ name: "gender", caption: "性别" });
dataGrid.appendColumn(column); // column 为一个 DataGridColumn 对象 |
JavaScript 代码 |
dataGrid.appendColumn("gender", "性别", "150", "center");
dataGrid.appendColumn({ name: "gender", caption: "性别" });
dataGrid.appendColumn(column); // column 为一个 DataGridColumn 对象 |
dataGrid.appendColumns([
{ name: "gender", text: "性别" },
{ name: "age", text: "年龄" }
]);
JavaScript 代码 |
dataGrid.exportExcel({tableName:"uap_bm", columnNames:"BMMC,BMJL", columnCaptions:"部门名称,部门经理", filter:"BMMC='研发中心'", fileName:"部门人员表格"}); |
JavaScript 代码 |
var excelHandler = new mx.utils.ExcelUtil();
excelHandler.setBaseUrl("~/customServlet");
excelHandler.setParams({tableName:"uap_bm", columnNames:"BMMC,BMJL", columnCaptions:"部门名称,部门经理", filter:"BMMC='研发中心'", fileName:"部门人员表格"});
excelHandler.exportExcel(); |
JavaScript 代码 |
//用索引删除数据
dataGrid.removeItem(1);
//用主键删除数据
dataGrid.removeItem("id_123");
//用选中的数据项删除数据
dataGrid.removeItem(dataGrid.selection); |
JavaScript 代码 |
//用索引删除数据
dataGrid.removeItems([1,2,3]);
//用主键删除数据
var checkedIDs = dataGrid.getCheckedIDs();
dataGrid.removeItems(checkedIDs);
//用选中的数据项删除数据
var checkedItems = dataGrid.getCheckedItems();
dataGrid.removeItems(checkedItems); |
参数说明。
该字段的可选值包括:
该字段可选的值包括: