2.2.2版本table模块reload两种方式还有区别?

提问 已结 10 2806
岁月小偷
悬赏:20飞吻
版本:layui Chrome 62.0.3202.94 浏览器:
目前用2.2.2版本,首先table的reload重载有一个改变,目前支持当前页面重新查询,也可以从首页查(page:{curr:1}),跟以前的一个小区别,官网的文档没有特别的说明,很隐形的说reload的例子中备注了从第一页查。另一个问题刚刚遇到的是,reload的两种方式竟然结果不一样。情景如下
首先输入了查询条件查出来的结果,然后切换是否分页,是否分页的功能也是reload修改page属性重新加载,问题来了,上面的搜索条件失效了,然后又看了一下排序,排序也是reload修改initSort,结果正常,才发现两个reload用的方式不一样。
table.reload(ID, options) 结果正常。
tableIns.reload(options) 结果异常丢失了上面的查询条件。
具体原因没时间去深究了,猜想是tableIns只是render返回的对象,后续的修改参数没有同步进去,至于是不是大家有时间可以验证下,希望layui更加丰满。
回帖
  • 人生如水
    2017-11-24
    @岁月小偷 和你得情况一样,都重载了,但是table.reload(ID, {data:newData})结果不对,多谢,顺便问下源码是会员才有吗
    0 回复
  • @人生如水 测试了一下,也可以重载但是结果有问题。不过不知道是不是你遇到的,最好可以截图或者看下你的相关代码看是不是缺少什么配置,我遇到的问题感觉也是源码里面的bug。代码如下

    html部分
    <button onclick="fn()">更新数据</button>
    <table id="testTable" lay-filter="testTable"></table>
    js部分
    var tt;
    var fn = function () {
    if (!tt) {
    return;
    }
    // tt.reload({
    // data: [
    // {id: 'new1', name: 'sun', age: 10},
    // {id: 'new2', name: 'sun', age: 10},
    // {id: 'new3', name: 'sun', age: 10},
    // {id: 'new4', name: 'sun', age: 10},
    // {id: 'new5', name: 'sun', age: 10},
    // {id: 'new6', name: 'sun', age: 10}
    // ]
    // });
    layui.table.reload('testTable', {
    data: [
    {id: 'new1', name: 'sun', age: 10},
    {id: 'new2', name: 'sun', age: 10},
    {id: 'new3', name: 'sun', age: 10},
    {id: 'new4', name: 'sun', age: 10},
    {id: 'new5', name: 'sun', age: 10},
    {id: 'new6', name: 'sun', age: 10}
    ]
    });
    };
    tt = table.render({
    elem: '#testTable',
    id: 'testTable',
    data: [
    {id: 1, name: 'sun', age: 10},
    {id: 2, name: 'sun', age: 10},
    {id: 3, name: 'sun', age: 10},
    {id: 4, name: 'sun', age: 10},
    {id: 5, name: 'sun', age: 10},
    {id: 6, name: 'sun', age: 10},
    {id: 7, name: 'sun', age: 10},
    {id: 8, name: 'sun', age: 10},
    {id: 9, name: 'sun', age: 10}
    ],
    cols: [[
    {field: 'id'},
    {field: 'name'},
    {field: 'age'}
    ]],
    page: false
    });
    打开注释分别测试两种方法,结果却是不一样,
    tableIns.reload(options)结果是对的,
    table.reload(ID, {data:newData})结果不对如下图
    还是看源码

    可以发现一个用的是深拷贝,一个不是。出问题的就是深拷贝的部分。
    深拷贝的睡醒数组只是修改了相关的index位置的数据,所以出现了上面遇到的问题,修改再测试
    //表格重载
    thisTable.config = {};
    table.reload = function(id, options){
    var config = thisTable.config[id];
    if(!config) return hint.error('The ID option was not found in the table instance');
    // return table.render($.extend(true, {}, config, options));
    return table.render($.extend({}, config, options));
    };
    结果就对了,但是问题来了。两个reload的实现方法不一样的意义是什么?改成浅拷贝能修复这个问题,但是会引入其他的可能问题,因为浅拷贝,如果修改了config的其他属性是对象属性中的一个属性,比如page:{curr:1}那么原先里面如果设置了limit:20之类的属性也会被破坏,所以如何处理这个问题,估计就得有劳贤大大他们在以后的版本修复了估计。
    1 回复
  • 找到原因了,reload其实会返回一个新的tableIns对象,里面的配置才是最新的,这个官网里面也没有写有没有返回值之类的,如果使用tableIns来reload的话每次reload之后都要重新更新tableIns对象,后面的重载查询才不会出错。tableIns = tableIns.reload(options);
    0 回复
  • 好吧,坑继续踩,table.reload(ID, options)会返回tableIns对象,但是tableIns.reload(options)不会返回更新之后的tableIns对象!健壮性还是有待提高呀[黑线]
    0 回复
  • 人生如水
    2017-11-23
    table.reload(ID, options),为什么不会重载,我用得本地数据
    0 回复
  • 人生如水
    2017-11-23
    tableIns.reload(options)就可以
    0 回复
  • 人生如水
    2017-11-23
    @岁月小偷 求告知table.reload(ID, options)和tableIns.reload(options)得区别,我使用得本地数据,table.reload(ID, {data:newData})没有重载,tableIns.reload({data:newData})就可以
    0 回复
  • @人生如水 不是,可以在git上直接获得https://github.com/sentsin/layui
    0 回复
  • 人生如水
    2017-11-24
    @岁月小偷 好的 多谢
    0 回复
  • @人生如水 不客气
    0 回复
本帖已设置禁止回复