jeesite实战(四十三)——实现子表指定属性的合计

系列文章目录

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本系列文章主要记录项目过程中重点的项目技术

---

一、目的

因为业务的需求，我需要统计子表总共的题目数量。

实现效果如下

---

二、实现过程

按钮页面

1. HTML代码

<h4 class="form-unit">${text('培训素材')}</h4>
	<div class="ml10 mr10">
		<table id="trainingMaterialDataGrid"></table>
		<% if (hasPermi('prep:trainingPreparation:edit')){ %>
			<a href="javascript:void(0);" οnmοusedοwn="trainingMD()" id = "trainingMD"  class="btn btn-primary btn-sm mt10 mb10 " data-layer="true" ><i class="fa fa-check-square-o"></i> ${text('学习素材选择')}</a>
			
		<% } %>
	</div>

2. JS代码

选择按钮的点击事件

var d = 0;
var resultTrainingMD = null;
//初始化培训素材DataGrid对象
$("#trainingMaterialDataGrid").dataGrid({

	data: ${toJson(trainingPreparation.trainingMaterialList)},
	datatype: "local", // 设置本地数据
	autoGridHeight: function(){return 'auto'}, // 设置自动高度
	
	// 设置数据表格列
	columnModel: [
		{header:'状态', name:'status', editable:true,hidden:true},
		{header:'主键', name:'id', editable:true,  hidden:true},
		{header:'${text("培训准备ID")}', name:'trainingPreparationId.id',hidden:true},
		{header:'${text("素材ID")}', name:'materialId', width:150,editable:true,hidden:true,edittype:'text', editoptions:{ 'class':'form-control', 'readonly':'true'}},
		{header:'${text("所属机构")}', name:'learningMaterial.officeName', width:200,align:"left",readonly:true},
		{header:'${text("主题名字")}', name:'learningTopic.topicName', width:200,align:"left",readonly:true},
		{header:'${text("素材标题")}', name:'learningMaterial.materialTitle', width:300,align:"left",readonly:true},
		{header:'${text("素材类型")}', name:'learningMaterial.materialType', width:60,align:"center",readonly:true, formatter: function(val, obj, row, act){
			return js.getDictLabel(${@DictUtils.getDictListJson('slm_material_type')}, val, '${text("未知")}', true);
		}},
		{header:'${text("学时")}', name:'learningMaterial.duration', width:60,align:"right",readonly:true},
		{header:'${text("题目数量")}', name:'item', width:60,align:"right",readonly:true},
		{header:'${text("操作")}', name:'actions', width:80, sortable:false, fixed:true, formatter: function(val, obj, row, act){
			var actions = [];
		
				d =d +parseInt(row.item);
				$(".ui-jqgrid-ftable").find("em").text("题目合计："+d);
				if(resultTrainingMD==null){
					resultTrainingMD = row.materialId;
				}else{
					resultTrainingMD = resultTrainingMD +","+row.materialId;
				}
			
			if (val == 'new'){
				actions.push('<a href="#" οnclick="delAdd('+"'"+obj.rowId+"',"+"'"+row.item+"',"+"'"+row.materialId+"'"+')"><i class="fa fa-trash-o"></i></a>&nbsp;');
			}else{
				actions.push('<a href="#" οnclick="delEdit('+"'"+obj.rowId+"',"+"'"+row.item+"',"+"'"+row.materialId+"'"+')"><i class="fa fa-trash-o"></i></a>&nbsp;');
			}
			return actions.join('');
		}, editoptions: {defaultValue: 'new'}}
	],
	
	// 编辑表格参数
	editGrid: true,				// 是否是编辑表格
	editGridInitRowNum: 0,		// 编辑表格的初始化新增行数
	editGridAddRowBtn: $('#trainingMaterialDataGridAddRowBtn'),	// 子表增行按钮
	editGridAddRowInitData: {id: '', status: Global.STATUS_NORMAL},	// 新增行的时候初始化的数据
	
	// 编辑表格的提交数据参数
	editGridInputFormListName: 'trainingMaterialList', // 提交的数据列表名
	editGridInputFormListAttrs: 'status,id,trainingPreparationId.id,materialId,learningMaterial.officeName,learningTopic.topicName,learningMaterial.materialTitle,learningMaterial.materialType,learningMaterial.materialContent,learningMaterial.duration,items,', // 提交数据列表的属性字段
	showFooter: true,
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		// 设置底部合计行数据(设置合计行)
	    $('#trainingMaterialDataGrid').dataGrid("footerData", "set", {
	        'item' : '<em>题目合计：'+d+'</em>'
	    }, false);
	}

});

3.主要处理逻辑

主要代码
1.设置全局变量

2.计算合计后的值，并赋值

3.显示初始加载合计

4.删除方法的函数处理逻辑

//新增数据的删除处理逻辑
function delAdd(id,items,materialId){
	js.confirm('你确认要删除这条数据吗？', function(data){
		var materIndex = resultTrainingMD.indexOf(materialId);
		if(materIndex>1){
			resultTrainingMD = resultTrainingMD.substring(0,materIndex-1);
		}else{
			resultTrainingMD = null;
		}
		var temp =parseInt(d) - parseInt(items);
		d = temp;
		$(".ui-jqgrid-ftable").find("em").text("题目合计："+temp);
		$('#trainingMaterialDataGrid').dataGrid('delRowData',id);
		return false;
	});
}

//编辑数据的删除逻辑
function delEdit(id,items,materialId){
	 
	js.confirm('你确认要删除这条数据吗？', function(data){
		var materIndex = resultTrainingMD.indexOf(materialId);
		if(materIndex>1){
			resultTrainingMD = resultTrainingMD.substring(0,materIndex-1);
		}else{
			resultTrainingMD = null;
		}
		var temp =parseInt(d) - parseInt(items);
		d = temp;
		$(".ui-jqgrid-ftable").find("em").text("题目合计："+temp);
		$('#trainingMaterialDataGrid').dataGrid('setRowData',id,null,{display:'none'});
		$('#'+id+'_status').val(Global.STATUS_DELETE);
		return false;
	});

	
}

至此所有的逻辑已经说完了

---

总结

至此，本文章结束