制表符 PUT 响应覆盖表数据

Question

从 Tabulator 发出 Ajax PUT 请求时，响应会覆盖 Tabulator 表。我本来希望对于 PUT 请求，响应不会覆盖整个表。毕竟，改变的数据已经反映在表中了。由于大多数 PUT 响应是单个对象（已更改的对象），因此该表被缩减为一行。

我的问题是：是否有可能在制表符中 使 PUT 响应 NOT 覆盖整个表格？

这是Tabulator PUT via Ajax to Django REST Endpoint - Reduces Table to Last Edited Record 的后续（希望不是重复）。在那个问题中，接受的答案是更改服务器端的响应，以便发送完整的数据集，而不仅仅是一条记录。对于大型数据集，这将是一个问题。

我是 StackOverflow 的新手，所以如果我应该重新打开这个问题并关闭这个问题，请告诉我。

Tabulator 设置的代码如下：

   <div id="example-table"></div>

    <script type="text/javascript">

        // get CSRF token
        // https://docs.djangoproject.com/en/dev/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-and-csrf-cookie-httponly-are-false
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
                }
            }
            }
            return cookieValue;
        }

        var CSRF_TOKEN = getCookie('csrftoken');

        // set variable to customise ajaxConfig for use in the setData call
        var ajaxConfigPut = {
                method:"PUT", //set request type to Position
                headers: {
                    // "Content-type": 'application/json; charset=utf-8', //set specific content type
                    'X-CSRFTOKEN': CSRF_TOKEN,
                },
        };

        //create Tabulator on DOM element with id "example-table"
        var table = new Tabulator("#example-table", {
            ajaxURL:"{% url 'cust_listapi' %}", // reverse pick up the url since in a django template (?)
            height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
            layout:"fitColumns", //fit columns to width of table (optional)
            columns:[ //Define Table Columns
                {title:"Name", field:"name", width:150, editor:true},
                {title:"Age", field:"age", hozAlign:"center",editor:true},
                {title:"Age_Bar", field:"age", hozAlign:"left", formatter:"progress"},
                {title:"Customer Status", field:"is_customer", hozAlign:"left"},
                // {title:"Favourite Color", field:"col"},
                // {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
            ],
            // see http://tabulator.info/docs/4.6/components#component-cell
            cellEdited:function(cell){ //trigger an alert message when the row is clicked
                console.log("Cell edited in row " + cell.getData().id 
                        + " and column " + cell.getField()
                        + " from " + cell.getOldValue() + " to " 
                        + cell.getValue()
                        + ". The row pk=" + cell.getData().id 
                        );
                console.log(cell.getData());

                var updateurl = "{% url 'cust_listapi' %}" + cell.getData().id + "/"
                console.log('URL is: ' + updateurl)
                // Create variable from full row data but drop the id;
                console.log('About to create updateData')

                var updateData = {};
                updateData[cell.getField()] = cell.getValue();

                console.log(updateData);

                console.log('About to setData');
                table.setData(updateurl, updateData, ajaxConfigPut);
                console.log('Finished setData');
                //cell.restoreOldValue();
            },
            ajaxResponse:function(url, params, response){
                console.log('Beginning ajaxResponse')
                console.log('The type is:', typeof(response));
                console.log(Array.isArray(response))
                console.log(response)
                result = response;
                if(Array.isArray(response) === false){
                    result = [response];
                };
                return result;
            }
        });

    </script>

Answer 1

在您的 cellEdited 回调中，您使用的是 table.setData。那是用来替换所有数据的。您应该使用 table.updateData 仅更新受影响的行。您需要将 id 添加到对象中。 （查看以下链接以获取文档。）

调用 table.updateData 不会触发对后端的请求。您需要使用 fetch、xhr 或其他方法单独执行此操作。

这里是 updateData 页面的链接，http://tabulator.info/docs/4.6/update。

如果您需要更多说明或示例，请告诉我。