關於在同一張jsp裏面根據不同的按鈕點擊實現不同字段顯示

場景再現:在這裏插入圖片描述
需求爲實現紅框中所有字段的撰取效果;
傳統做法:新建十幾張不同的jsp+不同的存儲過程;這樣能簡單實現,但是一旦碰到後期修改就需要花費很長時間進行維護;
我們的解決方法:首先,爲我們每個按鈕添加跳轉方法的同時,加上標記屬性,QTAG,當QTAG=1時,顯示管理費字段,當QTAG=2時,顯示XXX字段;

function GL_F() {
	
			$("form:eq(0)")
			.attr(
					"action",
					"loadDataDAOP.action?reloadName=/WEB-INF/jsp/fsy/web/sum_glfee.jsp&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc&cmd.QTAG=1")
			.submit();

	
	}
	function KZ_F() {
	
			$("form:eq(0)")
			.attr(
					"action",
					"loadDataDAOP.action?reloadName=/WEB-INF/jsp/fsy/web/sum_glfee.jsp&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc&cmd.QTAG=2")
			.submit();

其次,我們在詳細頁的form表單中添加隱藏域來保存QTAG屬性,以方便我們在使用if判斷的時候能夠正常執行;

<form method="post" name="listForm" id="listForm" class="detailForm" style='padding-bottom:20px;' action="loadDataDAOP.action?cmd.sqlKey=ZJM_TEST.GL_FEE&reloadName=/WEB-INF/jsp/fsy/web/sum_glfee.jsp&cmd.sqlType=proc">
			<input type="hidden" value="${page.currentPage}" name="page.currentPage" id="currentPage" />
			<input type="hidden" value="${mapParam.QTAG}" name="cmd.QTAG" id="QTAG" />
			<input type="hidden" name="cmd.QORDER_STATE" value="${mapParam.QORDER_STATE }" id='QORDER_STATE' />
								<div class='tableCount' style="border-top: 1px solid #ddd;">
				<div class="tableLeft">
					共檢測到<span>${page.allRecordCount}</span>條數據
				</div>
			</div> 		

最後,我們再使用jsp裏面的if循環,判斷QTAG屬性來選擇性的顯示不同字段;

<c:choose>
					<c:when test="${mapParam.QTAG==1}">
					<td width='10%'>管理費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==2}">
					<td width='10%'>刻字費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==3}">
					<td width='10%'>貼金費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==4}">
					<td width='10%'>照片費1金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==5}">
					<td width='10%'>照片費2金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==6}">
					<td width='10%'>照片費3金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==11}">
					<td width='10%'>刻福字費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==7}">
					<td width='10%'>再次安葬費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==8}">
					<td width='10%'>客服費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==9}">
					<td width='10%'>材料費金額(元)</td>
					</c:when>
					<c:when test="${mapParam.QTAG==10}">
					<td width='10%'>其他費金額(元)</td>
					</c:when>
				</c:choose>

補充:當我們爲該頁面做列表導出的時候,我們也需要獲取到QTAG屬性從而選擇性的導出相應的表格;

function exportClick() {
		if (confirm("確定要導出列表數據嗎?")) {
		
		var b="${mapParam.QTAG}";
		alert(b);
		switch(b){
		case '1':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_gl_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break; 
		case '2':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_kz_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '3':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_tj_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '4':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_zp_f1&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '5':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_zp_f2&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '6':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_zp_f3&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '7':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_zaz_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '8':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_kf_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '9':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_cl_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;
		case '10':
			pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_other_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;	
		default:
		pubJS_exportExcel_V1(
					"listForm",
					"cmd.xlsKey=export_kfz_fee&cmd.sqlKey=ZJM_TEST.GL_FEE&cmd.sqlType=proc");
					break;	
			}		
		}
	}

切記:這裏的listForm要對應表導中的listForm,因爲我們的form表單中有隱藏域的條件,故我們無需在拼裝導出sql的時候加條件!

關於列表導出

我們在jsp寫好導出按鈕邏輯後,並且上傳excel模板後,爲了實現本地導出成功模擬,需要修改本地的配置文件;resource->context-inter-pub.xml,

<!-- 附件管理接口配置信息 -->
	<bean id="uploadUrl" class="com.gaf.wqsm.pub.command.UploadUrl">
		<property name="ENCRYKEY" value="" />
		<!-- 本地存儲路徑(這裏要修改成項目本地的存儲路徑) -->
		<property name="tmpPath" value="E:\workPlace\fsy\WebRoot" />
		<property name="rootPath" value="E:\workPlace\fsy\WebRoot" />
		<property name="modelPath" value="E:\workPlace\fsy\WebRoot" /> 
		<property name="tmpFile" value="tmpFile.txt" />
<!-- 數據庫表前的相對路徑 -->
		<property name="subUrl" value="/files/upload/" />
		<property name="open" value="true" />
		<property name="delTag" value="false" /><!-- 附件上傳後是否刪除本地附件,true爲刪除,false爲不刪除 -->
		<property name="uploadActionUrl" value="uploadFileUFA.action" />
<!-- 服務器之間訪問地址 -->
	<property name="uploadFileUrl" value="http://localhost:8080/fsy/files/upload/" />
		<property name="uploadAttachmentUrl" value="http://wqzs.zjwq.net/saveFileFUA.action" />
		<property name="imageAttachmentUrl" value="http://wqzs.zjwq.net/uploadFileFUA.action" />
		<!--瀏覽器訪問域名 -->
		<property name="uploadFileUrlBrowse" value="http://localhost:8080/fsy" />
	</bean>

resource->systemconfig.properties,
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章