Jquery Datatable Editor 修改某个 Cell 值时的 BUG 时间: 2020-01-02 19:01 分类: JAVA `Jquery Datatable Editor`是个收费的插件,功能强大,界面是真的丑陋,官方文档 API 也是简陋,真的是巨难用。 一个简单需求,在`Datatable`中添加一个`checkbox`开关按钮,点击时只修改当前列的字段,这个需求够简单常用了吧。。 但是,不知道是不是用的破解版的原因,之前修改某个`Cell`的时候会导致当前页的数据自动重新加载。 后来代码改来改去的不知怎的,修改后它就不刷新了,这也就有了现在的这个`BUG`。 先来段修改某个`Cell`的代码吧: ```javascript $('#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`,也就是重新加载一次数据(之所以说它不是最好的办法也是这个原因:需要重新发起一次加载数据的请求) 在`ajax`的`success`回调里添加如下代码: ```javascript 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" }] }); ``` 标签: 无