系列文章目录
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
本系列文章主要记录项目过程中重点的项目技术
一、目的
因为业务的需求,我需要统计子表总共的题目数量。
实现效果如下
二、实现过程
按钮页面
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> ');
}else{
actions.push('<a href="#" οnclick="delEdit('+"'"+obj.rowId+"',"+"'"+row.item+"',"+"'"+row.materialId+"'"+')"><i class="fa fa-trash-o"></i></a> ');
}
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;
});
}
至此所有的逻辑已经说完了
总结
至此,本文章结束