热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

layui将table转化表单显示的方法(即table.render转为表单展示)

今天小编就为大家分享一篇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("
  • " +v.Name+ ""+myJson+""+ "
  • " ) 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转为表单展示)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


    推荐阅读
    author-avatar
    潇潇洒洒牛仔_584
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有