最近實習公司給的新人練手項目用的layui,layui之前自己也接觸過但是也就是用了用table組件,沒有用過layer彈層這些東西,所以就了解了一下。
首先遇到的一個問題就是下拉框沒有樣式,然后加樣式需要在數據項或者表格外面套上form標簽,然后在layer彈層success的回調函數里面加form.render()進行渲染,彈層外面需要使用form組件(如下)進行包圍。然后這個success的回調是先寫layero再寫index,其它的例如yes回調相反。
layui.use('form',function(){
var form = layui.form;
}
然后第二個問題是下拉框數據回顯選中,這個問題搞了有3天,想了好多方法,首先是想的拿監聽到的對象直接在content里面頁面代碼里c:if進行判斷,相等就選中,但是沒有效果,我一直以為可能是el表達式${}不允許通過拼接這種方式比較,但是好像不是這個原因,好像是使用layui這個組件的原因。
這種方式不可行的話,就想到第二種方式,通過監聽到的對象拿到屬性去后台查出數據返回前台,在前台都通過拿域對象里面的數據就可以比較了,但是做這個的時候遇到了問題,前端使用ajax發的請求,發請求沒有問題,但是后端填充到request域中的數據前台頁面拿不到,原因是ajax是局部刷新,前台通過${}就取不到值,如果能取到在f12sources中是可以看到的,在network請求中預覽可以看到但是他返回給前台就沒有數據了,然后想到了可不可以用別的方式發請求呢,於是用了window.location.href="",通過這個也是可以請求后台的,給它拼接上參數就行,但是這種是network看不到請求的,然后后端直接跳回了頁面不是彈出修改窗口那個頁面,這就難受了,雖然前台可以取到數據了但是對應的不是修改頁面,這就難受了,反正也有問題。
所以就找了最后一種方法,因為是使用的layui,那就看下layui有沒有提供什么下拉框選中這種方案,查了挺多說的都用不上,沒啥意義,然后其中一個是有用的,實現方案是在success回調里面加如下語句,layui中對下拉框做了封裝,lay-value對應得是下拉框值,從監聽對象拿到屬性賦值給lay-value這個屬性代表選中的數據,然后通過下拉框的id調siblings點擊事件就ok了。
var select = 'dd[lay-value='+data.reverse1+']';
$('#uriskLevel').siblings("div.layui-form-select").find('dl').find(select).click();
然后回顯單選框選中的話比較簡單,直接在layer彈層success回調里加上$(':radio[name="uaccident"][value='+data.reverse2+']').prop("checked",true);就ok了,不過需要在后面加上form.render()刷新一下,要不單選框沒有效果。
