带有剑道UI网格的挖空JS忘记了用户的选择

Question

我有一个Kendo UI网格，我正在使用Knockout JS填充和维护它显示的数据（使用knocket-Kendo.min.JS和knocket-mapping latest.JS）。当底层数据更新时，网格也会更新以反映这一变化。除了下面列出的问题外，它运行良好。

以下Fiddle中显示的代码：http://jsfiddle.net/rTtS9/

问题是，当网格更新时，它会"忘记"用户选择的选定单元格，因此，如果他们试图关注某个单元格值，他们就无法关注。如果这些数据正在更新亚秒（可能），这将变得非常愚蠢。还有许多其他用例问题（这是一个人为的问题）。

有没有办法让剑道UI网格在新数据到达时避免完全重新绘制，这样用户的选择就不会被忘记

我认为这个问题可能是因为KO认为整个对象已经更改，所以它没有更新现有对象，而是删除并添加了新对象。为了确保不是这样，我通过Mapping插件使用"键"来唯一标识对象。此外，数组的长度保持不变。

我认为映射插件工作正常，因为我似乎通过foreach绑定获得了所需的行为，通过该绑定，您可以选择并突出显示列表项的ID部分，并且在数据更新时不会放弃您的选择。看看Fiddle明白我的意思。

Answer 1

如果这对其他人有帮助，我在下面包含了我的解决方案，它可以记住在重新绘制/绑定网格之前选择了哪些网格单元格。

我已将以下代码分别附加到Kendo Grid更改和数据绑定事件。注意，我的网格变量的命名转换总是以"grid"开头，后跟"name"，例如"gridName"。

因此，对于变更事件：

function saveGridSelection (gridID) {
    try {
        var shortName = gridID.substring(4,gridID.length)
        var idxGrid = ns.grids.map(function(e) {return e.name}).indexOf(shortName);
        var gridID = "#grid" + shortName;
        var pair=[];
        var columnHeader=[];
        ns.grids[idxGrid].selectedCells = [];
        // Loop over selected realized volsz
        $(gridID + " > .k-grid-content .k-state-selected").each(function (index, elem) {
            var grid = $(gridID).data("kendoGrid");
            var row = $(this).closest("tr");
            var colIdx = $("td", row).index(this);
            pair[index] = $('td:first', row).text();
            columnHeader[index] = $(gridID).find('th').eq(colIdx).text();
            if (colIdx !=  0 && ns.grids[idxGrid].dataGrid.length > 0 ) { // Check if cell is permitted and has data
                pairID = ns.grids[idxGrid].dataGrid.map(function(e) { return e.pair; }).indexOf(pair[index]); // Get the index for the appropriate Pair
                ns.grids[idxGrid].selectedCells.push({pair: pairID, container: (colIdx - 1), pairTitle: pair[index], columnHeader: columnHeader[index] });
            }
        });
    }  catch (err) {
        console.log(err);
    }
}

对于dataBound事件：

function loadGridSelection (gridID) {
    try {
        var shortName = gridID.substring(4,gridID.length)
        var idxGrid = ns.grids.map(function(e) {return e.name}).indexOf(shortName);
        var gridID = "#grid" + shortName;
        var grid = ns.grids[idxGrid];
        var gridSelectedCells = grid.selectedCells;
        var tempSelectedCells = gridSelectedCells.slice(0); // Create a temp. array to work with
        $(gridID + " > div.k-grid-content > table > tbody > tr").each(function (i,e) {
            var pair = $("td:nth-child(1)", this).text();
            if (tempSelectedCells && typeof tempSelectedCells !== "undefined") { 
                var ii = tempSelectedCells.length; 
                while(ii--) { // Loop backwards through teh array so we can slice out the bits we're finished with.
                    if (pair == tempSelectedCells[ii].pairTitle) {
                        var row = i;
                        var column = tempSelectedCells[ii].container;
                        var noColumns = $(gridID + " > div.k-grid-content > table").find("tr:first td").length;
                        var cell = (row * noColumns) + 1 + column;
                        $(gridID).data("kendoGrid").select(gridID + " td:eq("+cell+")");
                        tempSelectedCells.splice(ii, 1)
                    }
                }
            }
        });
    } catch (err) {
        console.log(err);
    }
}

对代码的改进总是受欢迎的。