easyui中的datagrid设置自动增长列

本文介绍在datagrid数据网格中实现自动增长序号的方法。通过使用formatter属性,根据行索引自增,确保序号从1开始且随行数递增。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

### 如何在 EasyUI DataGrid设置自动调整宽 为了实现 `autoSizeColumn` 方法,在 EasyUIDataGrid 组件中可以利用内置属性来达到这一目的。具体来说,可以通过配置 `fitColumns` 属性使得所有能够自适应宽度以填充整个表格容器[^2]。 然而,对于更细粒度的控制——即单独针对某一执行自动调整大小操作,则需借助 JavaScript 扩展功能。下面是一个完整的 HTML 和 JavaScript 实现案例: ```html <table class="easyui-datagrid" style="width:600px;height:auto" data-options=" url:'datagrid_data.json', fitColumns:true, singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:80">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:80,align:'right'">Price</th> </tr> </thead> </table> <script type="text/javascript"> $(function(){ // 假设需要对第二(name)应用自动调整宽度逻辑 var targetColIndex = 1; function autoSizeSpecificColumn(index){ var dg = $('.easyui-datagrid'); var opts = $(dg).datagrid('options'); var colOpts = opts.columns[opts.frozenColumns ? 1 : 0][index]; if(colOpts && !colOpts.hidden){ $(dg).datagrid('resize',{ width: 'auto' }); setTimeout(function(){ $(dg).datagrid('fixRowHeight'); var view = $(dg).datagrid('getPanel').children('.datagrid-view'); var body = view.children(':first').find('> div.datagrid-body'); var rows = body.find('> table.datagrid-btable > tbody > tr'); $.each(rows,function(i,row){ var td = $(row).find(">td:eq("+ index +")"); var contentWidth = td.find(".datagrid-cell").outerWidth(); if(contentWidth > colOpts.width){ colOpts.width = contentWidth; $(dg).datagrid('resize'); } }); }, 0); } } // 调用函数处理特定索引位置上的 autoSizeSpecificColumn(targetColIndex); }); </script> ``` 上述代码片段展示了如何基于给定的数据网格实例动态计算并更新指定的实际所需宽度。这里的关键在于遍历每一行对应单元格的内容尺寸,并据此修改相应的宽度设定[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值