批改操作

一、应用场景

在原有左树右表的功能上,表头头部栏增加编辑按钮,实现单页面批量修改数据的能力。

二、页面调整

2.1、增加编辑按钮

点击进入列表页面设计器

选择层级,找到DIV块,列表头部栏下找到按钮区,右键插入按钮。详情见下图

选中按钮,多语标题改为编辑

结果如下图

2.2、增加底部栏及按钮

DIV块右键插入底部栏

底部栏右键插入按钮栏

按钮栏右键插入两个按钮

调整按钮的多语标题分别为取消,保存

调整保存按钮的规格类型为主按钮后点击右上角保存

2.3、控制按钮显隐

2.3.1、增加空脚本

分别为编辑、取消、保存添加空脚本

以下以编辑按钮为例

点击编辑按钮,右侧点击动作,点击编辑脚本

点击保存按钮

最终效果如下图

2.3.2、功能实现



var gridModel = viewModel.getGridModel();
var footerCode = "toolbar12rk"; //TODO:需要修改


//初始化设置底部栏隐藏
  viewModel.on('afterMount',function(){
    setlayoutDisplay(footerCode,false);
})


viewModel.get('button7nc') && viewModel.get('button7nc').on('click', function (data) {
  // 编辑--单击
  setlayoutDisplay('TreeTableHeader',false);  //表头工具栏隐藏
  setlayoutDisplay(footerCode,true);  //底部栏显示
  gridModel.setState('actionStatesVisible',false);  //表格按钮栏隐藏
  gridModel.setReadOnly(false);     //设置表格允许编辑
});

viewModel.get('button15gi') && viewModel.get('button15gi').on('click', function (data) {
  // 取消--单击
  viewModel.execute('refresh');    //刷新页面
  setlayoutDisplay('TreeTableHeader',true);  //表头工具栏显示
  setlayoutDisplay(footerCode,false);  //底部栏隐藏
  gridModel.setState('actionStatesVisible',true);  //表格按钮栏显示
  gridModel.setReadOnly(true);  //设置表格不允许编辑
});

viewModel.get('button21uj') && viewModel.get('button21uj').on('click', function (data) {
  // 保存--单击

});


 //设置布局的隐藏显示
function setlayoutDisplay(cGroupCode,boolean){
    viewModel.execute('updateViewMeta',{code:cGroupCode,visible:boolean}); 
}

footerCode参数需要调整

点击按钮栏,右侧复制编码填充到函数footerCode变量中即可

2.4、保存按钮功能实现


viewModel.get('button21uj') && viewModel.get('button21uj').on('click', function (data) {
  var billNum = "left_tree_right_tableTreeTable";
  var domainKey = "developplatform";
  var busiObj = "left_tree_right_table";
  // 保存--单击
  var proxy = cb.rest.DynamicProxy.create({
        settle: {
            url: 'bill/save',
            method: 'POST',
            options: {
                domainKey: domainKey,
                busiObj: busiObj
            }
        }
    });
    //传参
    var param = gridModel.getDirtyData();
    var reqParams = {
      'billnum':billNum,
      'data':param
    }
    proxy.settle(reqParams, function(err, result) {
        if (err) {
          cb.utils.alert(err.message, 'error');
          return;
        }else{
          cb.utils.alert('保存成功');
          viewModel.execute('refresh');
          setlayoutDisplay('TreeTableHeader',true);
          setlayoutDisplay(footerCode,false);
          //设置表格不允许编辑
          gridModel.setReadOnly(true);
        }
    });
});

billNum,domainKey,busiObj参数获取

三、测试

Copyright © 用友 -【生态技术部】 2022-2023 all right reserved,powered by Gitbook修订时间: 2024-02-02 12:53:38

results matching ""

    No results matching ""