Web專案學習總結
阿新 • • 發佈：2019-02-12
1.首先這裡是頁面頭部的一級導航欄
靜態頁面程式碼如下：
<div class="fore-2d3d-head" id="fore-2d3d-head">
<div class="fore-2d3d-top">
<!--一級導航-->
<div class="fore-2d3d-menu idTabs">
<ul>
<li class="fore-2d3d-menu-maptool"><a href="#fore-2d3d-side-maptools" 頁面左側部分程式碼如下：
<div id="fore-2d3d-side-xxgl">
<#include "module/xxgl/side.html"> 下面<#include “module/xxgl/side.html”>檔案，這是頁面左側部分的程式碼，當跳轉到頁面左側的時候，然後在下面引入<#include “query.html”>這段程式碼片段：
<div>
<div class="fore-core-ibox">
<div class="fore-core-ibox-title">
<h2>
學生資訊
</h2 下面是<#include “query.html”>程式碼片段：
<div id="xxgl_query">
<div class="fore-core-ibox">
<div class="fore-core-ibox-title">
<h2>
學生查詢
</h2>
<i><a href="javascript:void(0)" class="up"></a>
</i>
</div>
<div class="fore-core-ibox-content">
<div class="fore-common-form">
<table class="fore-common-form-tabs">
<tr>
<td class="text">
姓名
</td>
<td class="input">
<input class="mini-textbox" name="NAME" operType="like"
operDataType="string" style="width: 200px" />
</td>
</tr>
<tr>
<td class="text">
性別
</td>
<td class="input">
<input class="mini-fs-combobox" required="FALSE" name="GENDER" operType="like" tableName="FL_SYS_SJZDB_YH"
operDataType="string" style="width: 200px" textField="C_DESCRIBE" valueField="C_DESCRIBE"
emptyText="--請選擇--" allowInput="true" showNullItem="true"
nullItemText="--請選擇--"
valueFromSelect="true" whereString="C_DOMAINNAME='性別'" />
</td>
</tr>
<tr>
<td class="center" colspan="8">
<input type="button"
class="mini-fs-search-button fore-common-btn" id="yhglQueryBtn"
value="查詢">
<input type="button" class="mini-fs-reset-button fore-common-btn"
value="重置">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>這裡點選學生資訊的時候還需要js部分的程式碼，程式碼如下：
/* 事件處理 */
registerEvents : function() {
$(".fore-2d3d-menu ul li a").bind("click", function() {
Forestar.App.CleanWidget.onClick();
$('.fore-2d3d-tool-back').hide();
var menuName = $(this)[0].parentElement.className;
console.log(menuName);
switch(menuName){
//瀏覽查詢
case "fore-2d3d-menu-maptool":
AppEvent.dispatchEvent(AppEvent.SWITCH_WORKSPACE,{target:"GIS"});
$("#fore-2d3d-side-maptools .fore-core-side-subnav li").find("a").first().trigger("click");
break;
//學生管理
case "fore-2d3d-menu-xxgl":
AppEvent.dispatchEvent(AppEvent.SWITCH_WORKSPACE,{target:'BIZ'});
AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{'widget':'NullWidget','ui':'WEB-INF/view/module/xxgl/xxgl.html'});
mini.fsUtil.disableBtn($('#xxgl_add'));
$("#xxglReset").trigger('click');
break;
}
});
},解釋：當點選下面li中的a標籤時，會按照href屬性對應得值跳轉到
<#include “module/xxgl/side.html”> 這一部分頁面（個人理解為頁面的左側一級選單，然後又通過AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{‘widget’:’NullWidget’,’ui’:’WEB-INF/view/module/xxgl/xxgl.html’});這個事件派發機制，同時跳轉頁面右側的MIS部分）MIS部分的程式碼如下（也即是事件派發中的ui路徑名對應的檔案AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{‘widget’:’NullWidget’,’ui’:’WEB-INF/view/module/xxgl/xxgl.html’});）：
<div id="toolbar-xxgl-xxgl" class="fore-core-btnbox">
<button class="mini-fs-add-button fore-common-btn" id="xxgl_add">增加</button>
<button class="mini-fs-del-button fore-common-btn" id="delXxglData">刪除</button>
<button class="mini-fs-edit-button fore-common-btn">編輯</button>
<button class="mini-fs-viewflow-button fore-common-btn">檢視</button>
</div>
<div class="fore-core-item" >
<!--模組內容-->
<div class="fore-core-item-content">
<div id="main-datagrid-xxgl"
class="mini-fs-datagrid"
height="450px"
allowResize="false"
multiSelect="true"
tableName="STU_YH"
whereString="1=1"
idField="STUID"
idDataType="number"
popFormUrl="../home?template=WEB-INF/view/module/xxgl/popform.html"
onbeforesearch=""
moduleName="基礎資訊表"
allowCellEdit="true"
allowCellSelect="true"
toolbarId='toolbar-xxgl-xxgl'
orderByString=""
queryFormId="xxgl_query"
refreshAfterSave="true"
editNextRowCell="true"
editNextOnEnterKey="true" >
<div property="columns" class="mini-datagrid-columns">
<div type="checkcolumn" ></div>
<div field="STUID" width="100" renderer="renderColor">編號</div>
<div field="NAME" width="100" renderer="renderColor">姓名</div>
<div field="AGE" width="" headerAlign="center" allowSort="false">年齡</div>
<div field="EMAIL" width="" headerAlign="center" allowSort="false">郵箱</div>
<div field="ADDRESS" width="" headerAlign="center" allowSort="false">地址</div>
<div field="TEL" width="" headerAlign="center" allowSort="false">電話</div>
<div field="GENDER" width="" headerAlign="center" allowSort="false">性別</div>
</div>
</div>
</div>
</div>
<li class="fore-2d3d-menu-xxgl"><a href="#fore-2d3d-side-xxgl">學生資訊</a></li>當點選MIS中上班部分的增加，刪除，編輯，檢視四個按鈕的時候，會根據 popFormUrl=”../home?template=WEB-INF/view/module/xxgl/popform.html” 會彈出一個popform框。
popform.html的程式碼如下：
<div style="width:1000px;" >
<table class="fore-common-form-tabs">
<tbody>
<tr>
<td class="text"><span style="color:#f00">*</span>姓名</td>
<td class="input" style="width: 120px">
<input class="mini-textbox" name="NAME" >
</td>
<td class="text"><span style="color:#f00">*</span>年齡</td>
<td class="input" style="width: 120px">
<input class="mini-spinner" minValue="0" maxValue="120" name="AGE" >
</td>
<td class="text"><span style="color:#f00">*</span>郵箱</td>
<td class="input" style="width: 120px">
<input class="mini-textbox" name="EMAIL" >
</td>
</tr>
<tr>
<td class="text"><span style="color:#f00">*</span>地址</td>
<td class="input" style="width: 120px">
<input class="mini-textbox" name="ADDRESS" >
</td>
<td class="text"><span style="color:#f00">*</span>電話</td>
<td class="input" style="width: 120px">
<input class="mini-textbox" name="TEL" >
</td>
<td class="text"><span style="color:#f00">*</span>性別</td>
<td class="input" style="width: 120px">
<!--<input class="mini-combobox" name="GENDER" >
-->
<input required="FALSE" name="GENDER"
tableName="FL_SYS_SJZDB_YH" class="mini-fs-combobox"
textField="C_DESCRIBE" valueField="C_DESCRIBE"
emptyText="--請選擇--" allowInput="true" showNullItem="true"
nullItemText="--請選擇--"
valueFromSelect="true" whereString="C_DOMAINNAME='性別'"/>
</td>
</tr>
</tbody>
</table>
<div class="fore-core-btnboxs">
<button class="mini-fs-save-button fore-common-btn">儲存</button>
<button class="mini-fs-close-button fore-common-btn">關閉</button>
</div>
</div>