一、概述

有时候我们需要对列表(树形)等数据进行格式展示,事件操作。
有时候我们需要操作按钮的前后置事件 或者添加自定义按钮,点击自定义按钮时需要将列表中选中行的数据导入打开的其他表单。

二、操作及示例

2.1、通过数据模版属性编写模版脚本

2.2、编写脚本示例

三、数据模版脚本接口API

统一说明以下不再说明
templ:是表单的vue实例数据,可以通过这个操作数据、dom等
callback:数据回调,如果通过ajax异步提交需要回调,按钮等操作必须回调,不然操作没反应。返回true 是回调成功,false表示回调失败,阻止继续操作 【v3.1.8+】
$request:可以通过this.$request 来ajax请求数据【v3.1.9+】

3.1、加载事件

 //模版加载事件
 onLoad:function(template){

  }

3.2、按钮加载事件【v3.2.4+支持】

 // 模版加载按钮事件
  onLoadActions:function(template, action, button, type, row){

  }

需要注意的是,先判断该字段的type,第二次加载再判断格式

if(!type){
 return true
}

参数说明:

参数 说明 是否必须 可选值
action 按钮code,在使用页面传入的根据自己需求定义的值; - add、edit等
button 按钮相关数据,包含位置(position)等信息 -
type 处理方式,hidden 隐藏,disabled 禁用 -
row 如果按钮位置是‘manage’ ,其他类型为空 -

例子eg:

  onLoadActions:function(template, action, button, type, row){
    if(action === 'sefStartFlow'){
      if(!type){
      return true
      }
      if(type==='hidden' && template.$utils.isNotEmpty(row.node_)){
        return true
      }
    }
  },

3.3、按钮的前置事件

 //按钮前置事件【必须回调】
  beforeSubmit:function(template,action,position, selection, data,callback){
    callback(true)
  }

表单按钮提交前触发,在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
action 按钮code,在使用页面传入的根据自己需求定义的值; - add、edit等
position 按钮位置 【toolbar或manage】 -
selection 如果按钮位置是‘toolbar’ 选中的主键值,‘manage’未空 -
data 如果按钮位置是‘manage’ 当前行的数据 -
callback funtion【必须】,一定要有回调方法,不然没反应 必须 true,false

3.4、 按钮的后置事件

 //按钮后置事件【必须回调】
  afterSubmit:function(form,action,postValue,callback){
    callback(true)
  }

表单按钮提交后触发,在具体的页面中调用.
参数说明:

参数 说明 是否必须 可选值
action 按钮code,在使用页面传入的根据自己需求定义的值; - add、edit等
position 按钮位置 【toolbar或manage】 -
selection 如果按钮位置是‘toolbar’ 选中的主键值,‘manage’未空 -
data 如果按钮位置是‘manage’ 当前行的数据 -
callback funtion【必须】,一定要有回调方法,不然没反应 必须 true,false

3.5、 自定义格式数据事件 【v3.1.11+】

 // 自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){

  }

需要注意的是,先判断该字段的rowData,第二次加载再判断格式

if(!rowData){
 return true
}

参数说明:

参数 说明 是否必须 可选值
name 字段名 -
value 当前单元格的值 -
rowData 当前行数据 -
column 当前字段属性 -

eg:

 //自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){
  //1:库存预警:1代表预警,2代表安全,当数据有1的时候,“库存”增加红色字体标识
    if(name==='ku_cun_' ){
      if(!rowData){
      return true
      }
      if(rowData.stock_waring === '1'){

        return '<span style="color: red">'+(value||'')+'</span>'
      }else{
         return '<span>'+(value||'')+'</span>'
      }
    }
    //2:有效期:1代表快到期,2代表正常,当数据有1的时候,“名称”增加背景显示
    if(name==='cost_name_'){
      if(!rowData){
      return true
      }
      //rowData.validity_warning_  有空格数据
      if(rowData.validity_warning_ === '1'){
        debugger
        return `<div  style="color: #ecf5ff;background: red;">${ value}</div>`
      }else{
      return value
      }
    }
  },

四、常用脚本示例

4.1、设置数据列中其中一个栏目信息设置超链接

Object.assign(JTemplate,{
  //加载事件
  onLoad:function(template){
    //设置第一行超链接
   template.listConfig.columns[0].link =true
    //绑定事件链接属性,更多属性看下面
    template.$refs.crud.$on('column-link-click',function(column, row){
      //TODO:你要处理事件 其中:column:当前行的数据,row:当前单元格的属性
     //跳转百度
      location.href='http://www.baidu.com'
    })
  }

});

4.2、设置列表背景,字体,字体颜色

//设置数据模版背景,字体,字体颜色
  const id =  'templateStyle' //保证唯一建议时间戳
  let styleTag = document.getElementById(id)
      if (!styleTag) {
        styleTag = document.createElement('style')
        styleTag.setAttribute('type', 'text/css')
        styleTag.setAttribute('id', id)
        document.head.appendChild(styleTag)
      }
  //添加的样式
  const newStyle ='' //这里编写你要添加的样式
  styleTag.innerText = newStyle

4.3、设置列表显示字段的字体,背景颜色 【v3.1.11+】


//自定义格式数据事件
  customFormatter:function(template, name, value, rowData, column){
    if(name==='biao_ti_'){
     if(!rowData){ // 判断是否是允许自定义
          return true
      }
       return '<span style="color: #dd5a43; font-size: 20px;">'+value+'</span>'
    }
  }

4.4、【自定义按钮】打开另外个表单页面

打开另外个表单:

 //按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
    if(action ==='queryAdd'){
      //表单顶部按钮
      template.editToolbars = []
      //表单key
      template.formKey = 'qdzdylcb'
      //表单是否只读,默认false
      template.readonly = false
      //主键值 如果新增则不写或留空,编辑则要传入值
      template.pkValue = ''
      //表单窗口打开
      template.dialogFormVisible = true
    }else{
       callback(true) 
    }

表单顶部按钮:editToolbars

属性 说明 可选值
key 按钮唯一Key
button_type 按钮类型 close,save, print ,sefStartFlow,custom等
label 按钮文字 eg:保存、关闭等
icon 按钮图标 字体库的图标
type 按钮类型 primary / success / warning / danger / info / text

4.5、【自定义按钮】打开另外个数据模板管理配置出来的列表

方法一:默认的数据模版

//按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
    if(action ==='queryAdd'){
      //数据模版key
      template.templateDialogKey = 'xxxx'
      //数据模版动态参数 eg:{'参数字段':'字段值'} 参数字段为数据库的字段值(一般包含下划线的)
      //template.templateDialogDynamicParams = {}
      //数据模版窗口打开
      template.templateDialogVisible = true
    }else{
       callback(true) 
    }

方法二:自己写vue的模版和窗口

//按钮提交前置事件
  beforeSubmit:function(template, action, position, selection, data, callback){
    if(action ==='queryAdd'){
          //自己写vue的模版和窗口
        this.$dialog('<xxx>内容</xxx>')
    }else{
       callback(true) 
    }

4.6、 template DOM操作

template可以操作表单vue的方法(methods)、属性、DOM元素和事件


可以操作 element-ui的事件 https://element.eleme.cn/#/zh-CN/component/table

    template.$refs.crud.$refs.elTable.$on("cell-click",function(row, column, cell, event){
      debugger
    })

element-ui的事件:

文档更新时间: 2020-06-05 18:00   作者:hugh