按钮

1.基本功能 1.基本功能

1.1.按钮图标配置1.1.按钮图标配置

按钮图标配置
按钮图标配置-效果1

1.2.按钮显示隐藏1.2.按钮显示隐藏

勾选表格特殊状态值记录，批量删除按钮隐藏
h072311
勾选表格特殊状态值记录，批量删除按钮显示
h072313

1.3.按钮样式 1.3.按钮样式

平台支持按钮样式控制，样式包括首选项【Primary】、默认样式【Default】、成功【Success】、信息【Info】、警告【Warming】、链接【Link】、危险【Danger】。不配置的情况下是默认样式。
QQ截图20190926102349

1.4.按钮组 1.4.按钮组

平台支持配置按钮组，将多个按钮组合在一起，可全部显示，也可只显示主按钮，其他按钮隐藏。
按钮组_20190403

1.5.高级查询按钮 1.5.高级查询按钮

平台支持配置高级查询按钮，常见的应用场景：例如在查询条件非常多的时候，页面可以配置一些比较常用的字段作为查询条件。而一些不常用但也需要作为查询条件的字段，可以通过点击高级查询，将其以弹框形式显示出来作为查询条件。
高级查询-效果1

1.6.购物车按钮 1.6.购物车按钮

平台支持配置购物车按钮，购物车一般配置在表格上方的按钮区域。在表格上勾选几条记录，按钮右侧会显示对应条数，当点击按钮时，表格只展示勾选的数据。
QQ截图20190926155405

1.7. 按钮的快捷键 1.7. 按钮的快捷键配置

平台支持对按钮配置快捷键。
快捷键配置-效果

1.8. 阻止按钮重复提交 1.8. 阻止按钮重复提交配置

平台支持配置对前端按钮生成g-pause-click指令，阻止按钮重复点击，连续发送请求。

1.9. 按钮置灰 1.9. 按钮置灰

可以根据特定条件来控制按钮是否置灰。
未勾选数据的时候，批量删除按钮是置灰状态。
按钮置灰2

勾选数据的时候，批量删除按钮是启用状态。
按钮置灰3

1.10. 防止按钮重复点击 1.10. 防止按钮重复点击

防止按钮重复点击，按钮点击后禁用一定时间后才可再次点击。

2.配置方法 2.配置方法

配置

2.1按钮图标配置 2.1按钮图标配置

1.项目管理–项目初始化–视图级配置：新增一笔记录，记录的【配置项类型】为【支持图标显示】。配置内容任意。
按钮图标配置-配置1
2.对象建模–业务对象–业务对象管理—编辑业务对象–方法定义：在图标字段中填入图标的名称。（ps：前提是你的图标名称在对应的样式文件中已经引入了对应的图标样式，否则需要自己去引入对应的突变样式文件。）
按钮图标配置-配置2

代码

在按钮对应的html中，按钮中生成了标签。

    <button id="testCaseNew107.addTestCaseNew108" 
                  type="button" ng-click="addTestCaseNew107()" 
                  g-per="/html/sample/test/testCaseNew107Add.html"
      ng-class="button-primary" class="button-primary" > 
                  <i class="iconbt-save">新增</i>> </button>

2.2.按钮显示隐藏 2.2.按钮显示隐藏

  • 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮，进入到可视化界面。。

h072314

  • 选择批量删除按钮，在右下角的【显示隐藏表达式】中填入对应的表达式。此处例子为：isPartDelivery==’N’，其中testExam3201.isPartDelivery为分批到货的ng-model值，N为分批到货勾选后的值。

h072315

代码

  • 在对应的html界面生成ng-show标签
        <button id="testExam3201.delTestCaseNew109" type="button" ng-click="delTestCaseNew107()"
         ng-show="(testExam3201.isPartDelivery=='N')" 
        ng-class="button-primary" class="button-primary" > 批量删除 </button>

2.3. 按钮样式控制 2.3. 按钮样式控制

配置

  1. 平台支持对整个项目级的配置，也支持单独的业务对象配置。整个项目级配置后，该视图下所有新增业务对象的按钮样式都一致；如果是单个业务对象配置则只针对当前配置的业务对象。如果两者都有配置，优先取业务对象配置。
  2. 项目级配置方法为：打开菜单项目管理-项目初始化-视图级配置，新增一笔记录，配置项类型项目级默认配置，配置区域选择按钮区，属性项选择按钮样式，默认值选择危险【Danger】（根据需求选择）。然后保存提交数据。
    QQ截图20190926102017
  3. 如需单独配置业务对象的按钮样式，打开菜单对象建模–业务对象–业务对象管理，编辑业务对象，进入可视化布局界面；选择对应的按钮，在右侧菜单栏找到按钮样式，选择危险【Danger】，然后保存并提交业务对象，重新生成代码
    QQ截图20190926102129

代码

在html上按钮部分生成了class=”button-danger”。

<button  ext-property="1" id="csScoreTemp.deleteCsScoreTemps"   type="button" ng-click="deleteCsScoreTemps()" g-per="/csScoreTemp/deletes"  ng-show="($$isDeleted_=='N')"    class="button-danger" > 删除</button>

2.4. 按钮组 2.4. 按钮组

支持配置按钮组在显示几个按钮后出现滚动条。

配置

  1. 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮进入页面布局，在布局上点击【TOOLBAR】上面的小齿轮，点击【添加按钮组】按钮，在弹窗右边区域，会出现按钮组的字段，点击确认按钮。
    QQ截图20190926135313
  2. 单击按钮组左上角齿轮，弹出【按钮组】配置界面；在配置界面上点击右上角的齿轮，弹出按钮配置界面，自定义选择按钮，点击中间右移按钮，然后点击确认；
    QQ截图20190926143906
    QQ截图20190926143959
  3. 用户可以通过设置主按钮与次要按钮，来控制按钮的显示隐藏。例如在界面上显示保存按钮为主按钮：选中【修改保存】、【保存并新增】按钮，在右侧菜单栏找到主按钮字段，取消勾选复选框，默认都是主按钮。
    QQ截图20190926144902
  4. 如果要设置按钮组的提示内容，在右侧菜单栏的【静态内容】处进行配置。
    QQ截图20190926145059
  5. 如果需要定制按钮组在显示几个按钮后出现滚动条，可以在项目组中的文件【config.properties.js】中进行配置高度，具体的标签为buttonGroupHeight：160。其中160的高度大概是8个按钮后显示滚动条。实际则以项目组为准，可自行根据需求调整值的高度。
    controls: {
        buttonGroupHeight：160,
        multipleTabsControl: true,
        optimizeObjs: true,
      .....
        },

代码

在html文件中，按钮部分有生成g-button-group标签。

<g-button-group  select-button-class="BUTTON_GROUP" select-button-class="X" >
<button  ext-property="1" id="csScoreTemp.save"  type="button"  ng-click="save()" g-per="/csScoreTemp/save" ng-show="(csScoreTemp.csScoreTempId==null || csScoreTemp.rowStatus=='4') "    class="button-primary" >保存</button>
</g-button-group>

2.5.高级查询按钮 2.5.高级查询按钮

配置

  1. 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮进入页面布局，在管理页的container-fluid同级拖拽一个div，将其的页面布局容器类型修改为【SEARCH_DIALOG】;
  2. 在【SEARCH_DIALOG】里面配置查询条件。例如可以拖拽一个group，填写分组标题为高级查询，分组控件为panel，勾选显示分组；接着拖拽一个SERACH_FORM然后绑定其业务对象元素名称，点击上面的小齿轮，配置查询字段。
    QQ截图20190926161805
  3. 选择【TOOLBAR】布局，点击右上角的齿轮，在弹窗界面左侧选中【高级查询】方法，点击中间右移按钮，然后点击确认，将【高级查询】按钮配置到界面上。
    QQ截图20190926162252
    QQ截图20190926163257
  4. 提交业务对象，生成代码。

代码

在ManageBsCtrl.js可以找到高级查询的方法advanceSearchQuery

 $scope.advanceSearchQueryTestLixq301DbWindow= function(){
            var $ele = window.$('#advanceSearchQueryTestLixq301Db');
            var $modalBody = $ele.find('.modal-body');
            var windowHeight = window.innerHeight;
            var windowWidth = window.innerWidth;
            var divHeight = 700;
            var divWidth = 900;
            divWidth = 400;
            divHeight=300;
            divWidth = windowWidth - $ele.outerWidth();
            if(divWidth < 0){
                divWidth = 0
            }
            if(windowHeight < divHeight + 40) {
                divHeight = windowHeight - 40;
            }
            $modalBody.css({height: divHeight + 'px'});
            divHeight = windowHeight - $ele.outerHeight();
            if(divHeight < 0){
                divHeight = 0
            }

            $ele.css({
                left: (divWidth) / 2 + 'px',
                top: (divHeight) / 2 + 'px'
            });
            $ele.show();
        };

2.6.购物车按钮 2.6.购物车按钮

配置

  1. 对象建模–业务对象–业务对象管理：编辑业务对象，切换至方法定义tab页，新增一个方法，例如【调用方法名称】为openShop，【调用方法描述】为购物车，【方法类型】为请求方法，【URL地址】为业务对象名且首字母小写+’/’+【调用方法名称】，然后保存数据；
    QQ截图20190926165137
  2. 点击【可视化布局】按钮，进入管理页布局， 选择【TOOLBAR】布局，点击右上角的齿轮，在弹窗界面左侧选中【购物车】方法，点击中间右移按钮，然后点击确认，将【购物车】按钮配置到界面上；
    QQ截图20190926165413
    QQ截图20190926165447
  3. 编辑业务对象的基础信息：勾选【购物车模式】；
    QQ截图20190926170053
  4. 保存提交对象，生成代码。

代码

在html页面生成购物车按钮代码。

<button g-pause-click ext-property="1" id="testLixq301Db.openShopTestLixq301Db" type="button" ng-click="openShopTestLixq301Db()" g-per="/testLixq301Db/openShop" ng-cloak class="button-primary" > 购物车<span class="badge">{{ssn}}</span> </button>

在html页面表格上多了on-check标签。

on-check="testLixq301DbManageOnCheck($event,record,isChecked)"

在ManageBsCtrl.js可以找到购物车的方法openShop。

$scope.openShopTestLixq301Db = function() {
            var html = Arrays.extract(checkRows, 'testLixq301Id').join(',');
            $$openShop = true ;
            $scope.search.checkedId = html;
            $scope.testLixq301DbGrid._clearFilter(null, true, function() {
                $scope.getTestLixq301DbPages(function(){
                    $scope.search.checkedId = "";
                });
            });
        };

2.7. 按钮的快捷键配置 2.7. 按钮的快捷键配置

配置

  1. 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮进入页面布局，选择需要配置快捷键的按钮，在右侧菜单栏上找到的【快捷键】和【键值】字段。【快捷键】提供多种组合键，此配置可根据需求自己定义，但是避免和浏览器的快捷键冲突。
    QQ截图20191112135306
    QQ截图20191112134631
  2. 提交对象，生成前端代码即可。

代码

前端HTML文件生成对应按钮部分生成title="CTRL+1"属性。

<button id="testCaseNewHot106.queryTestCaseNewHot106" type="button" ng-click="queryTestCaseNewHot106()" g-per="/testCaseNewHot106/query" title="CTRL+1" ng-cloak class="button-blue" > 查询 </button>

2.8. 阻止按钮重复提交2.8. 前端按钮重复提交配置

配置

  1. 项目管理–项目初始化–视图级配置：新增一笔记录，【配置项类型】为生成button阻止重复提交g-pause-click指令，【配置内容】为
  2. 对象建模 –> 视图配置管理，点击【新增】按钮。
    label1
    2.在配置项类型处选择：，配置内容处输入自定义配置。
    视图
    3.设置完后点击保存。
    4.返回视图管理配置页面，勾选刚才新增的配置项，点击【批量提交】按钮。
    3
    5.重新生成代码。

2.9.按钮置灰 2.9.按钮置灰

配置

  1. 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮，在可视化界面中选择要设置置灰的按钮，在右侧属性列表的【可编辑表达式】处填写表达式（例如：testLixq301DbCheckedRows.length>=1，在勾选一条数据以上是可编辑的，未勾选时则不可编辑）。
    按钮置灰

  2. 【可编辑表达式】处也可填写方法名（例如：isDisabled()），然后在二次扩展js文件中编写自定义代码，具体代码参考【3.1.按钮置灰】。

代码

在html文件中的动态只读字段上生成了ng-disabled标签。

  <button id="testLixq301Db.deleteTestLixq301Dbs" type="button" ng-click="deleteTestLixq301Dbs()" g-per="/testLixq301Db/deletes" ng-disabled="!(testLixq301DbCheckedRows.length>=1)" class="button-primary"> 批量删除 </button>

2.10. 防止按钮重复点击 2.10. 防止按钮重复点击

配置

BaseController.js需更新至5.7.41以上版本，在配置文件config.properties.js中添加如下配置项。
按钮重复点击

preventRepeatClick: { // 阻止按钮重复点击配置项
    enable: true,
    // 是否启用，默认不启用
    delay: 500,
    // 间隔时间，默认为 500ms
}

3.常用扩展 3.常用扩展

3.1.按钮置灰

二次扩展自定义代码

$scope.isDisabled = funtion() {
    if ($scope.testLixq301DbCheckedRows && $scope.testLixq301DbCheckedRows.length != 1) {
        return false;
    }
    return true;
};

4.版本更新 4.版本更新

5.7.41，2019.12.06

优化

  • 按钮触发后，后台没响应之前还可以继续点击，需要控制好，后台没响应之前，不可以二次触发