如何在 slickgrid 中显示行号列？

Question

我正在使用 ajax 调用在 slickgrid 中显示一些数据，它看起来像这样。

印度 564

美国 45454

日本 5454

在我正在获取的数据表中，没有名为“数字”的列具有行号值。如何设置名为“数字”的列并设置值？我想要的是类似这样的东西。

1 印度 564

2 美国 45454

3 日本 5454

Answer 1

要显示行号，您不需要特定的字段/属性。您可以定义一列并指定格式化程序列选项以根据函数作为第一个参数接收的网格的底层索引返回一个值。由于网格是基于 0 索引的，因此相应地进行调整。

var grid;
var dataView = new Slick.Data.DataView();
var data = [{country: "usa", number: "123"},
    {country: "japan", number: "456"},
    {country: "india", number: "789"}];
    
var options = {
    editable: false,
    enableCellNavigation: true
};
var columns = [{name: "Row No", formatter: function(row){return row+1}},
    {field: "country", name: "Country"},
    {field: "number", name: "Data"}];

dataView.setItems(data, 'country')
grid = new Slick.Grid("#myGrid", dataView, columns, options);

<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>    
    
<div id="myGrid" style="width:300px;height:150px;"></div>