【JqGrid】jqgrid合并单元格之jeesite(jsite)项目中dataGrid合并单元格

1、参考jqgrid官方的事件和方法
https://blog.mn886.net/jqGrid/
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

http://www.trirand.com/blog/?page_id=6

2、Demo如下:

代码看下面:

3.在项目中的应用

 

//初始化DataTables对象
$('#dataGrid').dataGrid({
	searchForm: $("#searchForm"),
	autoGridWidth:false,
	columnModel: [
		{header:'ID', name:'lineNo',index:'a.line_no', width:90, align:"center",hidden:true},
		{header:'${i18n("交货通知单号")}', name:'orderNo',index:'a.order_no', width:90, align:"center",sortable:false,cellattr: function(rowId, tv, row, cm, val) {
			 //合并单元格
            return 'id=\'orderNo' + rowId + "\'"; 
		  }},
		{header:'${i18n("项次")}', name:'orderItem',index:'a.order_item', width:50,sortable:false, align:"center"},
		{header:'${i18n("出货数量")}', name:'shipedqty',index:'a.shipedqty', width:90,sortable:false, align:"center"},			
		{header:'${i18n("预计出货时间")}', name:'etd',index:'a.etd', width:130, sortable:false,align:"center",cellattr: function(rowId, tv, row, cm, val) {
				 //合并单元格
	            return 'id=\'etd' + rowId + "\'"; 
			  }},
		{header:'${i18n("仓库代码")}', name:'facilityCd',index:'a.fromfacility_cd', width:90,sortable:false, align:"center"},
		{header:'${i18n("备注")}', name:'remark',index:'a.remark', width:90,sortable:false, align:"center"}
	],
	dataId: 'lineNo',
	showRownum: true,
	showCheckbox: true, 
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		MergerRowspan("dataGrid", 'orderNo');
		MergerRowspanToOther("dataGrid", 'orderNo','shippedDate');
		MergerRowspanToOther("dataGrid", 'orderNo','etd');  
	}
});




//公共调用方法合并单元格(无需修改)
function MergerRowspan(gridName, CellName) {
	//得到显示到界面的id集合
	var mya = $("#" + gridName + "").getDataIDs();
	//当前显示多少条
	var length = mya.length;
	for (var i = 0; i < length; i++) {
		//从上到下获取一条信息
		var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
		//定义合并行数
		var rowSpanTaxCount = 1;
		for (j = i + 1; j <= length; j++) {
			//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
			var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
			if (before[CellName] == end[CellName]) {
				rowSpanTaxCount++;
				$("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
			} else {
				rowSpanTaxCount = 1;
				break;
			}
			$("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
		}
	}
}
//根据某一栏位值去合并另一栏位(根据cellName和并otherCellName,上边举例根据交货通知单号 合并预出货日期单元格)
function MergerRowspanToOther(gridName, CellName,otherCellName) {
	//得到显示到界面的id集合
	var mya = $("#" + gridName + "").getDataIDs();
	//当前显示多少条
	var length = mya.length;
	for (var i = 0; i < length; i++) {
		//从上到下获取一条信息
		var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
		//定义合并行数
		var rowSpanTaxCount = 1;
		for (j = i + 1; j <= length; j++) {
			//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
			var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
			if (before[CellName] == end[CellName]) {
				rowSpanTaxCount++;
				$("#" + gridName + "").setCell(mya[j], otherCellName, '', { display: 'none' });
			} else {
				rowSpanTaxCount = 1;
				break;
			}
			$("#" + otherCellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
		}
	}
}
//公共调用方法合并单元格(根据需要修改修改)
function MergerColspan(gridName,rowId,id,CellName) {
	
	$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
	$("#" + CellName + "" + rowId + "").attr("colspan", 2);
	
}

参考博客:https://blog.csdn.net/zsq520520/article/details/53375438

您好,针对您的问题,我可以给您提供一些思路和代码示例,希望能帮到您。 首先,要实现 jqgrid 的行编辑和单元格下拉框选择功能,您需要引入以下两个插件: 1. jqGrid:这是一个 jQuery 插件,用于实现表格的展示和编辑功能。 2. select2:这是一个 jQuery 插件,用于实现下拉框的选择和搜索功能。 接下来,您需要在 jqGrid 定义一个列模型,其包含需要编辑的列和下拉框列。例如: ``` colModel: [ { name: 'id', index: 'id', editable: false, width: 50 }, { name: 'name', index: 'name', editable: true, edittype: 'text', width: 100 }, { name: 'gender', index: 'gender', editable: true, edittype: 'select', editoptions: { value: 'M:Male;F:Female', dataInit: function(elem) { $(elem).select2({ width: '100%' }); } }, width: 100 } ] ``` 在上面的代码,第一列是 ID 列,不可编辑;第二列是姓名列,可以编辑,编辑类型为文本框;第三列是性别列,可以编辑,编辑类型为下拉框,下拉框的选项值为 M:Male 和 F:Female,同时使用 select2 插件进行渲染。 最后,在 jqGrid 启用行编辑功能和单元格编辑功能,例如: ``` editurl: 'server.php', cellEdit: true, cellsubmit: 'clientArray', rownumbers: true, rownumWidth: 40, pager: '#pager', viewrecords: true, caption: 'My first grid', height: 'auto', width: 'auto', ``` 在上面的代码,editurl 属性指定了提交数据的 URL,cellEdit 属性启用了单元格编辑功能,cellsubmit 属性指定了提交数据的方式,rownumbers 属性启用了行号列,pager 属性指定了分页控件的 ID,viewrecords 属性启用了记录总数和分页信息的显示,caption 属性指定了表格的标题,height 和 width 属性指定了表格的高度和宽度。 以上就是实现 jqGrid 行编辑和单元格下拉框选择的思路和代码示例,希望能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值