layui寫后臺表格思路和賦值用法詳解

layui.form 模塊用法總結(jié)。

基于layui做 表單 賦值 取值

思路

一. 初始一個方法用來給彈窗賦值，一種賦值，是按數(shù)據(jù)賦值，一種是清空數(shù)據(jù)

 function initContorl (data){   //傳數(shù)據(jù) 賦值為數(shù)組 不傳數(shù)據(jù)賦值為空
 if(data){
 form.val("control",data)
 }else {
 form.val("control",
 {
  "name1": "",
  ,"name2": "",
 ,"name3":""
 })
 }

* layui 中form.val();方法form.val("control") 中的control為 <form> 標簽中的 lay-filter 值, name1,name2,name2為 input的name屬性值，我一般和id設為同一個

*賦值

1. <input type="text" name="name"> name val

2 <select name="name"></select> name val

3 <input type="radio" name="name"> name val

4 <textarea name="desc"></textarea> name val

5 開關(guān) <input type="checkbox" name="off_on" lay-skin="switch" lay-text="開啟|關(guān)閉"> name val(true/fasle)

6 多選這里比較搞人 layui 要設置不同的名字然后將對應的 name 設置為true 而后臺需要的是 name:vule 的json格式.

具體做法為:寫成 <input type="checkbox" name="subject[GS024]" value="GS024" title="生命安全"> subject為傳給后端的

name值，賦值 intdata["subject["+el.st_grade+"]"] = true; intdata 傳給 initContorl (data) 的data參數(shù).

所以多選賦值： name[vlue] val(true/fasle);

*清空 不傳data initContorl就是清空

1-5 自己設 6 設置為 $("input:checkbox").attr("checked",false);使用過后要更新下表單狀態(tài) form.render('checkbox');

二 獲取表單數(shù)據(jù);

layui 是在監(jiān)聽表單提交的時候 獲取表格值 表單提交按鈕結(jié)構(gòu) <button lay-submit lay-filter="*">提交</button

監(jiān)聽方法

 form.on('submit(filter值)', function(data){

 data.field //即 為獲取的表格值；

 return false;//阻止表單提交采用jaxa處理數(shù)據(jù)

})

獲得的結(jié)構(gòu)為

注意這里多選的格式并不是我們想要的格式;多選的取值不能用

于是這里用另外一個方式獲取

首先清除掉 帶dx的項

var getData = data.field;

for( key in getData){
  var myReg = /dx/;
  if ( myReg.test(key)){
   delete getData[key];
  }
  }

然后給他賦值正確的格式

var arry = [];

$("input:checkbox[name^='grade']:checked").each(function(i){
  arry[i] = $(this).val();
 });

getData.dx = arry;

三、到這里完成 表單的賦值 取值，用layui很簡單。 做表格 增刪改查 這個模塊必不可少

以上這篇layui寫后臺表格思路和賦值用法詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。