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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
详解javascript高级定时器
Dec 31 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
Vue表单验证插件的制作过程
Apr 01 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
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
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
python远程连接MySQL数据库
2019/04/19 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
2014年关于两会精神的心得体会
2014/03/17 职场文书
学校安全责任书
2014/04/14 职场文书
商业融资计划书
2014/04/29 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang