1.概述

在使用自定义列表时,用户可以做一些自定义的开发功能,比如在点击一个按钮的时候,调用服务端脚本等等。

2.开发过程

我们可以在页面JS定义,定义自己的方法,这个方法在运行的过程中,实际会变成列表实例的方法。

点击按钮就可以响应demo 方法。

3. 扩展指南

3.1 列表初始化时执行

有些情况下,我们需要在列表加载时执行某个方法,我们可以编写如下代码:

生成并执行,我们可以看到 “_onload” 方法被执行了。

3.2 获取当前表格

this.table

我们在编写代码的时候,我们如果需要获取列表的表格对象的话,我们可以通过上面的代码进行获取,这个其实时一个 rx-grid 的实例对象,可以使用 rx-grid提供的方法。

3.3 自定义列表双击事件

http://doc.redxun.cn/docs/jpaas/doubleClick

3.4 获取ajax 对象

我们需要对后端进行操作,这个时候可以使用 代码。

this.getAjax() 获取 ajax 对象。

http://doc.redxun.cn/docs/jpaas/axioReqUtil

3.5 获取当前用户对象

在编写代码时我们可以通过 this.user 获取当前用户对象。

3.6 自定义行点击事件

有些情况下,我们需要处理行点击事件,可以在JS 脚本中添加方法

handRowClick(record,index){
    console.info(index);
    console.info(record);
}

参数:

参数 说明
record 当前选择行记录
index 当前选中索引

3.7 调用自定义查询自定义脚本

列表提供了调用自定义查询和脚本的方法。

3.7.1 调用脚本

this.invokeScript(alias, params, callback)

参数:

参数 说明
alias 脚本别名
params JSON结构参数
callback 回调方法 function(data){}

3.7.2 调用脚本返回Promise对象

this.invokeScriptPromise(alias, params).then(res=>{})

参数:

参数 说明
alias 脚本别名
params JSON结构参数

3.7.3 调用自定义查询

invokeCustomQuery(alias,params,callback)

参数 说明
alias 自定查询别名
params JSON结构参数
callback 回调函数 function(data){}

示例:

http://doc.redxun.cn/docs/jpaas/invokeCustomQueryList

3.7.4 调用自定义查询返回Promise对象

invokeCustomQueryPromise(alias,params).then(data=>{})

参数 说明
alias 自定查询别名
params JSON结构参数

3.8 获取Util工具类

有些情况下,希望获取到 Util工具类,我们可以使用如下方法。

this.getUtil()

比如有些情况 ,通过弹框的方式打开列表,我们可以通过如下方法关闭这个窗口。

this.getUtil().closeWindow(this,"ok",data);

3.9 对话框工具类

获取对话框代码,我们可以通过这个打开表单方案,列表等。
this.dialogBox 这个是 DialogBox.js 的引用。

3.9.1 打开表单方案

var conf={
        //标题
        title:"标题",
        //当前列表实例
        curVm: this,
        data: {
            //表单方案别名,
            alias: "customer",
            //主键
            pkId: "", 
            //是否只读
            readOnly: false},
        max:true
};
this.dialogBox.showForm(conf, function (action,data) {
        console.info(data);
});

3.9.2 打开列表对话框

this.dialogBox.dialog(parameter, config, callback)

参数说明

参数 说明
parameter 对象格式为 {key:”对话框KEY”,params:”Q_NAME__S_EQ=老王&single=true”}
config {max:true,widthHeight:[data.width + ‘px’, data.height + ‘px’]} ,curVm: this
callback function(data){}

示例代码:

demo(){
   var param={key:"customer"};
   var conf={max:false,widthHeight:[  '800px',   '600px'],curVm: this};
   this.dialogBox.dialog(param, conf, result=>{
          //返回数据
       console.info(result)
   })
},

3.9.3 打开自定义组件

this.dialogBox.openComponent(config, callBack)

参数说明

 @param config {
    component:"组件的URL",
   title:"标题",
    max:true,
    curVm:this,
    widthHeight:['800px','600px'],
    data:{user:{name:"ray",address:"gz"}},
  }
  @param callBack 回调方法 function(action,data){

  }

示例代码

demo(){
   var conf={component:"form/DemoForm.vue",max:false,widthHeight:[  '800px',   '600px'],curVm: this};
   this.dialogBox.openComponent(config, function(rtn){
       console.info(rtn);
   })
},

3.10 流程方法

3.10.1 启动流程

方法定义
startProcess(parameter)

参数说明:

参数结构如下:

{
    formJson:"表单数据字符串",
    defId:"流程定义ID",
    instId:"流程实例ID",
    systemHand:"false 表示数据需要自己处理"
}
参数 说明
formJson 表单JSON数据 {“表单别名”: {“pingfen”: “4”}}
defId 流程定义ID
instId 流程实例ID,这个表示在启动之前保存过草稿
systemHand 数据自动启动,默认为 true

案例:

http://doc.redxun.cn/docs/jpaas/formlistStartProcess

3.10.2 保存草稿

方法定义
saveDraft(parameter)

参数说明:

参数结构如下:

{
    formJson:"表单数据字符串",
    defId:"流程定义ID",
    instId:"流程实例ID",
    systemHand:"false 表示数据需要自己处理"
}
参数 说明
formJson 表单JSON数据 {“表单别名”: {“pingfen”: “4”}}
defId 流程定义ID
instId 流程实例ID,这个表示在启动之前保存过草稿
systemHand 数据自动启动,默认为 true

3.10.3 打开启动流程表单

startFlow(){
    //构造数据
    var data={defId:"1418459535940534274",formData:{address:"gz"}};
    var config={
        curVm:this,
        max:true,
        data: data
    }
    this.dialogBox.openStartFlow(config,function(action,data){
        console.info(action);
        console.info(data);
    })
}

3.11 数据操作

3.11.1 删除数据方法

方法定义:

removeById(params)

参数定义

参数 说明
alias 表单方案别名
id 主键ID,可以使用逗号分隔

示例:

onBatRemove(){
    //获取选中的记录
    var rows=this.table.getSelectedRows();
    var aryId=[];
    for(var i=0;i<rows.length;i++){
        aryId.push(rows[i].ID_); 
    }
    var ids=aryId.join(",");
    var self_=this;
    this.$confirm({
        title: '提示信息',
        content: '确认删除吗?',
        okText: '确认',
        cancelText: '取消',
        zIndex:30000,
        onOk(){
            var params={alias:"csgb",id:ids};
            //删除记录并刷新。
            self_.removeById(params).then(res=>{
                self_.onRefresh();
            })
        }
      });
}

3.11.2 保存表单数据

方法定义:
saveForm(params)
参数说明:

params格式如下:

{setting: {action: action, alias: "表单方案别名"}, data: {表单数据}};

action: 可能得值为 ,start:启动流程,save:保存数据
data :为表单数据 。

返回promise对象。

3.11.3 根据别名主键获取数据

根据表单方案和主键ID获取,相应得数据。

方法定义:
getByAlias(alias,id)

参数

参数 说明
alias 表单方案别名
id 主键

返回 promise对象。

文档更新时间: 2021-08-25 17:23   作者:zyg