easyui中的datagrid设置自动增长列

编写项目过程中,遇到要在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就可以实现列自动增长。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EasyUIDataGrid组件,如果某一没有设置`editor`属性,则该的单元格内容将默认为不可编辑状态,不能直接在单元格进行编辑。但是,仍然可以通过编程的方式来为该的单元格赋值。 具体来说,可以使用DataGrid的`updateRow`方法或`appendRow`方法来更新或添加一行数据,从而实现对该的赋值。示例代码如下: ```javascript $('#datagrid').datagrid({ // ... 其他配置项 columns: [[ {field:'name', title:'姓名'}, {field:'age', title:'年龄'}, // 没有设置editor的 {field:'address', title:'地址'}, // ... 其他 ]], // ... 其他配置项 }); // 更新一行数据,包括没有设置editor的 var rowData = { name: '张三', age: 18, address: '北京市海淀区' }; $('#datagrid').datagrid('updateRow', { index: 0, // 要更新的行的索引 row: rowData // 要更新的行数据 }); // 添加一行数据,包括没有设置editor的 var newRowData = { name: '李四', age: 20, address: '上海市浦东新区' }; $('#datagrid').datagrid('appendRow', newRowData); ``` 在上述示例代码,我们在DataGrid的`columns`属性定义了三,其第三没有设置`editor`属性。然后,我们使用了`updateRow`方法和`appendRow`方法来分别更新和添加一行数据,包括没有设置`editor`的。 需要注意的是,如果DataGrid的`columns`属性没有设置`editor`的,而又需要进行编辑操作,可以考虑在单元格使用其他EasyUI组件来模拟编辑器的效果,例如使用`textbox`组件、`combobox`组件等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值