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

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

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

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

父页面弹出框

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


子页面的js内容

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


子页面的html

<button style&＃61;"display: none" id&＃61;&＃39;dutiesResultSubmit&＃39; class&＃61;"layui-btn" lay-filter&＃61;"btnSubmit" lay-submit>确定button>


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

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


//在子页面获取数据
var setUpDataTrans &＃61; parent.upData;


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

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


3、layui导入插件

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

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


使用插件

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


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

优化ax.js&＃xff0c;优化后的代码如下&＃xff1a;

layui.define([&＃39;jquery&＃39;], function (exports) {var $ &＃61; layui.$;var $ax &＃61; function (url, success, error,contentType) {this.url &＃61; url;this.type &＃61; "post";this.data &＃61; {};this.dataType &＃61; "json";if(contentType){this.contentType &＃61; contentType}else{this.contentType &＃61; "application/x-www-form-urlencoded;charset&＃61;utf-8";}this.async &＃61; false;this.success &＃61; success;this.error &＃61; error;};//添加弹出层var axindex &＃61; null;$ax.prototype &＃61; {start: function () {axindex &＃61; layer.load(0, {shade: false});var me &＃61; this;var result &＃61; "";if (this.url.indexOf("?") &＃61;&＃61;&＃61; -1) {this.url &＃61; this.url &＃43; "?jstime&＃61;" &＃43; new Date().getTime();} else {this.url &＃61; this.url &＃43; "&jstime&＃61;" &＃43; 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 &＃61; data;if (me.success !&＃61;&＃61; undefined) {me.success(data);}},error: function (data) {if (me.error !&＃61;&＃61; undefined) {me.error(data);}}});layer.close(axindex);return result;},set: function (key, value) {if (typeof key &＃61;&＃61;&＃61; "object") {for (var i in key) {if (typeof i &＃61;&＃61;&＃61; "function")continue;this.data[i] &＃61; key[i];}} else {this.data[key] &＃61; (typeof value &＃61;&＃61;&＃61; "undefined") ? $("#" &＃43; key).val() : value;}return this;},setData: function (data) {this.data &＃61; data;return this;},clear: function () {this.data &＃61; {};return this;}};exports(&＃39;ax&＃39;, $ax);
});


使用时的参数设置

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


java后台接收

/*** 修改数据** &＃64;param quarContent* &＃64;return*/&＃64;Permission&＃64;RequestMapping("/edit")&＃64;ResponseBodypublic ResponseData editQuarContent(&＃64;RequestBody QuarContent quarContent) {this.quarContentService.editQuarContent(quarContent);return SUCCESS_TIP;}