Ajax表格一种基于Ajax交互技术的网格组件,新增或编辑时可直接在表格中操作。其主要特性:
运行效果
项 | 说明 |
---|---|
宽度 | 子表显示宽度,支持百分比和PX像素两种设置 |
高度 | 子表显示高度,仅支持PX像素设置,当不设置时高度会随内容自适应 |
样式 | 简洁表格 和 边框表格两种 |
打开方式 | Ajax子表中打开字段子表的方式,有对话框和侧边栏两种,选择侧边栏时,可进一步设置侧边栏大小,仅当存在字段子表时可用 |
显示表格标题 | 是否将子表标题名作为Ajax子表表格标题显示 |
分组 | 分组字段 |
冻结列 | 当子表有横向滚动条时,不可拖动的列 |
换行 | 字段内容是否换行显示 |
拖动列宽 | 列标题是否支持拖动调整列宽,不支持被冻结的列 |
新建数据位置 | Ajax子表点击新增按钮,新增行插入位置 |
多级表头 | Ajax子表配置多级表头 |
子表对话框宽度 | 当打开方式是对话框时,在Ajax子表中打开字段子表窗口的宽度 |
子表对话框高度 | 当打开方式是对话框时,在Ajax子表中打开字段子表窗口的高度 |
当设置分组后,有合计字段时,如需支持分组内合计,请在表单源码加入如下JS
<script>
function groupSum(dataIndx,BOGridSetting,params){
if (BOGridSetting.groupModel) {
var findCM = function (CMs) {
for (var i = 0, size = CMs.length; i < size; i++) {
var CM = CMs[i];
if (CM.colModel) {
var col = findCM(CM.colModel);
if (col) {
return col;
}
} else if (CM.dataIndx == dataIndx) {
return CM;
}
}
}
var CM = findCM(BOGridSetting.colModel);
if (CM != null && CM.dataIndx == dataIndx) {
CM.summary = {
type: ["sum"],
title: [
function (ui) {
var boi = eval($(this).attr("id"))
ui.column = {width: CM.width}
var num = boi.getColumnConfig(ui.dataIndx).currencySymbol == null ? ui.rowData[dataIndx] : CM.render(ui);
var show = BOGridSetting.groupModel.dataIndx[0];
return "合计: " + num; //ui.prevRowData[show] +
}
]
}
}
}
}
//`BO_ACT_XXX`代表Ajax表名
function BO_ACT_XXX_GridCustomSetting(BOGridSetting){
groupSum("SumColumnName",BOGridSetting);
}
</script>
多级表头
多级表头运行效果图
设置列字段内容字体颜色
设置列字段内容背景颜色
示例属性配置图
示例对应运行效果图