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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
PHP 七大优势分析
2009/06/23 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JS中常用的消息框总结
2018/02/24 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
给女儿的表扬信
2014/01/18 职场文书
十佳护士获奖感言
2014/02/18 职场文书
多媒体教室标语
2014/06/26 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
2019年大学推荐信
2019/06/24 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js