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


Posted in Javascript onSeptember 24, 2019

现有一个

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转为表单展示)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
js判断是否是手机页面
Mar 17 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
JavaScript RegExp 对象用法详解
Sep 24 #Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 #Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 #Javascript
关于layui时间回显问题的解决方法
Sep 24 #Javascript
Vue之Mixins(混入)的使用方法
Sep 24 #Javascript
JavaScript Array对象使用方法解析
Sep 24 #Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 #Javascript
You might like
php需登录的文件上传管理系统
2020/03/21 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python实现狄克斯特拉算法
2019/01/17 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
大学生在校学习的自我评价
2014/02/18 职场文书
党员实事承诺书
2014/03/26 职场文书
教师自荐信范文
2015/03/06 职场文书
同学聚会感言一句话
2015/07/30 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
python基础之文件操作
2021/10/24 Python