layui vuejs實現頁面核取方塊

2021-08-26 12:43:53 字數 1065 閱讀 2531

頁面上出現核取方塊,核取方塊內容從後台獲取,在選擇後將資料傳輸到後台

querydeployins:function () {

$.getjson("/config_manage/configmodify/querydeployins?versionid=" + versionid, function (r) { //獲取ip與id

vm.hosts = r.deployins; //賦值給物件

console.log(vm.hosts);

var hoststr = "";

for (var index in vm.hosts){

var html = ""; //拼接核取方塊將各個值給入

console.log(vm.hosts[index].host);

hoststr = hoststr + vm.hosts[index].instance_id + ";"

form.on('checkbox(checkf)', function (data) {

console.log(data.elem.checked); //是否被選中,true或者false

console.log(data.value); //核取方塊value值,也可以通過data.elem.value得到

if (data.elem.checked == false){

hoststr = hoststr.replace(data.value + ";","");

else {

hoststr = hoststr + (data.value+";");

vm.deploylist.hosts = hoststr;

console.log(vm.deploylist.hosts);

form.render();

整體思路:

1、從後台獲取id:ip map物件list

2、提前拼接好核取方塊實現的html**

3、遍歷list,將核取方塊一一實現,最後from.render

4、定義物件,一開始將全部value預設寫入,字串拼接

5、監聽核取方塊,當被取消或是選中,擷取或是新增

實現頁面分頁

web專案經常遇到頁面分頁,在這裡總結一下。先進行 資料分析 需要傳給後台當前頁面數,每頁顯示幾條資料,資料總數形成的頁面總數 邏輯需求 將資料總數查出來形成頁面總數 首先是進行總數的計算,作用就是在前端頁面形成 1 n select count from 表 service中進行邏輯處理,根據資料...

實現頁面布局

當我們開發乙個 的時候,有幾種我們常見的頁面布局的方法,比如多欄布局頁面 彈性布局頁面。利用布局的方法使我們的頁面更完整更美觀。下面是我用 實現的多欄布局頁面 如下圖 首先建立頭部乙個div為box類,中間建立乙個大的div包裹著三個小的div,分別給它們設定類,尾部就跟頭部一樣然後設定乙個類box...

頁面導航實現

web頁面的導航選單一般用列表項實現,根據導航的位置劃分 縱向導航和橫向導航。我們先從最簡單的縱向導航開始 首頁 a li 13 li a href id n hot link target blank 百家 a li 14 li a href target blank div class icon...