溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-09-26 04:55:27 來源：腳本之家 閱讀：146 作者：Heerey525 欄目：web開發(fā)

現(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)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手