admin

Jquery Datatable Editor 修改某个 Cell 值时的 BUG
Jquery Datatable Editor是个收费的插件,功能强大,界面是真的丑陋,官方文档 API 也是简陋...
扫描右侧二维码阅读全文
02
2020/01

Jquery Datatable Editor 修改某个 Cell 值时的 BUG

Jquery Datatable Editor是个收费的插件,功能强大,界面是真的丑陋,官方文档 API 也是简陋,真的是巨难用。

一个简单需求,在Datatable中添加一个checkbox开关按钮,点击时只修改当前列的字段,这个需求够简单常用了吧。。

但是,不知道是不是用的破解版的原因,之前修改某个Cell的时候会导致当前页的数据自动重新加载。

后来代码改来改去的不知怎的,修改后它就不刷新了,这也就有了现在的这个BUG

先来段修改某个Cell的代码吧:

$('#data_table').on('change', 'input[type=checkbox]', function (e) {
    e.preventDefault();
    editor.edit( $(this).closest('td'), false, {
            submit: 'changed',
            scope: 'cell'
        })
        .val( $(this).attr('name'), $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
});

第一次点击Checkbox的时候是成功的,再次点击,发现不会发起修改请求,简直操蛋,Jquery Datatable Editor这玩意儿作者尼玛吃屎去吧,以后打死也不用这东西了。

那么为什么会这样呢?我的猜测是,edit.submit()提交后本地的数据记录没有发生变化,所以再次点击的时候发现值与最开始Datatable初始化的一致,也就是没有发生changed,所以不会再次发起更新请求。

解决办法:
1、分析submit()方法源码,看看是哪里出了问题,如果是上面猜测的问题所在,那么就修改源码,更新本地的记录即可,但是,这玩意是收费的,所以你要分析源码也是分析混淆后的代码,然后去修改这不太现实,所以还是采用方法二吧,虽然不是最好的办法,但却简单实用。
2、在修改完数据后刷新Datatable,也就是重新加载一次数据(之所以说它不是最好的办法也是这个原因:需要重新发起一次加载数据的请求)
ajaxsuccess回调里添加如下代码:

var editor = new $.fn.dataTable.Editor({
"ajax": {
  edit: {
    type: 'PUT',
    url: '/admin/movie/_id_',
    dataType: 'json',
    contentType: 'application/json',
    data: function (d) {
      var params = d.data[Object.keys(d.data)[0]];
      return JSON.stringify(params);
    },
    success: function() {
        dtable.ajax.reload(null, false);//刷新当前页
    }
  }
},
"table": "#data_table",
"idSrc": "id",
"fields": [ {
  "name": "status"
}, {
  "name": "legal"
}, {
  "name": "recommend"
}]
});
Last modification:January 2nd, 2020 at 07:01 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment