layui將table轉化表單顯示（即table.render轉為表單展示）

現有一個

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);//轉化格式便於傳遞
                     //遍歷展示，將每一行資料分別隱藏在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+"']");//監測編輯的對應行
                    if(nowTemp){
                        nowTemp.addClass("layui-table-double");
                    }
})
    
}
})

監聽每一個ul中動態產生的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");
        //點選每個動態生成的li標籤，可以將其內部span隱藏的資料展示出來
        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;
           //呼叫本文第二段程式碼塊
            });
        }catch(e){
            $.showErr('未知異常');
        }
        return false;
    });