更新多行 slickgrid 中的字段

Question

我的网格（在 dataView 中）包含一个字段“num”，它显示行号。 当我删除一行时，行号不再连续。 因此，我需要为所有行更新此字段以具有连续编号。 （就像在 Excel 中，如果您删除第 5 行中的数据，第 5 行不会消失 - 只是数据移动）。

问题：如何为所有行批量更新此字段？ （如果有更快的替代方案 - 请告诉我）。

Answer 1

对于这种特殊情况，您可以利用网格使用的行索引通过formatter 列选项动态呈现行号。 (SlickGrid Examples)

以下代码通过动态行编号提供删除功能。一个重要的考虑因素是使用slick.dataview，这需要batching 进行多行删除。

<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/examples/examples.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>    
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.checkboxselectcolumn.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
    
<button id='deleteButton'>Delete Selected</button>
<div id="myGrid" style="width:600px;height:300px;"></div>
    
<script>
var grid;
var dataView = new Slick.Data.DataView();
var data = [];
var options = {
    editable: false,
    enableCellNavigation: true
};
var columns = [];
$(function () {
    for (var i = 0; i < 10; i++) {
        var d = (data[i] = {});
        d[0] = "Row " + i;
        d.id = i
        d[1] = i
        d[Math.floor((Math.random() * 4) + 2)] = Math.floor((Math.random() * 10) + 1);
    }
    var checkboxSelector = new Slick.CheckboxSelectColumn({
        cssClass: "slick-cell-checkboxsel"
    });
    columns.push(checkboxSelector.getColumnDefinition());
    for (var i = 0; i < 5; i++) {
        columns.push({
            id: i,
            name: String.fromCharCode("A".charCodeAt(0) + i),
            field: i,
            width: 100,
            formatter: i == 0 ? function(args){ return args} : null
        });
    }

    dataView.setItems(data)

    grid = new Slick.Grid("#myGrid", dataView, columns, options);
    grid.setSelectionModel(new Slick.RowSelectionModel({
        selectActiveRow: false
    }));
    grid.registerPlugin(checkboxSelector);
     
})

$('#deleteButton').click(function () {
    console.log("Delete")
    var selected = grid.getSelectedRows();
    grid.setSelectedRows([]);
    grid.getData().beginUpdate();
    $.each(selected, function (index, value) {
        console.log("Index: " + index)
        console.log("Value " + value)
        var id = grid.getData().getItem(value).id
        grid.getData().deleteItem(id) 
    })
    grid.getData().endUpdate();
    grid.invalidate()
});
</script>