快捷導(dǎo)航

layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)

更新時間：2019年09月24日 10:05:27 作者：Heerey525

今天小編就為大家分享一篇layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

現(xiàn)有一個

table.render({
  id : 'table',
  type:'post',
 elem : '#table',
 url : url,
 where : {'Id' : $data.Id},
 page:false,
 cols : [ [ //表頭
 
  ]]
})

最簡單直接用ajax請求，確保url路徑正確

$.ajax({
      dataType:'json',
      type:'post',
      url:url,
      data:{'Id': $data.Id},
      success:function (data) {
         $.each(data.rows,function (k,v) {
           var myJson=JSON.stringify(v);//轉(zhuǎn)化格式便于傳遞
           //遍歷展示，將每一行數(shù)據(jù)分別隱藏在span便簽
          $(".ul").append("<li value="+v.id+" class='layui-btn layui-btn-add '>"
            +v.Name+
            "<span class='vid'>"+myJson+"</span>"+
            "</li>"
          )
           var nowTemp=$("li[value='"+temp+"']");//監(jiān)測編輯的對應(yīng)行
          if(nowTemp){
            nowTemp.addClass("layui-table-double");
          }
})
  
}
})

監(jiān)聽每一個ul中動態(tài)產(chǎn)生的li

 $('ul').on('click', 'li', function () {
    var data=JSON.parse($(this).find('.vid').text());
    $(this).addClass("layui-table-double");
    $(this).siblings().removeClass("layui-table-double");
    //點擊每個動態(tài)生成的li標簽，可以將其內(nèi)部span隱藏的數(shù)據(jù)展示出來
    appmod.formRender('Form',data);
  });

可以編輯

$('.edit').click(function () {
    var dataTemp=$(".layui-table-double span").text();
    var data=JSON.parse(dataTemp);
    appmod.formRender('Form',data);
    //修改后重新提交
  })

刪除按鈕

  $('.del').click(function () {
    var dataTemp=$(".layui-table-double span").text();
    var data=JSON.parse(dataTemp);
    layer.confirm('真的要刪除嗎?', function(index) {
      $.ajax(url,{'id' : data.id},function(){
        layer.close(index);
        window.location.reload()
      });
    });
  })

保存（確認修改）

var temp=0
form.on('submit(save)', function(data){
    try{
      var formData = data.field;
      appmod.convertFormData('Form',formData);
      var ids = []; 
      formData = $.extend(formData,{Ids:ids});
      $.ajax(url,formData,function(resp){
        $(".ul li").remove();
        var newId=$("[name=id]").val();
        temp=newId;
      //調(diào)用本文第二段代碼塊
      });
    }catch(e){
      $.showErr('未知異常');
    }
    return false;
  });

以上這篇layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: