layui table数据表格reload where参数保留问题

最新推荐文章于 2024-01-01 00:28:39 发布

weixin_30247307

最新推荐文章于 2024-01-01 00:28:39 发布

阅读量9.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json 测试 ViewUI

原文链接：http://www.cnblogs.com/xidianzxm/p/10786140.html

本文探讨了在使用layui数据表格组件时，如何妥善处理reload函数的where参数问题，避免搜索条件在分页时丢失，同时确保分页功能正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui table数据表格reload where参数保留问题

在使用layui过程中多多少少会遇到些问题
table reload 有个坑：reload时where参数会保留上次的参数，如果用

done: function(res, curr, count){ this.where={};}

来处理，默认的表格分页会把第一次请求的参数去掉。两者遇到些冲突。
用下面的方式来解决：

var tableIns = table.render({
      elem: '#test-table-toolbar' //绑定table表格
      // ,url: '/api/mockrecord/findByRPID?rpid=100002'
      ,url: '/api/bug/findAllPageInfo?project_name='+project_name
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,title: '用户数据表'
      //,height:500

        //不建议这样使用，建议直接返回Map
        /*,parseData: function(res){ //res 即为原始返回的数据
          return {
              "code": 0, //解析接口状态
              "msg": "hint message", //解析提示文本
              "count": 10, //解析数据长度
              "data": res //解析数据列表
          };
        }*/

        /*
        ,request: {
            pageName: 'curr' //页码的参数名称，默认：page
            ,limitName: 'nums' //每页数据量的参数名，默认：limit
        }*/

      ,cols: [[
        // {type: 'checkbox', fixed: 'left'},

        {field:'bug_key', title: '关键字', width: 150,fixed: 'left'}

        ,{field:'bug_summary', title:'概要', width:600, unresize: true/*, sort: true*/}
        ,{field:'bug_labels', title:'模块', width:100, sort: true}
        ,{field:'bug_labels', title:'类型', width:100, sort: true}

        ,{field:'bug_assigneedisplayname', title:'经办人', width:100,  templet: function(res){
          return '<em>'+ res.bug_assigneedisplayname +'</em>'
        }}
        ,{field:'bug_reporterdisplayname', title:'报告人', width:100,  templet: function(res){
                    return '<em>'+ res.bug_reporterdisplayname +'</em>'
                }}
        ,{field:'bug_priority', title:'优先级', width:100, /*, sort: true*/}
        ,{field:'bug_status', title:'状态', width:100}


        ,{field:'bug_createddate', title:'创建日期',width:100,templet: '<div>{{ layui.laytpl.toDateString(d.bug_createddate) }}</div>'}
        ,{field:'bug_updateddate', title:'已更新',width:100,templet: '<div>{{ layui.laytpl.toDateString(d.bug_createddate) }}</div>'}
        ,{field:'bug_duedate', title:'到期日',width:100,templet: '<div>{{ layui.laytpl.toDateString(d.bug_createddate) }}</div>'}
        ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
      ]]
      ,page: true
      ,limit: 50
      ,limits: [50, 100, 150]
      // ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
      ,jump: function(obj, first){
        if(!first){
            layer.msg('第 '+ obj.curr +' 页');
        }
      }
    });

使用table的实例化对象来reload

tableIns.reload({
              page: {
                  curr: 1 //重新从第 1 页开始
                  ,limit:50
              }
              , method:'POST'
              ,url: '/api/bug/findAllBugsBySearchCondition'
              ,where: formData
              ,contentType: 'application/json'
              //,height: 300
              ,done: function(res, curr, count){
                  //this.where={};
                  //不清空，有问题：搜索条件会保留
                  //清空，  有问题：分页的时候没有搜索条件了,分页会受到影响
              }
          });

转载于:https://www.cnblogs.com/xidianzxm/p/10786140.html