1.基本功能 1.基本功能
1.1. 新表格配置 1.1. 新表格配置
新表格和旧表格是EC控件中的两种不同的控件。由于新表格在查询数据量较大情况下，查询性能比较好。目前项目组居多使用的是新表格。新旧表格的html中的指令是不一致的。新表格为g-hot-table，旧表格为g-data-grid。目前平台表格配置默认使用新表格。
1.2.新旧表格差异对比 1.2.新旧表格差异对比 （新旧表格切换）
| 功能 | 旧表格 | 新表格 | 备注 | |
| 功能1(data) | <g-data-grid data-source-name=”source1″ > <g-column width=”20%” data=”name | uppercase”>姓名</g-column> <g-column width=”200″ data=”telephone”>固定电话</g-column> </g-data-grid> |
<g-hot-table ng-cloak data-source-name=”employeeSource”> <g-hot-column data=”name | uppercase” title=”姓名”></g-hot-column> <g-hot-column data=”sex | sexToCn” title=”性别”></g-hot-column> </g-hot-table> |
旧表格标签名称为g-data-grid，新表格标签名称为g-hot-table | |
| 功能2(title) | <g-column width=”20%” data=”name | uppercase”>姓名</g-column> | <g-hot-column data=”name | uppercase” title=”姓名”></g-hot-column> | 新表格在表头处，新增title属性，属性值作为列名输出，旧表格列名则是写在标签中间 | |
| 功能3(align) | <g-column data=”sex | sexToCn” align=”center”>性别</g-column> | <g-hot-column data=”name” align=”center” title=”姓名”></g-hot-column> | 旧表格标签名称为g-column，新表格标签名称为g-hot-column。使用效果无明显区别。 | |
| 功能4(sortable) | <g-column data=”name” sortable>姓名</g-column> | <g-hot-column data=”name” sortable title=”姓名”></g-hot-column> | 旧表格与新表格均写在标签属性中。二者差异体现在旧表格控制事件的三角形样式被点击后拥有蓝色方框。 | |
| 功能5(front-end-sort) | <g-hot-table ng-cloak data-source-name=”employeeSource” front-end-sort=”true”> <g-hot-column data=”name” sortable title=”姓名”></g-hot-column> <g-hot-column data=”sex” title=”性别”></g-hot-column> </g-hot-table> |
新表格中的该方式仅针对当前页进行排序，默认情况下使用后端排序方式，它是请求后端所有数据后进行的排序方式。与sortable协同使用。 | ||
| 功能6(required) | <g-column data=”name” required>姓名 </g-column> | <g-hot-column data=”name” required title=”姓名”></g-hot-column> | 保存布局时是否为必填字段，新旧表格均作为标签属性使用，无明显区别。 | |
| 功能7(hidden) | <g-column data=”sex | sexToCn” hidden>性别</g-column> | <g-hot-column data=”sex” hidden title=”性别”></g-hot-column> | 是否隐藏列，新旧表格均作为标签属性使用，无明显区别。 | |
| 功能8(has-tip) | <g-hot-column data=”name” title=”姓名” has-tip></g-hot-column> | 新表格中，鼠标移至单元格内可显示提示信息。 | ||
| 功能9(on-load-success) | $scope.empGridSuccess = function(grid, source) {$scope.empCheckedRows.push(source[2], source[3]);console.log(‘push checked row from controller’);}; <g-data-grid data-source-name=”source1″ data-on-load-success=”empGridSuccess(grid, source)” data-checked-rows=”empCheckedRows”></g-data-grid> |
$scope.empGridSuccess = function (grid, source) {$scope.gridInstance = grid;}; <g-hot-table data-source-name=”employeeSource” data-on-load-success=”empGridSuccess(grid, source)”> </g-hot-table> |
旧表格函数参数有grid,source,result。新表格函数参数有grid，$event，source和physicalSource。新表格在表格数据集处划分出source – 表格数据集（分层结构）与physicalSource – 表格数据集（扁平结构） | |
| 功能10(on-render) | <g-data-grid data-source-name=”source1″ on-render=”gridRendered(grid)”> <g-column width=”20%” data=”name”>姓名</g-column> <g-column width=”200″ data=”sex”> 性别</g-column> </g-data-grid> |
<g-hot-table data-source-name=”employeeSource” on-render=”onRender(grid, source)”> <g-hot-column data=”name”>姓名</g-hot-column> <g-hot-column data=”sex”> 性别</g-hot-column></g-hot-table> |
表格初始化后的回调事件，旧表格中函数参数为grid(表格对象)，新表格中函数参数包括grid(表格对象)与source(表格数据集) | |
| 功能11(g-hot-column-tmpl) | <g-column-tmpl> <g-action-remove on-before-action=”onRemoveRecord($event, record)”></g-action-remove> <button ng-click=”grid.startEdit(rowIndex,grid)”>编辑</button> <button ng-click=”grid.finishEdit(true,{test: ‘xxxx’})”>保存</button></g-column-tmpl> |
<g-hot-column-tmpl> <button ng-click=”deleteEmp()”>删除</button> <button ng-click=”startEditEmp()”>编辑</button> <button ng-click=”finishEdit()”>保存</button></g-hot-column-tmpl> |
新表格的控件名称为g-hot-column-tmpl，旧表格控件名称为g-column-tmpl。旧表格中删除、编辑、保存功能由g-action-remove标签，grid.startEditEmp(rowIndex, grid)，grid.finishEdit(force) / grid.finishEdit(force, modifiedOptions)方法实现，新表格中三种功能则由deleteEmp()，deleteEmp()与finishEdit()方法实现，三种方法均不需要传递参数。 | |
| 功能12(g-hot-checkbox-column) | <g-checkbox-column width=”50″></g-checkbox-column> | <g-hot-checkbox-column></g-hot-checkbox-column> | 新表格控件名称为g-hot-checkbox-column，旧表格控件名称为g-checkbox-column。新表格复选框为有凸起感正方形，旧表格复选框则为2D平面正方形。当选中后，新表格在复选框中标记黑色勾，旧表格则标记蓝色勾，且正方形变为蓝色。旧表格选中时，表格下方会有选中信息输出。 | |
| 功能13(g-hot-column-editor) | <g-column-editor> <g-dropdown ng-model=”row.sex” name=”sex” list-type=”single” placeholder=”请选择” source=”sexData” display-express=”name” value-prop=”value”> </g-dropdown></g-column-editor> |
<g-hot-column-editor> <g-dropdown list-type=”single” placeholder=”请选择” source=”sexData” display-express=”name” value-prop=”value” name=”sex” ng-model=”sex”> </g-dropdown></g-hot-column-editor> |
新表格标签名称为g-hot-column-editor，旧表格标签名称为g-column-editor。新表格选中编辑时，单元格有蓝色方框标记，在有下拉框选项的单元格中，下拉框与单元格紧邻，中间无空隙。旧表格选中编辑时，单元格中出现白底长方形编辑栏，在有下拉框选项的单元格中，下拉框与单元格中间存在空隙。 | |
| 功能14(getSelectedRow) | $scope.consoleSelectedRow = function(){console.log($scope.selectedEmp);} <button type=”button” ng-click=”consoleSelectedRow()”>打印激活行</button> |
$scope.consoleSelectedRow= function(){console.log($scope.gridInstance.getSelectedRow());}; <button type=”button” ng-click=”consoleSelectedRow()”>打印激活行</button> |
新表格中，控件名称为getSelectedRow。表格对象提供 getSelectedRow 方法用于选中行数据，值为对象类型。旧表格中，空间名称为selected-row。通过$scope.selectedEmp实现效果。 | |
| 功能15(stretch) | <g-hot-table data-source-name=”employeeSource” stretch=”all”> <g-hot-column data=”name”>姓名</g-hot-column> <g-hot-column data=”sex”> 性别</g-hot-column> </g-hot-table> |
新增属性，表格列宽度不足表格宽度时，如何处理空白部分，值为(none, last, all)。none：不做处理，按照实际宽度显示。last：把多余的空白分配到最后一列。all：把多余的空白平均分配到每一列。 默认为none。 |
||
| 功能16(getCheckedRows) | <g-checkbox-column></g-checkbox-column> | $scope.consoleChectedRows= function () {console.log($scope.gridInstance.getCheckedRows());}; <button type=”button” ng-click=”consoleChectedRows()”>打印复选行</button> |
新表格中，在表格控件处使用 getCheckedRows()方法，通过按钮事件将已勾选行集打印至控制台。旧表格中，直接使用标签<g-checkbox-column></g-checkbox-column>即可，输出结果显示在表格上方。 | |
| 功能17(css-class) | $scope.colColor = function(row){if(row.age>55){return ‘fullName’;}}; <g-column data=”birthDay” g-item-class=”colColor(row)”>年龄 </g-column> |
$scope.colClass = function (row) {return row.age > 60 ? “bgRed” : “”; }; <g-hot-column data=”年龄” css-class=”colClass(row)> 年龄</g-hot-column> |
新表格标签名称为css-class，旧表格标签名称为g-item-class。旧表格可以根据表达式或者方法获取，新表格仅通过方法获取。 | |
| 功能18(width, height) | <g-column width=”20%” data=”name”>姓名</g-column> <g-column width=”200px” data=”sex”>性别</g-column> <g-data-grid data-source-name=”source1″ g-height=”200px”></g-data-grid> |
<g-hot-table data-source-name=”employeeSource” height=”300″ width=”600″> <g-hot-checkbox-column width=”50″></g-hot-checkbox-column> <g-hot-column data=”name” width=”200″>姓名</g-hot-column> </g-hot-table> |
新表格与旧表格在此处标签名称不同，新表格的单位%与px效果无差异。其余两者基本功能一致。 | |
| 功能19 (on-row-click, on-row-dbclick) |
$scope.dbclickEmp = function (row, grid){}; <g-data-grid data-source-name=”source1″ on-row-dbclick=”dbclickEmp(record, grid)”></g-data-grid> |
$scope.onRowClick= function ($event, record ,grid, physicalRow, field){}; $scope.onRowDbClick= function (physicalRow, field){}; <g-hot-table data-source-name=”employeeSource” on-row-click=”onRowClick($event, record ,grid, physicalRow, field)” on-row-dbclick=”onRowDbClick(physicalRow, field)”></g-hot-table> |
新旧表格双击控件不同点在于事件参数。新表格事件可选参数为：grid(表格对象)，$event(事件对象)，record(当前点击行数据对象)，colIndex(当前点击所在的列序号)，rowIndex(当前点击所在的行序号（不包含隐藏行）)，field(当前点击所在的列字段名称)，physicalRow(当前点击所在的行序号（包含隐藏行）)，旧表格参数仅含row, grid。另外新表格拥有单击行事件，旧表格没有。 | |
| 功能20(on-check) | $scope.onCheck= function ($event, record, isChecked){}; <g-data-grid data-source-name=”source1″ on-select=”onCheck($event, record, isChecked)”> |
$scope.onCheck= function (grid,source,checked,row,physicalRow,record){} <g-hot-table ng-cloak data-source-name=”employeeSource” on-check=”onCheck(grid,source, checked,row,physicalRow,record)”> |
旧表格事件参数function($event:Event,record:Object,isChecked:Boolean)，新表格事件参数function (grid,source, checked,row,physicalRow,record)。其中grid为表格对象，source为表格数据集（层次数据结构），checked为勾选状态，true或false，row为勾选行序号，physicalRow为勾选行序号，表格呈树形结构时的参数，record为行数据对象 | |
| 功能21(on-check-all) | $scope.onCheckAll=function($event,grid,isChecked){} <g-data-grid data-source-name=”source1″ on-check-all=”onCheckAll($event,grid,isChecked)”> |
$scope.onCheck= function (grid,$event,source,physicalSource,checked){} <g-hot-table ng-cloak data-source-name=”employeeSource” on-check-all=”onCheck(grid,$event,source,physicalSource,checked)”> |
新旧表格事件参数不同，新表格事件参数如下：grid为表格对象，$event为事件对象，source为表格数据集（层次数据结构），physicalSource为表格数据集（扁平数据结构），表格呈树形结构时的参数，checked为全选状态，true或false。旧表格事件参数仅包含$event，grid和isChecked(布尔值，表示是否全选)。 | |
| 功能22(col-settings-key) | <g-data-grid data-source-name=”source1″ col-settings-key=”empListSettings”></g-data-grid> |
<g-hot-table ng-cloak data-source-name=”employeeSource” col-settings-key=”empListSettingsKey”> <g-hot-column data=”name” title=”姓名”></g-hot-column> <g-hot-column data=”age” title=”年龄”></g-hot-column></g-hot-table> |
新表格控件名称均为col-settings-key。新旧表格齿轮样式存在些微不同，另外新表格样式弹出框大小更合理。 | |
| 功能23(drag-check) | <g-data-grid data-source-name=”source1″ drag-check=”true”> <g-column data=”name”>姓名</g-column> <g-column data=”sex”> 性别</g-column></g-data-grid> |
<g-hot-table ng-cloak data-source-name=”employeeSource” drag-check=”true”> <g-hot-checkbox-column></g-hot-checkbox-column> <g-hot-column data=”name” title=”姓名”></g-hot-column> <g-hot-column data=”age” title=”年龄”></g-hot-column></g-hot-table> |
新旧表格无明显差异。 | |
| 功能24(filters) | <g-column-filter> <g-dropdown width=”250px” list-type=”single” placeholder=”请选择”> <g-dropitem value=”Male”>男</g-dropitem> <g-dropitem value=”Female”>女</g-dropitem></g-dropdown></g-column-filter> |
<g-hot-table ng-cloak data-source-name=”employeeSource” filters=”true”> <g-hot-column data=”name” title=”姓名”></g-hot-column> <g-hot-column data=”age” title=”年龄”></g-hot-column></g-hot-table> |
新表格filters属性可以在表属性中，旧表格g-column-filter属性只能设置在需要过滤的每一列上。 | |
| 功能25(on-after-filter) | <g-data-grid data-source-name=”employeeSource” ng-cloak> <g-column width=”20%” data=”name” drop-filter>姓名</g-column> </g-data-grid> |
<g-hot-table ng-cloak data-source-name=”employeeSource” filters=”true” on-after-filter=”afterFilterTest(grid, trimmedRows, physicalSource)”> <g-hot-column data=”name” title=”姓名”></g-hot-column> <g-hot-column data=”age” title=”年龄”></g-hot-column></g-hot-table> |
新表格样式名称为on-after-filter，旧表格样式名称为drop-filter。在过滤效果上，新表格有级联效果，即当筛选某一列条件之后，其余列的筛选条件随之变化，在旧表格中没有级联效果，旧表格在选中筛选条件后，表格下方会输出对应的筛选条件信息。另外外观上新表格为角向下的三角形，旧表格仅在单元格右下角处有较小的三角形小黑点。新表格的三角形有四边形包围。三角形图标当鼠标指针经过以及点击时，有相对应的事件。 | |
| 功能26 (startEdit, finishEdit) |
<g-data-grid data-source-name=”source1″ > <g-column width=”120px” data=”age” editable=”number-spinner”>年龄</g-column> <g-column width=”30%” data=”email” editable=”text”>Email</g-column></g-data-grid> |
$scope.onRowDbClick = function ($event, record ,grid, physicalRow, field){$scope.gridInstance.startEdit(physicalRow,field);}; $scope.finishEdit = function(){$scope.gridInstance.finishEdit(“row”).then(function(){})}; <button type=”button” ng-click=”finishEdit()”>结束编辑</button> <g-hot-table data-source-name=”employeeSource” on-row-dbclick=”onRowDbClick ($event, record ,grid, physicalRow, field)”></g-hot-table> |
旧表格控件名称为editable，新表格控件名称为startEdit和finishEdit。旧表格只有某一列具有该属性，才可以进行编辑。新表格可以写在表标签中实现所有列可编辑。 | |
| 功能27 (addRow,deleteRows) |
$scope.addRow = function(){$scope.gridInstance.addRow({age:30},4);} <button type=”button” ng-click=”addRow()” ng-cloak>新增一行</button> |
$scope.addRow=function(){$scope.gridInstance.addRow(0,newRecord).then(function(){ $scope.gridInstance.startEdit(0,”name”)});} $scope.deleteRow=function(){$scope.gridInstance.deleteRows(0);}; <button type=”button” ng-click=”addRow()”>新增一行（鼠标定位）</button> <button type=”button” ng-click=”deleteRow()”>删除第一行</button> |
新旧表格在新增部分控件名称相同，旧表格方法参数record(对象),index(新增所在行)，新表格方法参数为physicalRow(新增行所在的行序号),newRecord( 新增行初始数据)。旧表格没有删除控件，为了完成删除需求，旧表格用onclick事件实现。 | |
| 功能28(validator-name) | <g-data-grid data-source-name=”source1″ data-validator-name=”Employee_Update”> <g-column width=”20%” data=”name”>姓名</g-column> <g-column width=”200″ data=”sex”> 性别</g-column></g-data-grid> |
<g-hot-table ng-cloak data-source-name=”employeeSource” on-load-success=”empGridSuccess(grid, source)” on-row-dbclick=”onRowDbClick ($event, record ,grid, physicalRow, field)” validator-name=”Employee_Update”></g-hot-table> |
新表格验证控件名称为validator-name，旧表格控件名称为data-validator-name。在新表格中，不符合要求会将该处单元格背景设置为红色，旧表格则会将该处单元格方框设置为红色。其余信息一致。 | |
| 功能29 (validate-on-change-editing-cell、validate-on-change-editing-row) |
$scope.validateCell=function(){$scope.gridInstance.validateCell(0,”name”).then(function(){}).catch(function(){}).finally(function(){alert(“校验结束后执行的操作…”);});}; <button type=”button” ng-click=”validateCell()”></button> |
新表格新增属性，提供校验单元格、校验行、校验所有新增及修改行的方法，可自行调用。 grid.validateCell(physicalRow, field) 校验某个单元格数据，physicalRow 为行序号，field 为列字段名称 grid.validateRow(physicalRow) 校验某行数据，physicalRow 为行序号 grid.validateAddedAndModifiedRows() 校验所有新增行及修改行的数据 |
||
| 功能30(tree-view) | <g-data-grid data-source-name=”employeeSource” tree-id-prop=”id” tree-parent-prop=”parentId” tree-has-children=”hasChildren(record);” tree-expand-init=”false”></g-data-grid> | <g-hot-table ng-cloak data-source-name=”employeeSource” tree-view=”true”> <g-hot-column data=”name” title=”姓名”></g-hot-column> </g-hot-table> |
新表格控件名称为tree-view，旧表格控件名称为tree-xx-xx。区别在于新表格中，在表格属性位置写好tree-view的设置属性即可。旧表格设置较为复杂，包含tree-id-prop，tree-id-prop，tree-has-children和tree-async-fetch-children等属性设置，涵盖同步，异步等模式。 | |
| 功能31(group) | <g-hot-table ng-cloak data-source-name=”employeeSource” group=”true”> <g-hot-column data=”name” title=”姓名”></g-hot-column> </g-hot-table> |
新表格在html页面上为新表格开启分组表格功能，在表格属性中设置。 | ||
| 功能32(front-end-group) | <g-hot-table ng-cloak data-source-name=”employeeSource” col-settings-key=”empListGroupSettingsKey” group=”true” front-end-group=”true”> <g-hot-column data=”name” title=”姓名”></g-hot-column></g-hot-table> |
新表格中是否使用前端分组方式，该方式仅针对当前页进行分组，默认情况下使用后端分组方式，它是请求后端所有数据后进行的排序方式。与group协同使用。 | ||
| 功能33(group-summary-func) | <g-hot-table ng-cloak data-source-name=”employeeSource” group=”true” group-summary-func=”groupCount”> <g-hot-column data=”name” title=”姓名”></g-hot-column> <g-hot-column data=”age” title=”年龄”></g-hot-column></g-hot-table> |
新表格中，g-hot-table上增加group-summary-func方法，绑定scope中定义的合计方法，该方法仅用作前端分组，常与front-end-group一同使用。 | ||
| 功能34(getCheckedLeafRows) | $scope.consoleChectedLeafRows = function(){console.log($scope.gridInstance.getCheckedLeafRows());} <button type=”button” ng-click=”consoleChectedLeafRows()”>打印叶子节点集合数据</button> |
新表格中，在表格控件中使用 getCheckedLeafRows()方法，当通过复选框勾选完子结点后，点击按钮将叶子节点数据集合打印至控制台 | ||
| 功能35(getCheckedGroupRows) | $scope.consoleCheckedGroupRows = function(){console.log($scope.gridInstance.getCheckedGroupRows());} | 新表格中，在表格控件中使用 getCheckedGroupRows()方法，当通过复选框勾选完父结点后，点击按钮将分组表格的分组行数据集合打印至控制台 | ||
| 功能36(summary) | <g-hot-table ng-cloak data-source-name=”employeeSource”> <g-hot-column data=”name” title=”姓名”></g-hot-column> <g-hot-column data=”age” title=”年龄” summary=”sum”></g-hot-column></g-hot-table> |
新表格中的列统计功能，针对表格当前页进行合计。值有：’sum'(合计), ‘min'(最小值), ‘max'(最大值), ‘count'(数量), ‘average'(平均值) | ||
| 功能37 (getVisibleFields,getColumnDropFilters) |
$scope.exportGridData = function () {exportField = $scope._dataGrid.getVisibleFields();columnDropFilter = $scope._dataGrid.getColumnDropFilters();}} <button ng-click=”exportGridData()” class=”btn btn-default”>同步导出表格当前页布局</button> |
新表格中，表格对象提供getVisibleFields和getColumnDropFilters方法获取当前页的表格布局，一般与导出结合使用。getVisibleFields：获取当前布局中已显示的列信息，getColumnDropFilters：获取filters下拉过滤信息。 | ||
| 功能38 (getAddedAndModifedRecords) |
$scope.consoleAddedAndModifedRecords= function () {console.log( $scope.gridInstance.getAddedAndModifedRecords());}} <button type=”button” ng-click=”consoleAddedAndModifedRecords()”>获取新增及修改数据集合</button> |
新表格中，表格对象提供获取修改保存数据信息。 getModifiedRecords：获取修改过的数据集合 getModifiedRecordMap：获取修改过的数据 Map getAddedRecords：获取新增数据集合 getAddedRecordMap：获取新增数据 Map getAddedAndModifedRecords：获取新增及修改数据集合 getAddedAndModifedRecordMap：获取新增及修改数据 Map clearModifedInfo：清除数据修改信息 |
||
2.配置方法 2.配置方法
2.1.新表格配置 2.1.新表格配置
平台目前经典案例向导上创建的业务对象默认都是默认配置为新表格。
配置
- 对象建模-业务对象-业务对象管理：锁定业务对象，编辑业务对象后，点击可视化布局按钮，进入到可视化布局界面。
- 选择表格，在右下角中的表格类型选择为Handsontable即为新表格。如果此处未配置选项，则默认生成旧表格。如果配置为HandsontableGroup为新表格的分组表格。如果选择HandsontableTree则为新表格的树型表格。
代码
新表格的代码示例为：
<g-hot-table ng-cloak
data-source-name="TestCaseNewHot101Source" height="300px"
lazy-render-layout="false"
lazy="false"
col-settings-key="TestCaseNewHot101Grid"
data-validator-name="TestCaseNewHot101_Default"
new-row-func="addTestCaseNewHot101"
validation-require-disabled
on-row-click="gridRowClickTestCaseNewHot101($event,grid,record,colIndex,rowIndex,field,physicalRow)"
on-load-success="loadSuccessTestCaseNewHot101Grid(grid,$event,source,physicalSource)"
on-render="initTestCaseNewHot101Grid(grid,source,true)"
stretch="last"
on-before-column-sort="onBeforeColumnSortEvent(grid,col,sortName,sortDirection)"
validate-on-change-editing-cell
selected-row="testCaseNewHot101SelectedRow"
drag-check="true"
checked-rows="testCaseNewHot101CheckedRows">
<g-hot-index-column width="20px"></g-hot-index-column>
<g-hot-checkbox-column width="30px"></g-hot-checkbox-column>
<g-hot-column title='银行英文名称' has-tip="true" align="left" width="100" data="bankName" >
<g-hot-column-editor>
<input g-focus-select class="input form-control" ng-model="row.bankName" type="text" name="testCaseNewHot101.bankName" id="testCaseNewHot101.bankName" />
</g-hot-column-editor>
</g-hot-column>
<g-hot-column hidden data="mdBankAccountId" title="主键" >
<g-hot-column-editor>
<input ng-model="row.mdBankAccountId" type="text" name="testCaseNewHot101.mdBankAccountId" />
</g-hot-column-editor>
</g-hot-column>
</g-hot-table>