Javascript 用剑道UI网格击倒JS忘记用户'；选择

我有一个剑道UI网格，我正在使用Knockout JS（使用Knockout-Kendo.min.JS和Knockout.mapping latest.JS）填充和维护它显示的数据。当基础数据更新时，网格也会更新以反映此更改。除了下面概述的问题外，它工作正常

代码显示在以下小提琴中：

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

有没有办法让剑道UI网格在新数据到达时避免完全重画，从而不会忘记用户的选择？

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

---

我认为映射插件工作正常，因为我似乎通过

foreach

绑定获得了所需的行为，通过该绑定，您可以选择并突出显示列表项的ID部分，并且在数据更新时不会删除您的选择。查看小提琴以了解我的意思。

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

我分别将以下代码附加到剑道网格更改和数据绑定事件。注意，我的网格变量的命名转换总是以“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);
    }
}

对于数据绑定事件：

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);
    }
}

---

欢迎对代码进行改进。

我查看了您的小提琴，您是否希望所选数据单元格在刷新后保持选中状态？是的。例如，如果对表进行排序，刷新后它将保持不变，并且我希望所选单元格执行相同的操作。我可以编写一个变通方法，将选择存储在助手数组中，然后在更新后以编程方式重新应用，但这很粗糙。是的，我同意，这有点粗糙。：）但我认为这就是你需要做的，因为网格每次都会被重新绘制。我找到了这个链接，它解释了如何使用

change

方法获取所选行，然后在数据加载后使用

databound

方法再次选择该行。是的，我已经这么做了，但这很糟糕，一定是一个更好的解决方案！如果同一个方块不再存在，那么剑道怎么能期望选择同一个方块呢？我使用相同的剑道击倒配对，重置你的选择后数据绑定是你最好的选择。