全球资金项目组前端公共组件common.js & common-

全球资金项目组前端公共组件common.js & common-zoom.js说明文档

GFP front-end component common.js & common-zoom.js readme text

common.js

• 对MeiUI组件的再次封装

  • 表格

    var muTable = $([selector]).dataGridTable({
        ......
    })
    

  • 表单组件

    类名	组件名	组件方法名	可在标签中配置的属性
    .gfp-inputtext	输入框	muInputField	width、mutype、placeholder、name、maxLength、readonly、 disabled、align(type=‘amount’时)
    .gfp-textarea	多行文本输入域	muTextarea	placeholder、name、width、height、lang、disabled
    .gfp-combo	下拉框	muCombo	width、placeholder、name、disabled
    .gfp-calendar	日历	muCalendar	dateFormat、width、placeholder、name、lang、disabled

  • 公共iframe弹框

    GFPCommon.gfpDialog.refresh({
       ......
    })
    

• 封装的公共方法及全局默认设置

  • 查询条件展开收缩显示区块HTML代码

    <div class="mu-row-grid">
       <div class="mu-col-12 search-buttonbar">
          <button id="searchButton" type="button" class="form-btn">查询</button>
          <button id="resetButton" type="button" class="form-btn">重置</button>
          <div class="fold-condition-wrap">
             <div class="fold-operate unfold">
                <span>展开</span> <i></i>
            </div>
            <div class="fold-operate fold">
                <span>收缩</span> <i></i>
            </div>
         </div>
      </div>
    </div>
    

  • 刷新表单防重方法
    GFPCommon.refreshRequestToken()

  • 获得表格checkbox选中的值，checkData是选中的多行的json数据，field是取得表格中那一列的值
    GFPCommon.getDataGridCheck(checkData,field)

  • 加入json或json数组到己有的json数据，formData目标数据，key主键，jsonObject被添加的json
    GFPCommon.addJsonToListData(formData,key,jsonObject)

  • 格式化金额（转为千分位），strData目标字符串，n保留几位小数 0-6
    GFPCommon.formatAmount(strData, n)

  • 金额反格式化（去除千分位格式），strData目标字符串
    GFPCommon.reverseFormatAmount(strData)

  • 取消事件冒泡
    GFPCommon.cancelBubble(event)

  • 重置form表单，saveData为重置后的默认值，如果为undefined则重置为$([form]).data()的返回结果
    $([form]).resetForm(saveData)

  • 清空form表单
    $([form]).clearForm()

  • 设置表单值，data格式为{name:XXX,value:XXXX}
$([form]).setFormData(data)

  • 设置表单内组件为readonly，如果不设置nameArr则全部设为readonly
    $([form]).setProhibitedEdit(nameArr)

  • 把form数据序列成json对象
    $([form]).serializeObject()

  • 加法运算，arg1、arg2相加的两数，precision精度
    GFPCommon.sum(arg1, arg2, precision)

  • 减法运算，arg1、arg2相减的两数，precision精度
    GFPCommon.subtr(arg1, arg2, precision)

  • 乘法运算，arg1、arg2相乘的两数，precision精度
    GFPCommon.accMul(arg1, arg2, precision)

  • 除法运算，arg1、arg2相除的两数，precision精度
    GFPCommon.accDiv(arg1, arg2, precision)

  • ajax默认设置，可由$.ajaxSettings可获取默认设置

common-zoom.js（依赖common.js文件）

• 全球资金系统公共放大镜组件，调用方法：

     var zoomDialog = new GFPZoomDialog({
         id: "testDialogContainer", //弹窗唯一id
         title:'放大镜示例',//弹窗title
         dataUrl:'../view/data/dialogForm2.json',//表格数据源
         method: 'post',//ajax请求方式，'get'或'post'
         formElement: [ //头部条件，支持输入框和下拉框
             {"fieldLabel":"测试21","fieldName":"container31","fieldType":"text"},
             {"fieldLabel":"测试22","fieldName":"container32","fieldType":"combo", "dataSource":'../view/data/combo.json'}
         ],
         cols : [ [ //表格列
             {
                 radio: true
             },{
                 title : 'BIC',
                 field : 'BIC',
                 width : 50,
                 align: 'center'
             },{
                 title : 'name',
                 field : 'name',
                 width : 50,
                 align : 'center'
             },{
                 title : 'city',
                 field : 'city',
                 width : 50,
                 align : 'center'
             }
         ] ],
         fieldMatch:{"container3": "name","container2":"BIC","container5":"city"},
         onDialogOpen: function(instance,selectorObj){
             console.log(instance,selectorObj)
         },
         onSubmit: function(data){
             console.log(data)
         }
     });

• 参数详解
  • tableContainerId：如果是嵌入表格中的放大镜，该项必填，否则放大镜数据无法带入，为表格外层div的id值。
  • title：弹框的标题，非必填，不填则没有标题。
  • gfpType：弹框里面内容形式。'table'表格，'listView'单项项选择列表，'mulListView'双项选择列表,mulGridView:双向选择表格。
  • dataUrl：查询结果的数据源。
  • mapperKey：表单外查询条件，额外的mapperKey字段。
  • identity：弹窗内容形式为双向选择表格，即gfpType:'mulGridView'，该属性为表格内数据主键标识，多选时必填，填入的值必须为字段之一，且每条数据的该字段为唯一值。
  • queryParam：自定义的查询条件。
  • formElement：用来配置弹框中查询输入框下拉框。类型为object。fieldLabel为文字标签的文本内容，fieldName为表单组件的name属性值，fieldType为组件类型，输入框或下拉框。
  • cols：对列进行配置。
  • fieldMatch：弹框内层被选中的查询结果与弹框外层被带入的字段做匹配。
  • buttons：弹框中查询结果的显示类型为双向选择的类型，如双向选择列表、双向选择表格，用以配置两个列表或表格之间的按钮组中额外增加的button。
  • LModel：双向选择列表、双向选择表格左侧数据。
  • RModel：双向选择列表、双向选择表格右侧数据。
  • textField：配置单向、双向选择列表的textField，数据格式默认为 {text:'',value:''}，当后台传递过来的参数名不一致时，可以通过textField和valueField设置。
  • valueField：配置单向、双向选择列表的valueField，数据格式默认为 {text:'',value:''}，当后台传递过来的参数名不一致时，可以通过textField和valueField设置。
  • listViewTitle：单向选择列表的title。
  • isShowNoData：单向选择列表时若设置为true，当dataSource未定义、获取数据源失败或数据源长度小于1，显示未获取数据源的提示语，提示语在langPackage中可定义，默认为‘暂无数据’；若设置为false时，不显示提示语。
  • langPackage：单向选择列表isShowNoData设置为true时配置提示语。
  • isDelete：双向选择列表添加的时候，把左边列表选中的值添加到右边时，当值为false的时候，左边列表不变，当为true的时候，值会被删除。
  • extraData：单向选择列表dataUrl为ajax地址时，发送ajax传递给后台的查询条件参数。
  • onDialogOpen：弹框打开时触发的事件。
  • onSubmit：点击确定时触发的事件。
  • onBindLinkage：可以在该回调事件中去掉两个字段之间的清空联动。
  • mulGridViewWidth：双向选择表格的宽度。
  • mulGridViewHeight：双向选择表格的高度。
  • buttonsOnOff：是否展示双向选择表格的默认按钮。
  • unbindFlag：是否绑定默认联动，默认即false为绑定，设为true则不绑定。
  • validator：配置校验器。
  • addRules：新增校验方法。