LayUI结合Guns使用技巧方法记录

记录一些guns框架结合LayUI使用遇到解决的问题及方法

1、父页面获取子页面的表单数据

原理就是父页面调用子页面的方法，触发隐藏的按钮提交表单，返回需要的数据！

父页面弹出框

layer.open({
      type: 2, //iframe 层
      skin: 'layui-layer-admin',
      area:['1000px',"580px"],
      title:'修改关键性结果',
      btn: ['确定', '取消'],
      content:Feng.ctxPath+'/duties/duties_update_result',
      success: function(layero, index){
      },
      yes: function(index, layero){
      	  //获取子页面的数据  原理是调用子页面的 getMgrDatas 方法 返回值
          var getMgrDatas = $(layero).find("iframe")[0].contentWindow.getMgrDatas();
          layer.close(index);
      }
      ,btn2: function(index, layero){
          layer.close(index);
    }
});

子页面的js内容

var dutiesResultData = {};
layui.use(['layer', 'form', 'xmSelect'], function () {
   // 表单提交事件
  form.on('submit(btnSubmit)', function (data) {
      data.field.cooper = getMgrName.getValue('nameStr');
      data.field.coopers = getMgrName.getValue();
      data.field.cooperIds = JSON.parse(JSON.stringify(getMgrName.getValue('value')));
      data.field.tempId = new Date().valueOf();
      dutiesResultData = data.field;
      //刷新父页弹窗数据
      return false;
    });
})
function getMgrDatas() {
    document.getElementById("dutiesResultSubmit").click();
    return dutiesResultData;
}

子页面的html

 <button style="display: none" id='dutiesResultSubmit' class="layui-btn" lay-filter="btnSubmit" lay-submit>确定</button>

2、子页面获取父页面的数据

//在父页面声明全局的参数 赋值
var upData = {"name":"张三"};

//在子页面获取数据  
var setUpDataTrans = parent.upData;

此方法获取数据的前提是打开页面的方法必须用此方法，不可用func.open

 layer.open({
        type: 2, //iframe 层
        skin: 'layui-layer-admin',
        area:['1000px',"580px"],
        title:'修改关键性结果',
        btn: ['确定', '取消'],
        content:Feng.ctxPath+'/duties/duties_update_result',
        success: function(layero, index){
             },
        yes: function(index, layero){
             }
        ,btn2: function(index, layero){
            layer.close(index);
        }
 });

3、layui导入插件

在项目中建好目录将js插件放入指定目录，进行layui.config

// 以下代码是配置layui扩展模块的目录，每个页面都需要引入
layui.config({
    version: Feng.version,
    base: Feng.ctxPath + '/assets/common/module/'
}).extend({
	//在此处配置插件即可
	//合并单元格插件
    tableMerge: '../../expand/module/tableMerge/tableMerge',
    //xm-select插件
    xmSelect:'../../expand/module/xmSelect/xmSelect'
    }).use(['layer'], function () {
});

使用插件

//直接导入插件即可使用
layui.use(['layer', 'xmSelect'], function () {
    var layer = layui.layer;
    var xmSelect = layui.xmSelect;
})

4、guns中ajax携带数组参数请求处理

优化ax.js，优化后的代码如下：

layui.define(['jquery'], function (exports) {
    var $ = layui.$;

    var $ax = function (url, success, error,contentType) {
        this.url = url;
        this.type = "post";
        this.data = {};
        this.dataType = "json";
        if(contentType){
            this.contentType = contentType
        }else{
            this.contentType = "application/x-www-form-urlencoded;charset=utf-8";
        }
        this.async = false;
        this.success = success;
        this.error = error;
    };
    //添加弹出层
    var axindex = null;

    $ax.prototype = {
        start: function () {
            axindex =   layer.load(0, {shade: false});
            var me = this;
            var result = "";

            if (this.url.indexOf("?") === -1) {
                this.url = this.url + "?jstime=" + new Date().getTime();
            } else {
                this.url = this.url + "&jstime=" + new Date().getTime();
            }
            $.ajax({
                type: me.type,
                url: me.url,
                dataType: me.dataType,
                contentType:me.contentType,
                async: me.async,
                data: me.data,
                beforeSend: function (data) {

                },
                success: function (data) {
                    result = data;
                    if (me.success !== undefined) {
                        me.success(data);
                    }
                },
                error: function (data) {
                    if (me.error !== undefined) {
                        me.error(data);
                    }
                }
            });
            layer.close(axindex);
            return result;
        },

        set: function (key, value) {
            if (typeof key === "object") {
                for (var i in key) {
                    if (typeof i === "function")
                        continue;
                    this.data[i] = key[i];
                }
            } else {
                this.data[key] = (typeof value === "undefined") ? $("#" + key).val() : value;
            }
            return this;
        },

        setData: function (data) {
            this.data = data;
            return this;
        },

        clear: function () {
            this.data = {};
            return this;
        }
    };

    exports('ax', $ax);
});

使用时的参数设置

 const ajax=new $ax(Feng.ctxPath+"/quarContent/edit",function(data){
            Feng.success("修改成功！");
            //传给上个页面，刷新table用
            admin.putTempData('formOk',true);
            //关掉对话框
            admin.closeThisDialog();
        },function(data){
            Feng.error("修改失败！"+data.responseJSON.message)
        },"application/json");
        ajax.setData(JSON.stringify(data.field));
        ajax.start();

java后台接收

/**
     * 修改数据
     *
     * @param quarContent
     * @return
     */
    @Permission
    @RequestMapping("/edit")
    @ResponseBody
    public ResponseData editQuarContent(@RequestBody QuarContent quarContent) {
        this.quarContentService.editQuarContent(quarContent);
        return SUCCESS_TIP;
    }