ForestarWeb项目学习总结

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">综合查询</a></li>
<li class="fore-2d3d-menu-xxgl"><a href="#fore-2d3d-side-xxgl">学生信息</a></li>
</ul>
</div>
</div>
</div>

页面左侧部分代码如下：

<!--地图工具-E-->
<div id="fore-2d3d-side-xxgl">
<#include "module/xxgl/side.html">
</div>

下面<#include “module/xxgl/side.html”>文件，这是页面左侧部分的代码，当跳转到页面左侧的时候，然后在下面引入<#include “query.html”>这段代码片段：

<div>
<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">
<ul class="fore-core-side-subnav idTabs">
<li>
<a href="#fore-2d3d-side-xxgl-xsgl" title="学生管理"
onclick="AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{'widget':'NullWidget','ui':'WEB-INF/view/module/xxgl/xxgl.html'});">学生管理</a>
</li>
<li>
<a href="#fore-2d3d-side-xxgl-cjgl" title="成绩管理"
onclick="AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{'widget':'NullWidget','ui':'WEB-INF/view/module/xxgl/cjgl.html'});">成绩管理</a>
</li>
<li>
<a href="#fore-2d3d-side-xxgl-bjgl" title="班级管理"
onclick="AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{'widget':'NullWidget','ui':'WEB-INF/view/module/xxgl/bjgl.html'});">班级管理</a>
</li>
<li>
<a href="#fore-2d3d-side-xxgl-xjgl" title="学籍管理"
onclick="AppEvent.dispatchEvent(AppEvent.WIDGET_LOAD,{'widget':'NullWidget','ui':'WEB-INF/view/module/xxgl/xjgl.html'});">学籍管理</a>
</li>
</ul>

<div class="fore-core-data-list fore-core-so-result"
id="xxQueryResult"></div>
<div id="xxQueryPagination" class="fore_2d3d_pagination"></div>
</div>
</div>

<!--在左侧边栏的下面引入学生查询部分页面-->
<#include "query.html">
</div>

下面是<#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>