编写项目过程中,遇到要在
datagrid
数据网格中显示自动增长的序列的需求
探索后实现如下图效果:
虽然
datagrid
自己有排序号在最左边,但是需求中有这个自动增长列,那就肯定要探索出来并实现的啦!
在
datagrid
的列属性中使用
formatter
属性,这是单元格的格式化函数,需要三个参数:
value:字段的值。
rowData:行的记录数据。
rowIndex:行的索引。
我们只需要获取有多少行数据,然后对序号列进行自动增长就可以了,所以此处用index属性
具体实现代码如下:
columns:[[
{field:'oid',title:'序号',width:60,
formatter : function(value, row, index) {//设置自动增长列
index+=1;//设置起始序号为1,如果不加这行代码序号就会从0开始
return index++;//根据行的数量不断自增
{field : 'order_dealNod',title : '环节名称',width : 60},
{field : 'order_flow_status',title : '环节状态',width : 60}
如果不加index+=1
这行代码就会出现如下情况:

这显然不是我们需要的,所以代码中的index+=1
必不可少
综上,使用formatter列属性返回每行的行索引+1就可以实现列自动增长。
编写项目过程中,遇到要在datagrid数据网格中显示自动增长的序列的需求探索后实现如下图效果:虽然datagrid自己有排序号在最左边,但是需求中有这个自动增长列,那就肯定要探索出来并实现的啦!在datagrid的列属性中使用formatter属性,这是单元格的格式化函数,需要三个参数:value:字段的值。rowData:行的记录数据。rowIndex:行的索引。我们只需要...
一、使用datagrid时有时需要显示行号,虽然rownumbers="true"属性可以设置,但是当表格有横向滚动条时,就和序列号不协调了,所以需要自定义,解决如下:
columns: [[
{field:'index',title:'序号',width:38, align: 'center',formatter:function(val,row,index){
var ...
$.extend($.fn.datagrid.methods, {
fixRownumber : function (jq) {
return jq.each(function () {
var panel = $(this).datagrid("getPanel");
var clone = $(".datagrid-cell-rown...
大家都知道在数据库中如何添加自增长列,我们可以将这个自增长列绑定到DataGrid上使得用户方便的知道现在是第几行,现在我介绍一种不用数据库就可以简单显示出自增长列的方法,有人可能会说既然数据库支持我们为什么这样做?我想有如下的两个理由:
1、不是所有的表都有自增长列。
2、当自增长列不自动复制的时候会出现断号的现象,即使复制这也是有可能发生的。
实现方法:
1、实现本页序号列的添
可以使用easyui datagrid的columnFormatter属性来实现动态隐藏列。首先,在datagrid的初始化代码中,定义一个全局变量用于存储要隐藏的列的field值:
```javascript
var hiddenCols = ['col1', 'col2']; // 要隐藏的列的field值
然后,在datagrid的columns属性中,为需要隐藏的列添加一个formatter函数,该函数返回一个空字符串,使该列不显示:
```javascript
columns: [
{ field: 'col1', title: '列1', formatter: function(value,row,index){
if(hiddenCols.indexOf('col1') > -1){
return '';
} else {
return value;
{ field: 'col2', title: '列2', formatter: function(value,row,index){
if(hiddenCols.indexOf('col2') > -1){
return '';
} else {
return value;
// 其他列...
最后,在需要隐藏或显示列的时候,修改全局变量hiddenCols并调用datagrid的reload方法即可:
```javascript
// 隐藏列
hiddenCols.push('col1');
$('#datagrid').datagrid('reload');
// 显示列
hiddenCols.splice(hiddenCols.indexOf('col1'), 1);
$('#datagrid').datagrid('reload');