Question

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

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

Answer 1

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

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

＆＃13;

<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>

＆＃13;

更新多行slickgrid中的字段

1 个答案: