精华内容
下载资源
问答
  • 主要介绍了layui实现显示数据表格和搜索功能,结合实例形式分析了layui显示数据表格和搜索功能具体界面布局、功能实现相关操作技巧,需要的朋友可以参考下
  • 本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考,具体如下: <div class=layui-inline> <input class=layui-input name=keyword id=demoReload autocomplete=off> <...
  • 主要为大家详细介绍了layui实现数据表格点击搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇layui实现数据表格自定义数据项,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要为大家详细介绍了layui实现数据分页功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 根据利用layui的框架原理实现数据表格与数据库的显示、导入、导出、增删改查等一系列操作,从而实现最终的目的需求。
  • 本文实例为大家分享了layui实现数据分页功能,供大家参考,具体内容如下 官网layui table演示页面 示例截图: 页面引入layui.css、 layui.js <table class=layui-table id=layui_table_id lay-filter=test> ...
  • 今天小编就为大家分享一篇layui实现数据表格时间戳转换为时间格式的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要为大家详细介绍了layui实现数据表格table分页功能、异步加载,表格渲染,含条件查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • springboot+layui实现数据表格功能,提供增删改查模糊搜索功能,含有项目解析以及sql文件,具有echart图表功能,是一个功能齐全的后台管理系统模板。
  • 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现。 如果你是新手学习layui,那这个绝对会对你有很大的帮助; 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考。 使用心得...
  • 今天小编就为大家分享一篇layui实现数据表格隐藏列的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui导出所有数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Layui实现数据表格默认全部显示(不要分页),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui实现form表单同时提交数据和文件的代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui实现根据table数据判断按钮显示情况的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui实现多选或批量数据表格 行数据
  • 这是通过ssm+layui 实现的简单的对数据表格的增删改查,所有页面纯由layui实现。如果你是新手学习layui,那这个绝对会对你有很大的帮助; 如果你之前已经学过甚至已经使用过,那这个可以当做一个参考
  • 本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>...
  • 该源码与 https://blog.csdn.net/delight_sl/article/details/89814828 该篇博客配套使用
  • 主要介绍了Layui弹框中数据表格中可双击选择一条数据实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • layui table更新一行数据

    千次阅读 2021-08-03 10:07:29
    layui 给我们提供了update方法,可以用来修改当前行数据 //工具条事件 table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj....

    需求

            点击一行数据后面的处理,只刷新这行数据的内容,不全部刷新页面

    update  

    layui 给我们提供了update方法,可以用来修改当前行数据

    //工具条事件
    table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
     
      if(layEvent === 'detail'){ //查看
        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
          layer.close(index);
          //向服务端发送删除指令
        });
      } else if(layEvent === 'edit'){ //编辑
        //同步更新缓存对应的值  --- 看这里
        obj.update({
          username: '123'
          ,title: 'xxx'
        });
      } 
    });

    实际应用

    但是这样只能更新行数据,是没有办法更新toobar的

    table.on('tool(test)', function(obj){ 
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)  
        if(layEvent === 'updateStatus'){ //修改状态
            //ajax请求  -- 略  status -> 1
           //更新当前行数据的状态值  status 是属性值
        obj.update({
          status: 1 
        });
      }
    });

    源码里面的定义

    这个代码是从:https://blog.csdn.net/MicroAnswer/article/details/102871487,

    我本地的table.js 没有格式化 所以就灭有翻译,直接引用了一下

     // 这里就是我们实际调用更新的代码位置。
            ,update: function(fields){ //修改行数据
              fields = fields || {};
    
              // 遍历传进来的每一个键值对(实际上就是我们的每一条数据)。
              layui.each(fields, function(key, value){
                // data 是通过服务器返回的实际的每一行数据
                if(key in data){
    
                 // 这边定义一个templet用于确定下方是使用模板来更新数据还是
                 // 直接使用字段的值来进行填充。
                  var templet,
                  td = tr.children('td[data-field="'+ key +'"]');
                  data[key] = value;
    
                  // 这个 eachCols 就是一个循环,i 是下标, item2 就是我们render函数
                  // 传递进来的每一个col的配置项。
                  that.eachCols(function(i, item2){
    
                    // 判断指定字段是否使用模板进行数据展示。
                    // 是的话就直接赋值模板。
                    if(item2.field == key && item2.templet){
                      templet = item2.templet;
                    }
                  });
    
                  // 然后这里就进行数据的模板渲染,然后更新到表格界面
                  td.children(ELEM_CELL).html(parseTempData({
                    templet: templet
                  }, value, data));
                  td.data('content', value);
                }
              });
            }
    

    分析:其实可以看到update方法就是:

    1.传入过去的fileds数组进行遍历

    2.把需要更新的filed的值进行更新

    3.如果filed是有模板:templet 进行渲染的话就进重新进行模板渲染

    所以要实现toolbar一起更新,我们就把toolbar 

    1. 添加一个filed

    2. 调用update 重新渲染templet 就可以了

    toolbar一起更新 

    之前定义的toolbar

     修改后的toolbar

    1.把toolbar - 修改为 : templet

    2.添加filed 字段: remark1这个字段是后台返回的一个字段,我的代码里面这个字段没有用到,大家可以重新定义一个

    这里其实主要就是为了让 当执行update字段的时候让它重新渲染

     在我们的update里面把这个字段也更新一下

    table.on('tool(test)', function(obj){ 
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)  
        if(layEvent === 'updateStatus'){ //修改状态
            //ajax请求  -- 略  status -> 1
           //更新当前行数据的状态值  status 是属性值
        obj.update({
          status: 1 ,
          remarks:'' //这里的字段值随便是什么都可以,主要是为了重新让它渲染
        });
      }
    });

    这样就可以实现只刷薪当前行数据和toolbarl

    展开全文
  • 今天小编就为大家分享一篇layui实现鼠标移动到单元格上显示数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了如何基于layui的laytpl实现数据绑定的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,499
精华内容 4,599
关键字:

layui实现更新数据