AngularJS Layui開發下拉框遇到的問題

2021-08-17 06:30:56 字數 2088 閱讀 1584

最近在做乙個專案,前端使用的是angularjs處理後台傳過來的資料,因為下拉框一直用的是原生的,倒是沒遇到什麼問題。直到我後來遇到了layui,因為專案原先的前端做的很爛,相容性特別差,然後我就想著用layui重新做個前端,之後問題就來了……

用過layui的都知道,她的下拉框是在原生的select上用div的形式顯示出來的,比原先的會好看很多,每次動態建立下拉框之後,我們都需要呼叫form.render();或者form.render('select');來過載下拉框。其他的我不知道,反正看社群裡的用js迴圈拼接的下拉框好像都是可以用render來過載的。

但是我tm用angularjs就死活都不可以,看看前端**:

請選擇省

}

這樣寫是可以正常顯示出來沒錯,在篩選或者新增這種操作中沒有問題,但是在修改中,問題就會暴露出來了。

請選擇省

}

這樣寫了之後我就發現,在檢查檢視中我可以看到select其實已經構建好了,包括選中項的狀態也是對的,但是前段顯示的就是沒有。包括後來我用$(id).val();的方式賦值,結果更為過分,省份是選中了,但是市和區都還是預設的「請選擇市/區」。

layui中有乙個功能模組叫「模板引擎」,在網上看到過有人會用這個來做省市區**級聯,後來我也跟著用這個做了乙個省市區**級聯,還可以,基本上的功能都可以實現,就是**太多太重複了。

(忘記前端的**了……)

接著我們來看看成果:

可以看到已經完全滿足我的需求了,但是問題就來了,就向我剛剛說的,這樣寫**量太大了,每次需要用到下拉框的時候,包括下拉框的事件,都需要寫一遍,後來秉著能少一點**就少一點的原則,想著還是封裝一點什麼東西……

新建乙個js檔案:

layui.use(['laytpl', 'form'], function() );

}form.render('select');

}});

這樣我們在需要用到下拉框的頁面引入這個js,然後我們呼叫方法所需要的資料格式也要改一下。

layui.use([ 'form', 'laytpl' ], function() ;

// 缺省市級資料

var cityjson = ,

"select": "湖北省"

}; // 預設區域資料

var areajson = ;

// 獲取省份下拉框

var province = document.getelementbyid("province");

// 獲取市級下拉框

var city = document.getelementbyid("city");

// 獲取區縣下拉框

var area = document.getelementbyid("area");

// 將下拉框資料封裝成json

var provinceselectjson = ;

var cityselectjson = ;

var areaselectjson = ;

renderselect([ provinceselectjson, cityselectjson, areaselectjson ]);

});

雖然說將渲染下拉框的部分封裝了乙個方法,但是這樣寫同樣有乙個弊端,就是封裝資料挺累的,我也還沒有找到乙個比較好的方法來封裝這個或者解決這個。如果有哪位大神碰巧看到了這篇部落格並且有比較好的解決辦法,還望不吝賜教。(手動滑稽……)

注意:最後這個裡面有一點要注意一下,在獲取下拉框那一步的時候,切記不要用jquery的方法去獲取,即$(id)。我開始想偷懶用這個好像沒辦法將資料渲染到下拉框上,只有用js的dg(id)的方法才可以。

Structured Streaming 開發入門

structured streaming 作為 spark 家族的新成員,通過 spark sql dataframe 來處理 batch streaming 資料,基本的 sparksql api 即可實現離線處理和流式處理,大大的方便了流式計算的開發,另外還提供了豐富的功能。structured...

傳奇開服怎麼開的起來?

有很多想開服的朋友都會問我,傳奇開服怎麼開的起來?其實這個問題從層面上講是有些模糊的,怎麼開的起來?淺層面來看,有伺服器 版本 備案網域名稱和平台就可以開起來 沒有技術的怎麼辦呢?沒有技術的建議大家先學會一些基礎的開服技術,例如架設 搭站 開區合區 微端配置 登入器配置和設定gm號這些,真的不難,不...

電腦開不開機 且開且珍惜

電腦開不開機了?這個確實有點棘手 不過大多數的時候都不會有太大問題 我在哈工大電腦110俱樂部做電腦義診的時候也經常遇到這種情況,今天就和大家談一談經驗。按電源鍵,燈不亮,沒反應 這種情況 遇見過!這種情況多半是電腦拆機清灰之後或是電腦受到了重創。有些不細心的志願者拆機之後忘了把電源排線插上是時有發...