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代码

选择按钮的点击事件

function trainingMD(){
	var id = "";
	if(resultTrainingMD==null){
		
	}else{
		id = resultTrainingMD;
	}
	layer.open({
		type:2,
		title:'培训素材选择',
		area:['1080px','800px'],
		fixed:false,
		maxmin:true,
		content:"${ctx}/prep/trainingPreparation/trainingMaterialSelect?id="+id
	});

}

layer.open()表示打开一个弹窗

---

选择页面

1.HTML代码

修改默认的确定和取消按钮，修改后的代码

<div class="box-footer">
	<div class="box-tools text-center">
		<button id="btnSave" type="submit" class="btn btn-sm btn-primary">
			<i class="fa fa-check"></i> ${text('确定')}
		</button>
		&nbsp;
		<button id="btnCancel" type="button" class="btn btn-sm btn-default" >
			<i class="fa fa-reply-all"></i> ${text('取消')}
		</button>
	</div>
</div>

2.JS代码

//获取窗口索引
var index = parent.layer.getFrameIndex(window.name);
//确定按钮点击事件
$("#btnSave").click(function(){	
	// 选中的所有行
	var selectRows = $('#dataGrid').dataGrid('getSelectRows');
	for(var j = 0, len = selectRows.length; j < len; j++){
		// 行ID
		var rowId = selectRows[j];
	    // 行对象
	    var rowObj = $('#dataGrid').dataGrid('getRowData', rowId);
	    
	    //console.log(rowObj);
	    var carType;
	     var carTypes = ${@DictUtils.getDictListJson('slm_material_type')};
	     for(var s =0;s<carTypes.length;s++){
	    	 if(carTypes[s].dictLabel==rowObj.materialType){
	    		 carType =  carTypes[s].dictValue
	    		 break;
	    	 }
	     }
	    // 返回行数据
	    js.getCurrentTabPage(function (contentWindow) {
			contentWindow.$('#trainingMaterialDataGrid').jqGrid('addRow', {
				position: 'last',
				addRowParams: {keys: false, focusField: true},
				initdata: {status:Global.STATUS_NORMAL, materialId: rowObj.id, "learningMaterial.officeName":rowObj.officeName,
					"learningTopic.topicName":rowObj["learningTopic.topicName"],"learningMaterial.materialTitle":rowObj.materialTitle,"learningMaterial.materialType":carType,
					"learningMaterial.materialContent":rowObj.materialContent,"learningMaterial.duration":rowObj.duration,item:rowObj.items}
		    });
		});
	    
	}
	// 关闭当前页
	parent.layer.close(index);
	
});

//关闭按钮点击事件
$("#btnCancel").click(function(){	
	// 关闭当前页
	parent.layer.close(index);
});

注意事项

---

总结

至此，本文章结束