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

全球资金项目组前端公共组件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()

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

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

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

    • 除法运算,arg1arg2相除的两数,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:用来配置弹框中查询输入框下拉框。类型为objectfieldLabel为文字标签的文本内容,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:新增校验方法。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容