1. 程式人生 > >layer彈出層使用之select標記

layer彈出層使用之select標記

layer前端框架,追求極簡,喜歡的風格。好看是好看,用起來比較dt,,,,,

今天打算寫一個通用的方法:通過ajax請求後臺資料,顯示在select下拉列表裡面。

下面是這個方法:

url:請求的路徑
id:要載入資料的select 元素的id.
objName:返回的json物件裡的資料名  比如返回的是{msg:'ok',rows:[{'id':1,text:'111'},{id:'2',text:'222'}]} 則應該傳入'rows'作為引數
textName:表示物件裡面哪個欄位作為顯示的內容 此處為 'text'
valueName:表示物件裡面哪個欄位作為select的 value屬性值
config:傳入的引數
func:回撥函式
selValue:下拉列表預設選中的值


function loadSelector(url, id, objName, textName, valueName, config,func,selValue) {
	$.post(url,config,function(data) {
		if (data.msg == "OK") {
			if (data[objName] && data[objName].length > 0) {
				var $selector = $('#'+id);
				var rows = data[objName];
				for ( var row in data[objName]) {
$selector.append('<option value="'+rows[row][valueName]+'" '+(selValue==(rows[row][valueName]+'')?'selected':'')+'>'
								+ rows[row][textName]
				}
			}
		}
	})
}
var form;
function callback(){
	form.render();
}
layui.use([ 'form','element', 'layer' ], function() {
	window.element = layui.element(); // 導航的hover效果、二級選單等功能,需要依賴element模組
	window.layer = layui.layer;
	form = layui.form();
	loadSelector(basePath + '/admin/message/list', 'city', 'rows', 'content','id', {},callback,'52');
}
此方法寫好之後,怎麼也顯示不出來,後來開啟除錯模式發現,layer將我的select(A)隱藏了,用其他元素(B)替換了,所以在載入select之後,只改變了隱藏的A,卻沒有改變顯示的B,這時就丫悲劇了,還得自己改?看了一下官網的文件,這說明也忒少了點兒吧。。千辛萬苦找到一個省市級聯動的例子,就是它了。看裡面有一個layui.use(['form'],function(){}) 用於載入form模組,否則自己的表單元素不會顯示正確,在回撥函式裡面有form=layui.form();方法,用於獲取layui的form物件。而這個方法是通過回撥,也就是非同步的,不能保證回撥的時間是否在使用form物件的的前面,所以要在form載入完成的回撥函式裡面寫form.render()渲染表單元素。主要注意問題就是:

1、select在layui表單裡面會被layui自帶樣式元素替代,而原來的會被隱藏

2、使用layui載入模組時,回撥函式是非同步的,不一定在你使用時候就已經準備好了。