如何在光滑网格中显示行号列

本文关键字：显示 网格 | 更新日期: 2023-09-27 18:05:36

我正在使用ajax调用在一个光滑的网格中显示一些数据，看起来像这样。

印度

564

45454年美国

日本

5454

在我正在获取的数据表中，没有称为'Number'的列具有行号值。我如何设置一个列称为"数字"和设置值?我想要的是类似这样的东西。

1印度564

2 USA 45454

3日本5454

如何在光滑网格中显示行号列

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

相关文章：