Update field in multiple rows of slickgrid -
my grid (in dataview) contains field "num", shows row number. when delete row, row numbers no longer contiguous. need update field rows have contiguous numbering. (like in excel, if delete data in row 5, row number 5 doesn't disappear - data shifts).
question : how mass-update field rows? (if there quicker alternative - please let me know).
for particular case, can leverage row indexing used grid dynamically render row numbers via formatter column option. (slickgrid examples)
the following code provides delete capability dynamic row numbering. 1 important consideration use of slick.dataview
requires batching multi-row deletes.
<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 () { (var = 0; < 10; i++) { var d = (data[i] = {}); d[0] = "row " + i; d.id = d[1] = 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()); (var = 0; < 5; i++) { columns.push({ id: i, name: string.fromcharcode("a".charcodeat(0) + i), field: i, width: 100, formatter: == 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>
Comments
Post a Comment