如何在 slickgrid 中显示行号列？答案

【问题标题】：How to show a row number column in slickgrid?如何在 slickgrid 中显示行号列？
【发布时间】：2015-10-21 14:22:06
【问题描述】：

我正在使用类似这样的 ajax 调用在 slickgrid 中显示一些数据。

印度 564

美国 45454

日本 5454

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

1 印度 564

2 美国 45454

3 日本 5454

【问题讨论】：

因为它不在您的数据中，所以没有理由让这个数字在页面加载时保持不变，所以当您从 ajax 接收到对象时，我只需向对象添加一个属性。然后只需添加一个基于该道具的列

标签： javascript c# jquery asp.net-mvc-4 slickgrid

【解决方案1】：

要显示行号，您不需要特定的字段/属性。您可以定义一个列并指定formatter column option，以根据函数作为第一个参数接收的网格的底层索引返回一个值。由于网格是基于 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>

【讨论】：