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