layui使用技巧和常見問題匯總
1.表單重新渲染(處理下拉框未展示問題)
有時(shí)候我們?cè)趈s中進(jìn)行下拉框的動(dòng)態(tài)初始化，或者我們做聯(lián)動(dòng)下拉的時(shí)候發(fā)現(xiàn)已經(jīng)查詢出數(shù)據(jù)但是下拉框并沒有展示出來，這個(gè)時(shí)候就需要我們?cè)诔跏蓟瓿芍蠡蛘呗?lián)動(dòng)數(shù)據(jù)查詢之后對(duì)表單進(jìn)行重新渲染，這樣就能加載出來了。
layui.use('form', function(){
// 高版本建議把括號(hào)去掉，有的低版本，需要加()
var form = layui.form;
// 也可以單單初始化下拉框form.render('select');
form.render();
});
可以將方法都封裝在一個(gè)變量中，調(diào)用的時(shí)候更方便，例如要調(diào)用方法直接寫
commonFuns.renderForm();
// 封裝方法
var commonFuns = {
//重新渲染表單
renderForm : function(){
layui.use('form', function(){
//高版本建議把括號(hào)去掉，有的低版本，需要加()
var form = layui.form;
form.render();
});
}
};
原因是layui內(nèi)置的Form模塊為全自動(dòng)渲染，她將原本普通的諸如select、checkbox、radio等元素重置為你所看到的模樣，只要你的頁面對(duì)應(yīng)js有像以下定義即可渲染出來
layui.use('form', function(){
var form = layui.form;
});
2.下拉框的onchange事件處理
針對(duì)下拉框的響應(yīng)事件onchange，在layui中不在select元素直接添加onchange事件，而是在select元素添加一個(gè)lay-filter值
<select name="industryType" id="industryType" lay-filter="industryType" > </select>
然后在對(duì)應(yīng)的js中對(duì)該下拉框元素進(jìn)行監(jiān)聽
// 對(duì)表單元素操作比如監(jiān)聽下拉框事件
layui.use(['form'], function(){
var form = layui.form;
form.on('select(industryType)', function(data){
// 下拉響應(yīng)事件，和原始的onchange一個(gè)效果
commonFuns.industryTypeChange();
// 重新渲染表單
commonFuns.renderForm();
});
});
3.關(guān)閉彈出層，重新加載父頁面
假設(shè)我們需要做一個(gè)新增頁面，通過點(diǎn)擊一個(gè)新增按鈕彈出一個(gè)新頁面，在新的頁面進(jìn)行表單填寫然后保存，我們需要的效果是保存成功后會(huì)關(guān)閉當(dāng)前新頁面然后重新加載父頁面。
layer.alert("新增成功！",function(){
// 刷新父頁面
window.parent.location.reload();
// 獲取當(dāng)前彈出層的層級(jí)
var index = parent.layer.getFrameIndex(window.name);
// 關(guān)閉彈出層
parent.layer.close(index);
});
4.父頁面如何傳遞參數(shù)給彈出層的iframe頁面
在頁面處理中經(jīng)常碰到需要彈出一個(gè)頁面，比如修改頁面或者查看頁面等，這時(shí)候可以用layer.open進(jìn)行操作，如果我們用layer.open打開的是一個(gè)iframe頁面，我們?cè)撊绾螌⒏疙撁娴囊恍﹨?shù)傳遞過去，有2種方法，第一種直接在url地址后面?zhèn)鲄?，類似于xxx.action?name=xxx，第二種則是在父頁面的js寫一個(gè)對(duì)象然后給對(duì)象賦值
//監(jiān)聽工具條
table.on('tool(viewGrid)', function(obj){
var selectData = obj.data;
if(obj.event === 'btnView'){
// 注意下面的param不要在此處加var，否則就限定范圍了，可以直接就按照下面寫
param = {
selectData : selectData,
type : "view"
};
// 頁面層
layer.open({
type: 2,
title : '查看詳情',
area: ['1000px', '650px'],
content: url
});
}
});
在iframe的子頁面中可以按照以下方式取出傳遞的參數(shù)
<script type="text/javascript"> var selectData = parent.param.selectData; var type = parent.param.type; </script>
5.表單元素處于禁用狀態(tài)
在layui中讓表單元素處于禁止?fàn)顟B(tài)，加上disabled即可，但是為了效果更加明顯，我們可以在元素上加上一個(gè)內(nèi)置class樣式名稱layui-disabled，加上這個(gè)樣式會(huì)有禁止的圖標(biāo)出現(xiàn)
<input type="text" id="addrName" name="addrName" class="layui-input layui-disabled" disabled/>
6.表單提交如何獲取表單元素值集合
要獲取表單元素的值的集合，需要注意以下幾點(diǎn)
第一要在表單提交的按鈕元素上加上lay-submit以及l(fā)ay-filter
<button class="layui-btn layui-btn-normal" data-type="btnSave" id="btnSave" lay-submit lay-filter="btnSave">保存</button>
第二在表單的各個(gè)元素都必須要有name元素，不然獲取不到該元素的值
<input type="text" id="notes" name="notes" class="layui-input" />
表單監(jiān)聽事件得到表單元素值集合
btnSave : function(){
// 監(jiān)聽表單提交
form.on('submit(btnSave)', function(data){
var formVal = data.field;
console.log(formVal);
});
}
以上submit后面括號(hào)中的值對(duì)應(yīng)前面按鈕中的lay-filter中的值
7.數(shù)據(jù)表格固定列
在表格中針對(duì)某一行，我們需要對(duì)該行進(jìn)行操作，比如查看或者修改，這個(gè)時(shí)候我們需要固定一列作為操作列來放置按鈕
首先在jsp頁面的中寫入按鈕，一般選擇放在body結(jié)束前，在script中寫一個(gè)id
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="btnEdit">編輯</a> </script> </body> </html>
然后在js的表格渲染中的cols最后加上以下代碼
{field:'wealth', title: '操作',fixed: 'right', width:100, align:'center', toolbar: '#barDemo'}
其中toolbar為前面寫的id元素，fixed表示固定位置
在按鈕中有個(gè)lay-event元素，可以用來表格工具條監(jiān)聽
//監(jiān)聽工具條
table.on('tool(viewGrid)', function(obj){
// 該行的數(shù)據(jù)
var selectData = obj.data;
if(obj.event === 'btnEdit'){
console.log(selectData);
}
});
8.帶搜索的下拉框
<select name="city" lay-verify="" lay-search> <option value="010">layer</option> <option value="021">form</option> <option value="0571" selected>layim</option> …… </select>
設(shè)定屬性 lay-search 來開啟搜索匹配功能
9.表單提交阻止頁面跳轉(zhuǎn)
form.on('submit(*)', function(data){
console.log(data.elem) //被執(zhí)行事件的元素DOM對(duì)象，一般為button對(duì)象
console.log(data.form) //被執(zhí)行提交的form對(duì)象，一般在存在form標(biāo)簽時(shí)才會(huì)返回
console.log(data.field) //當(dāng)前容器的全部表單字段，名值對(duì)形式：{name: value}
return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
});
在監(jiān)聽表單提交最后加上return false，不能只寫return
10.父頁面如何得到子窗口傳遞回來的值
原理：在父頁面的相關(guān)js中定義一個(gè)對(duì)象，然后在子頁面對(duì)這個(gè)對(duì)象進(jìn)行賦值，然后在父頁面的相關(guān)打開彈框的js中的頁面銷毀時(shí)取得這個(gè)值進(jìn)行操作即可
父頁面部分js
// 頁面層
window.returnVal = new Object();
layer.open({
type: 2,
title : "測(cè)試頁面" ,
area: ['1200px', '700px'],
content: url,
end : function (){
var returnVal = window.returnVal;
console.log(returnVal);
}
});
子頁面操作
btnOk : function(){
var item = new Object();
item.name = "測(cè)試";
item.type = "okType";
window.parent.returnVal = item;
var index = parent.layer.getFrameIndex(window.name);
// 關(guān)閉彈出層
parent.layer.close(index);
}
11.關(guān)于復(fù)選框獲取的注意事項(xiàng)
方法一：
https://www.layui.com/demo/table/operate.html
簡單總結(jié)
var checkStatus = table.checkStatus('viewGrid');
var checkData = checkStatus.data;
if(checkData.length == 0){
layer.alert('請(qǐng)至少選中一條記錄進(jìn)行刪除');
return false;
}
var checkIds =new Array();
for(var i=0;i<checkData.length;i++){
checkIds.push(checkData[i].XX_ID);
}
方法二：
先定義2個(gè)數(shù)組，分別存放復(fù)選框的id和當(dāng)前頁的數(shù)據(jù)
// 記錄選中的數(shù)據(jù) var checkIds =new Array(); // 當(dāng)前表格中的全部數(shù)據(jù) var table_data=new Array();
然后監(jiān)聽表格復(fù)選框
//監(jiān)聽表格復(fù)選框選擇，以下XXX_ID為表格記錄的主鍵id，按實(shí)際情況來
table.on('checkbox(viewGrid)', function(obj){
if(obj.checked==true){
if(obj.type=='one'){
checkIds.push(obj.data.XXX_ID);
}else{
for(var i=0;i<table_data.length;i++){
checkIds.push(table_data[i].XXX_ID);
}
}
}else{
if(obj.type=='one'){
for(var i=0;i<checkIds.length;i++){
if(checkIds[i]==obj.data.XXX_ID){
checkIds.splice(i,1);
}
}
}else{
// 清空
checkIds = new Array();
}
}
// 去重
checkIds = commonFuns.uniqueArray(checkIds);
});
數(shù)組去重方法
// 數(shù)組去重
uniqueArray : function (arr){
var res = [];
for(var i=0; i<arr.length; i++){
if(res.indexOf(arr[i]) == -1){
res.push(arr[i]);
}
}
return res;
}
然后要注意的是在表格初始化和表格重載(查詢)時(shí)需要清空復(fù)選框以及重新給表格數(shù)據(jù)賦值
表格初始化
table.render({
elem: '#viewGrid',
url: realUrl,
method:'post',
where:{queryParams : JSON.stringify(queryParams)},
cols: cols,
page: {
limit:10,
limits:[10,100, 150, 200]
},
height:450,
id : 'viewGrid',
done:function(res,curr,count){
checkIds = new Array();
table_data = res.data;
// 返回?cái)?shù)據(jù)關(guān)閉loading
layer.close(index);
}
});
表格重載
// 查詢
btnQuery : function(){
var queryParams = selfFuns.initQueryParams();
var index = layer.load(1, {shade: [0.3, '#000'] });//數(shù)據(jù)加載設(shè)置背景顏色
//執(zhí)行重載
table.reload('viewGrid', {
where:{queryParams : JSON.stringify(queryParams)},
page: {
curr: 1 //重新從第 1 頁開始
},
done:function (res) {
// 清空復(fù)選框
checkIds = new Array();
table_data = res.data;
//返回?cái)?shù)據(jù)關(guān)閉loading
layer.close(index);
}
});
}
到此這篇關(guān)于layui使用技巧和常見問題匯總的文章就介紹到這了,更多相關(guān)layui使用技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何通過遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果
JsonDiff是一個(gè)高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結(jié)構(gòu)的差異,并且將錯(cuò)誤信息反饋給用戶,下面這篇文章主要給大家介紹了關(guān)于如何通過遞歸方法實(shí)現(xiàn)用json-diff渲染json字符串對(duì)比結(jié)果的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)文件或圖片上傳記錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
.net,js捕捉文本框回車鍵事件的小例子(兼容多瀏覽器)，需要的朋友可以參考一下2013-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索歷史功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
element中el-switch的v-model自定義值的實(shí)現(xiàn)
在el-switch中設(shè)置active-value和inactive-value屬性,接受Boolean, String或Number類型的值,本文就來介紹一下element中el-switch的v-model自定義值的實(shí)現(xiàn),感興趣的可以了解一下2023-11-11
這篇文章主要介紹了JS實(shí)現(xiàn)繼承的幾種常用方式,結(jié)合實(shí)例形式分析了JavaScript繼承的四種常見實(shí)現(xiàn)方式,包括原型鏈繼承、構(gòu)造繼承、組合繼承及寄生組合繼承,需要的朋友可以參考下2019-06-06
表單驗(yàn)證在很多地方都可以用到，本文詳細(xì)的介紹了javascript表單是否為空驗(yàn)證方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)帶有動(dòng)畫的返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了關(guān)于console.log的輸出語句如何使用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)地區(qū)選擇偽五級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07