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)鲄ⅲ愃朴趚xx.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ǎn)單總結(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)文章
本篇主要是對(duì)JS操作iframe里的dom進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
判斷滾動(dòng)條滑到底部觸發(fā)事件(實(shí)例講解)
下面小編就為大家?guī)硪黄袛酀L動(dòng)條滑到底部觸發(fā)事件的實(shí)例講解。具有很好的參考價(jià)值。一起跟隨小編過來看看吧，希望對(duì)大家有所幫助2017-11-11
本文主要對(duì)Javascript的外部對(duì)象進(jìn)行介紹，列舉了具體實(shí)例。便于理解。有需要的朋友可以看下2016-12-12
這篇文章主要介紹了JavaScript二叉樹及各種遍歷算法詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
用來屏蔽鼠標(biāo)右鍵的代碼，破解方法也比較簡(jiǎn)單。比較根本。禁掉js什么也運(yùn)行不了。2009-12-12
js實(shí)現(xiàn)3D圖片環(huán)展示效果
本文主要介紹了js實(shí)現(xiàn)3D圖片環(huán)展示效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
layui 動(dòng)態(tài)設(shè)置checbox 選中狀態(tài)的例子
今天小編就為大家分享一篇layui 動(dòng)態(tài)設(shè)置checbox 選中狀態(tài)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
SyntaxHighlighter自動(dòng)識(shí)別并加載腳本語言
SyntaxHighlighter是一個(gè)使用JavaScript編寫的支持多種編程語言語法高亮的JS插件，很多大型網(wǎng)站或博客都在使用?，F(xiàn)在給大家介紹一下如何讓它自動(dòng)識(shí)別加載我們添加的代碼語言2017-02-02
如何防止JavaScript自動(dòng)插入分號(hào)
JavaScript語言有一個(gè)機(jī)制：在解析時(shí)，能夠在一句話后面自動(dòng)插入一個(gè)分號(hào)，用來修改語句末尾遺漏的分號(hào)分隔符。然而，由于這個(gè)自動(dòng)插入的分號(hào)與JavaScript語言的另一個(gè)機(jī)制發(fā)生了沖突，即所有空格符都被忽略，因此程序可以利用空格格式化代碼2015-11-11