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;
  });

以上这篇layui将table转化表单显示的方法(即table.render转为表单展示)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。