编写项目过程中,遇到要在 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');