我只是在上方的欄位加入一個得票數欄位及一個儲存的按鍵，如果使用者覺得查詢出來結果有誤，可以點選該筆資料，那麼得票數就會被顯示在上方的欄位中，更改後按儲存。
在 struts2 jquery tag 的習慣裡，只要用到 grid，就會顯示到另一個 jsp 檔案，所以上面的網頁分成了兩個檔案，分別為 AreaResult.jsp 及 AreaResultGrid.jsp。因為接下來要用到 jquery，就要引入 jquery 的函式庫檔，因為 AreaReresult.jsp 是主網頁，所以在這一頁裡加入如下紅色部份所示的指令。而綠色部份則是上面所提到的，接下來要顯示得票數的欄位。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>接下來看一下子網頁要加入那些程式，如下:
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>選區投票結果查詢</title>
<script type="type/javascript" src="../scripts/jquery-1.11.2.min.js"></script>
<sj:head jqueryui="true"/>
</head>
<body>
<s:url var="findElection" action="findElection" />
<s:url var="findCityName" action="findCityName" />
<s:url var="findAreaName" action="findAreaName" />
<s:url var="remoteurl" action="showAreaResult" />
<s:url var="saveurl" action="saveVotes" />
<s:form id="formaAreaResult" theme="xhtml">
<sj:select
label="選擇場次"
href="%{findElection}"
id="electionID"
name="electionID"
list="electionList"
emptyOption="false"
headerKey="-1"
headerValue="請選擇"
onChangeTopics="reloadCityName"
/>
<sj:select
label="縣市" href="%{findCityName}"
id="cityName"
name="cityName"
list="cityNameList"
emptyOption="false"
headerKey="-1"
headerValue="請選擇"
reloadTopics="reloadCityName"
onChangeTopics="reloadAreaName"
/><br/>
<sj:select
label="選區" href="%{findAreaName}"
id="areaName"
name="areaName"
list="areaNameList"
emptyOption="false"
headerKey="-1"
headerValue="請選擇"
reloadTopics="reloadAreaName"
/>
<sj:textfield label="得票數" id="votes" name="votes" />
</s:form>
<sj:submit
href="%{remoteurl}"
targets="showAreaResult"
value="查詢"
indicator="indicator"
button="true"
/>
<sj:submit
href="%{saveurl}"
targets="showAreaResult"
value="儲存"
indicator="indicator"
button="true"
/>
<br/><br/>
<sj:div id="showAreaResult" />
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
<script type="text/javascript">
$.subscribe('rowselect', function(event, data) {
selRowId = event.originalEvent.id;
votes = $('#gridtable').jqGrid ('getCell', selRowId, 'votes');
$('#votes').val(votes);
});
</script>
<s:url var="remoteurl" action="findCandidate" />
<sjg:grid
id="gridtable"
caption="候選人得票統計"
dataType="json"
href="%{remoteurl}"
pager="true"
gridModel="candidateList"
rowList="10,15,20"
formIds="formaAreaResult"
rowNum="15"
rownumbers="true"
viewrecords="true"
shrinkToFit="true"
onSelectRowTopics="rowselect"
>
<sjg:gridColumn name="electionID" index="electionID" title="選舉場次" sortable="false"/>
<sjg:gridColumn name="cityName" index="cityName" title="縣市" sortable="false"/>
<sjg:gridColumn name="areaName" index="areaName" title="選區" sortable="true"/>
<sjg:gridColumn name="votedNo" index="votedNo" title="號次" sortable="true"/>
<sjg:gridColumn name="name" index="name" title="姓名" sortable="true"/>
<sjg:gridColumn name="partyName" index="partyName" title="黨籍" sortable="true"/>
<sjg:gridColumn name="votes" index="votes" title="得票數" sortable="true"/>
<sjg:gridColumn name="elected" index="elected" title="當選?" sortable="true"/>
</sjg:grid>
說明一下上面的程式，當使用者按下 grid 中任何一列時，會觸發 onSelectRowTopics 事件 (綠色部份)，然後就呼叫 rowselect 這個函式，將 grid 中的 cell 值放入指定的 html 欄位中 (紅色部份)。因為這裡只是要舉例怎麼寫，可以取得 grid 中的 cell 值，所以只抓出一個得票數欄位 (藍色部份)。
沒有留言:
張貼留言