1.基本功能 1.基本功能
1.1.表格双击行事件 1.1.表格双击行事件
平台支持表格配置双击事件，可用于跳转页面，也可扩展实现特定业务逻辑。新表格和旧表格的配置是一样的。
1.2.新表格选中后事件 1.2.新表格选中后事件
平台支持配置新表格选中后事件，通过选中后事件从而实现键盘上下移动效果
1.3.表格自动查询配置 1.3.表格自动查询配置
平台支持配置点击菜单的时候直接进行数据的查询，而不是等页面加载后再次点击查询加载数据。如果是主子对象，子业务对象保存方式为统一保存，子对象是默认自动加载的，也可以在可视化布局上配置取消自动查询。新表格和旧表格的配置是一样的。
1.4.表格焦点移开事件 1.4.表格焦点移开事件
平台支持配置表格焦点移开事件，常见的场景是计算数据，例如输入A字段和B字段数据后，焦点移开，将自动计算所得的值赋值给C字段，新表格和旧表格的配置是一样的。
2.配置方法 2.配置方法
2.1.表格双击行事件 2.1.表格双击行事件
表格编辑类型是新页面编辑默认不会有操作列，此时的表格支持双击进入编辑界面的功能，如果希望既可以双击进入，又可以通过勾选一行点编辑按钮进行，可以参考表格操作列配置。
配置
- 常见的表格双击事件一般是用于跳转页面，此处以双击进入编辑页为例。有两种实现方式，第一种直接平台配置；第二种需要平台配置双击事件，并且编写双击事件方法。如果只是简单的跳转至编辑页面，推荐使用第一种方式；如果是有复杂的业务逻辑，请参考方式二。
方式一
- 该方式支持整个项目级的配置，也支持单独的表格配置。整个项目级配置后，则该视图下所有的表格都会生成对应的表格双击事件；如果是单个表格配置则只针对配置的业务对象。如果两者都有配置，优先取业务对象配置。
- 项目级配置方法为：打开菜单项目管理-项目初始化-视图级配置，新增一笔记录，配置项类型【新页面编辑类型双击表格到编辑页面】，配置内容可不管(或也填N值)。接着保存提交数据。
- 如需单独配置业务对象的表格双击行事件，打开菜单对象建模–业务对象–业务对象管理，编辑业务对象，点击【可视化布局】按钮进入到业务对象可视化界面，选中表格，在右侧菜单栏找到表格双击跳转到编辑页字段并勾选，然后点击保存。
方法二
- 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮进入到业务对象可视化界面。
- 选中表格，选择事件页签，事件类型为【表格双击行事件】，执行类型【Angular表达式】，执行内容为【方法名】且后面的参数是默认的为(record,grid)，即格式为【方法名(record,grid)】，然后点击保存。
- 编辑业务对象–方法定义：新增一个自定义js函数。（此步骤可以参考自定义js（单个类配置））
具体代码可以参考常用扩展3.1. 表格双击事件
代码
前端html文件的表格部分生成 on-row-dbclick="dbclickCsScoreTempRowToEdit(record,grid,$event)"。
<g-hot-table ng-cloak
data-source-name="CsScoreTempSource"
lazy-render-layout="false"
lazy="false"
col-settings-key="CsScoreTempGrid"
on-row-click="gridRowClickCsScoreTemp($event,grid,record,colIndex,rowIndex,field,physicalRow)"
on-load-success="loadSuccessCsScoreTempGrid(grid,$event,source,physicalSource)"
on-render="initCsScoreTempGrid(grid,source)"
stretch="last"
on-before-column-sort="onBeforeColumnSortEvent(grid,col,sortName,sortDirection)"
validate-on-change-editing-cell
filters="true"
on-row-dbclick="dbclickCsScoreTempRowToEdit(record,grid,$event)"
selected-row="csScoreTempSelectedRow"
drag-check="true"
checked-rows="csScoreTempCheckedRows">
<g-hot-index-column width="20px"></g-hot-index-column>
<g-hot-checkbox-column width="30px"></g-hot-checkbox-column>
业务对象名+BsCtrl.js文件上的方法：dbclickCsScoreTempRowToEdit。
/**
* GLPaaS生成
* 双击跳转到编辑页面
*/
$scope.dbclickCsScoreTempRowToEdit = function(record,grid,$event){
$scope.editCsScoreTemp(record.csScoreTempId,record);
};
2.2.新表格选中后事件 2.2.新表格选中后事件
配置
- 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮进入到业务对象可视化界面。
- 选中表格，选择事件页签
- 选择新表格选中事件，输入执行类型【Angular表达式】，执行内容为【方法名】及参数，例如
gridRowSelected(grid,record,row,col);
- 编辑业务对象–方法定义：新增一个自定义js函数，此步骤可以参考自定义js（单个类配置））。代码可参考常用扩展3.2. 新表格选中后事件
代码
前端html文件的表格部分生成on-row-click="gridRowClickTestCaseNewHot105($event,grid,record,colIndex,rowIndex,field,physicalRow);gridRowSelected(grid,record,row,col);"
<g-hot-table ng-cloak
data-source-name="TestCaseNewHot105Source" height="200px"
lazy-render-layout="false"
lazy="false"
on-row-click="gridRowClickTestCaseNewHot105($event,grid,record,colIndex,rowIndex,field,physicalRow);gridRowSelected(grid,record,row,col);"
on-load-success="loadSuccessTestCaseNewHot105Grid(grid,$event,source,physicalSource)"
on-render="initTestCaseNewHot105Grid(grid,source)"
stretch="last"
on-before-column-sort="onBeforeColumnSortEvent(grid,col,sortName,sortDirection)"
validate-on-change-editing-cell
selected-row="testCaseNewHot105SelectedRow"
drag-check="true"
checked-rows="testCaseNewHot105CheckedRows">
<g-hot-index-column width="20px"></g-hot-index-column>
<g-hot-checkbox-column width="30px"></g-hot-checkbo
2.3.表格自动查询配置 2.3.表格自动查询配置
配置
- 对象建模–业务对象–业务对象管理：编辑业务对象–基本信息,勾选自动查询字段。
也可以进入可视化布局，选中表格，在右侧菜单栏找到自动查询字段，选择是。
代码
前端html文件的表格部分生成allow-auto-load值为true。
<g-data-source data-source-name="CsScoreTempSource"
page="true"
url="{{$config.ctx}}/csScoreTemp/query?gridKey=9812a23e-adb5-469b-8c72-925ec5d21b73_HT"
params="queryCsScoreTempParams"
page-size-param="pageSize"
page-size="20"
current-page-param="currentPage"
total-record-prop="total"
records-prop="csScoreTemps"
allow-auto-load="true"
before-load="dataSourceBeforeLoad"
after-load="dataSourceAfterLoad">
</g-data-source>
2.4.表格焦点移开事件 2.4.表格焦点移开事件
配置
目前配置方式可从多个入口配置，建议直接在可视化布局界面配置，方便快捷。
1. 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮，进入到可视化界面。
2. 选择表格上的字段，勾选焦点移开事件，填写【执行类型】为【Angular公式】，填写【执行内容】，例如testExam3201Detail.openQty=(testExam3201Detail.planQty||0)-(testExam3201Detail.receiveQty||0)。
代码
前端html文件配置事件的字段生成Angular公式testExam3201Detail.openQty=(testExam3201Detail.planQty||0)-(testExam3201Detail.receiveQty||0)。
执行内容：
testExam3201Detail.openQty=(testExam3201Detail.planQty||0)-(testExam3201Detail.receiveQty||0)
3. 常用扩展 3. 常用扩展
3.1. 表格双击事件 3.1. 表格双击事件
表格双击进去编辑页的自定义JS方法
$scope.fnDbclick = function(record, grid, $event) {
var url = "/html/sample/test/testghx302Edit.html";
var openType = "1";
url = url + "?testCase302Id=" + record.testCase302Id;
if (url.indexOf("?") >= 0) {
url = url + "&openType=" + openType;
} else {
url = url + "?openType=" + openType;
}
var resource = {
sysResourceId: 'testghx302_edit',
urlTitle: '编辑数据',
url: url
};
var indexScope = top.angular.element("body").scope();
indexScope.addTab(resource)
indexScope.$apply();
}
;
3.2. 新表格选中后事件 3.2. 新表格选中后事件
表格实现键盘上下移动效果的自定义JS方法
$scope.gridRowSelected = function(grid,record,row,col){
grid.__selectedColumnIndex = grid.getSelectedColumnIndex();
$scope.generalOrderQuerySpace = record;
grid.$$currentSelKey = record.mfOrderId;
$scope.$evalAsync();
};