5-3 datetimepicker - 首頁 · jdataobject.cs：這是一個eep jquery...

目錄

第一章基本概念 ..................................................................................................................... 5

1-1 JQuery 介紹 .................................................................................................................... 6

1-2 EEP2012 JQuery 架構 .................................................................................................... 8

1-3 EEP Jquery 元件 ........................................................................................................... 10

第二章 Hardcoding 基礎設計 ............................................................................................... 12

2-1 單檔設計 ....................................................................................................................... 13

2-2 彈跳式單檔設計 .......................................................................................................... 20

2-3 跳轉式單檔設計 .......................................................................................................... 23

2-4 折曡式單檔設計 .......................................................................................................... 25

2-5 預設值 .......................................................................................................................... 26

2-6 檢驗 ............................................................................................................................... 30

2-7 DateTimePicker ............................................................................................................ 32

第三章 Hardcoding 進階設計 ............................................................................................... 33

3-1 多檔設計 ...................................................................................................................... 34

3-2 Detail 的 Dialog 編輯 ................................................................................................... 44

3-3 查詢 .............................................................................................................................. 47

3-4 ComboBox .................................................................................................................... 49

3-5 RefVal 開窗選單 ......................................................................................................... 53

3-6 Combo/Refval 多級關聯(城市根據國家過濾) ............................................................ 55

第四章元件設計 ................................................................................................................... 58

4-1 Single1 單檔設計 ......................................................................................................... 59

4-2 Single2 單檔設計 ......................................................................................................... 63

4-3 MasterDetail 設計 ......................................................................................................... 66

4-4 Query 設計 .................................................................................................................... 70

4-5 折曡式/跳轉式畫面設計 ............................................................................................. 75

第五章元件進階設計 ........................................................................................................... 77

5-1 預設值 ........................................................................................................................... 78

5-2 檢驗 .............................................................................................................................. 81

5-3 DateTimePicker ............................................................................................................ 83

5-4 ComboBox .................................................................................................................... 85

5-5 RefVal ........................................................................................................................... 89

5-6 Security 與 SecurityColumn ......................................................................................... 91

5-7 多國語言 .................................................................................................................. 100

第六章其他功能 ................................................................................................................. 103

6-1 Grid 加總與 Excel 輸出 ............................................................................................. 104

6-2 Grid 的 Frozen 與 Sortable ......................................................................................... 106

6-3 資料顯示格式設定 .................................................................................................... 108

6-4 Row 的動態權限 ........................................................................................................ 111

6-5 RefVal 的欄位傳回功能(Column Match).................................................................. 113

6-6 FormatScript 的應用 ................................................................................................... 115

6-7 ServerMethod .............................................................................................................. 117

6-8 JQAutoSeq .................................................................................................................. 122

6-9 Multi-tab ...................................................................................................................... 125

第七章 Server 端程式開發 .................................................................................................. 126

7-1 自動編號 ..................................................................................................................... 127

7-2 InfoTransation 過帳設計 ......................................................................................... 134

第八章發行及網站應用 ..................................................................................................... 156

8-1 Windows Server 2008 安裝 IIS .................................................................................. 157

8-2 網站發佈 .................................................................................................................... 164

8-3 JQWebClient 呼叫 EEPWebClient ............................................................................. 175

第九章程式偵錯 ................................................................................................................. 177

9-1 Client 端 C#偵錯 ........................................................................................................ 178

9-2 Client 端 JS 偵錯 ........................................................................................................ 181

9-3 Server 端偵錯 ............................................................................................................. 183

附錄 ....................................................................................................................................... 184

A.類別參數 (class parameters). HardCoding 使用 ..................................................................... 184

DataGrid ........................................................................................................................ 184

QueryWindow ............................................................................................................... 187

DataForm ....................................................................................................................... 188

Dialog ............................................................................................................................ 190

ComboBox ..................................................................................................................... 191

ComboGrid .................................................................................................................... 192

RefVal ........................................................................................................................... 193

CheckBox ...................................................................................................................... 194

B.元件屬性. ...................................................................................................................... 194

JQAutoSeq ..................................................................................................................... 194

JQCheckBox .................................................................................................................. 195

JQComboBox ................................................................................................................ 195

JQComboGrid ............................................................................................................... 195

JQDataForm .................................................................................................................. 196

JQFormColumn ............................................................................................................. 197

JQDataGrid .................................................................................................................... 197

JQGridColumn .............................................................................................................. 199

JQDefault ....................................................................................................................... 200

JQDialog ........................................................................................................................ 200

JQMultiLanguage .......................................................................................................... 201

JQQueryColumn ............................................................................................................ 201

JQRefval ........................................................................................................................ 202

JQRelationColumn ........................................................................................................ 203

JQScriptManager ........................................................................................................... 203

JQSecColumns .............................................................................................................. 203

JQSecurity ..................................................................................................................... 203

JQToolItem .................................................................................................................... 204

JQValidate ..................................................................................................................... 204

C. EEPNetServer 的設定 .................................................................................................. 206

DB Manager ................................................................................................................... 206

Package Manager .......................................................................................................... 209

System Log Manager ..................................................................................................... 211

Login Manager ............................................................................................................... 212

Server Config ................................................................................................................. 214

WorkFlow Config ........................................................................................................... 216

Client Update Manager ................................................................................................. 218

Package Transfer Info .................................................................................................... 220

Update Package ............................................................................................................. 221

About ............................................................................................................................. 222

About EEP.Net Server .................................................................................................... 224

D. EEPManager 的使用手冊 ............................................................................................ 225

Config Proxy ................................................................................................................... 225

Security Manager .......................................................................................................... 227

Solution Define .............................................................................................................. 237

Package Manager .......................................................................................................... 238

Database Alias Options .................................................................................................. 241

Reference Value ............................................................................................................ 242

Data Dictionary .............................................................................................................. 244

ErrorLog Maintenance ................................................................................................... 246

System Log Viewer ........................................................................................................ 247

About EEP Manager ....................................................................................................... 249

E. Q&A .............................................................................................................................. 250

第一章基本概念

1-1 JQuery 介紹

1-2 EEP2012 JQuery 架構

1-3 EEP Jquery 元件

1-1 JQuery 介紹

jQuery 是一種 JavaScript 的程式庫(Library)或框架(Framework)，他的特點就是 Do More

With Less(Code 寫的少，但功能實現的多)，也就是說用幾行的 jQuery 程式碼就能做到很多

想要的功能或效果。除了以符號或縮寫來簡化之前 JavaScript 程式碼外，它也提供常用的公

用函數，來讓開發者直接取用。更重要的是它是個免費又開放原始碼的程式庫，並吸引成千

上萬的開發者也投入 jQuery 程式庫擴充與組件的提供。

jQuery 始於 2006 年由美國人 John Resig 所開發並發行 1.0 版本，2009 年微軟的 VS2008

SP1 正式支援 jQuery，並整合入 VS 開發環境當中，一直到現在 VS2012。在最新的 VS2012

強調 MVC 開發模式中，jQuery 即被認可最佳的 View(使用者的 UI 操作介面)開發方案；之

後網路一哥 Google 與 Adobe 也紛紛宣布將 jQuery 納入其產品線當中，做為開發語言框架

的一部分。同時，jQuery 在現今全球最知名前 1 萬個網站中，有 59%都使用了 jQuery 技術，

由此可見 jQuery 大受開發者的青睞。

jQuery 本體是使用 Javascript 所寫出來的，因此 jQuery 和 Javascript 兩者是並存，

jQuery 是必須依賴 Javascript 才能執行。也就是說，只要 Javascript 做得到的功能，jQuery 就

一定做得到，相對的，如果 Javascript 做不到的功能，jQuery 也一樣做不出來。

既然 jQuery 是出自 JavaScript，就代表是選擇性的，不一定非用不可，或說，用了 jQuery

到底有甚麼好處呢？整理如下：

1. jQuery 剛開始立意很簡單，就是簡化 JavaScript 的編寫方式，如以 JavaScript 來取得

一個 id=‛my_id‛的 DOM 物件的寫法為：

var obj1 = document.getElementById("my_id");

如果以 jQuery 來寫的話，可以簡化成 var obj 1= $("#my_id"); 即可，所有的 Tag 都可以

是 DOM 的對象來存取或操作，讓網頁的控制變得更的得心應手。

2. jQuery 提供了很多常用的 Class 與其程式庫，可以很容易做出很好的 UI 效果，例如

只要一行 $("#div1").fadeIn("slow"); 就可以讓 div1 慢慢的以淡入效果顯示出來，再如

$("#panel").slideDown(); 這可以讓 panel 產生向下拉開的效果等等，如果在 JavaScript

中，不但要自己寫，而且程式量也不小又不一定寫得好。

3. 網頁最重視的就是效能與使用者的互動與親和性，傳統網頁就是動不動老是要

Postback 造成使用者的等待與不便。因此市場上才會出現數不勝數的 AJAX 框架與技術

出現，AJAX 就是 Asynchronous JavaScript And XML 縮寫，代表非同步的 JavaScript 和

XML，簡短地說就是在不重新整理網頁(Postback)的情況下，AJAX 透過非同步的方式

與後端交換資料，並可立即在網頁上進行局部顯示。jQuery 的 AJAX 是透過 HTTP Post

與HTTP Get來進行與後端服務的資料交換，包括呼叫別的網頁程式、取得XML或 JSON

格式資料等等，jQuery的AJAX非常簡潔好寫，使開發者更容易以AJAX開發出與USER

互動又具有效能的網頁。

4. 本身 jQuery 就是屬於開放原始程式碼的免費自由軟體，在市場上你可以找到數以百

計的社群或個人以 jQuery 為基礎開發各種不同的 plug-in 組件與程式庫供人下載，很多

UI 與特殊功能組件，基本上社群大都有人寫好了，只需拿來使用與整合即可，省時又

方便。

5. 自己開發的 JavaScript 比較容易遇到各種不同瀏覽器的相容問題，透過 jQuery 的程式

庫，基本上常用的瀏覽器(如 IE、FireFox、Safari、Chrome、Opera 等)都已經過眾多測

試者驗證過了，比較不會遇到跨裝置或跨瀏覽器所沿生的相容問題。

6. jQuery 算是一個輕量級的程式庫，簡潔不笨重，壓縮後大約 21KB 上下 (v1.7 版)，

即使這樣，引用 jQuery 的設備也是第一次使用才會被載入，之後就會 Cache 住，對網

頁的效能影響非常小，反而因 jQuery 所提供的 class 與 AJAX 方式讓你的網頁更具有效

能優勢。

7. 另有一個子集為 jQuery Mobile，用來專門支援各種手機或平板的 UI 介面，同樣是基

於 jQuery 的基礎，差別是 jQuery Mobile 規定使用 HTML5 為標準，主要還支援了多點

觸控與不同螢幕大小的自動調整，透過 jQuery Mobile 即可輕易寫出手機平版的專用網

頁。

1-2 EEP2012 JQuery 架構

EEP 的基本理念就是包裝常用的元件，讓開發者以屬性填寫的方式，不必寫程式即可完

成工作，但由於使用者介面需求與變化很大，往往元件的方式無法達到 100%滿足度，甚至

有些用戶只有 60%滿足度，此時就必須以 Code 來協助解決，這當然是合理的，但往往開發

者在元件與 Hard-Coding 間會不知所措，到底應該寫在那個事件或時機才能與元件搭配的

好，就成了 EEP 最大的使用障礙。循規蹈矩或對程式開發不太擅長的開發者倒還好，尋求

EEP 的客服人員往往可以得到可以接受的答案。但是，如果是開發能力較強或主觀性強的開

發者，可能就會格格不入，這也是長期以來，EEP 不可避免的困擾之一。

為了解決以上的問題，在 EEP 的 jQuery 規劃之前，嘗試用新的開發模式來克服此困

擾，如圖，為傳統 EEP WEB 元件的設計概念，中間 View 的設計頁面是透過元件的包裝，

連接上共同的 DataSource 經過 WCF或.Net Remoting 向 A/P Server 的 Data Model 存取資料。

此元件透過屬性設定，在執行階段時來決定 Render(產生)相對的 JS (JavaScript)與 HTML 語

法。這種方式的好處就是不用管 JS 的開發與如何自動產生 HTML，開發者可以得到蠻高的

開發效率；缺點就是，在開發頁面上有自行設計的 HTML 要如何與元件產生的 HTML 相配

合呢？或是如果產生的 HTML 或 JS 不能滿足需求，要如何增加功能來彌補呢？

因此，在元件化之前，我們先以傳統的 Hard-Coding 來開發 jQuery 如何與 EEP 整合，

從頭寫起，也就是說如果在 View 頁面設計時，完全不用 EEP 的元件下，如何只透過 jQuery

或 jQuery 組件來存取 EEP 後端強大的 A/P Server 資源呢？以下，為 EEP jQuery 的架構圖，

說明如下：

JDataObject.cs：這是一個 EEP jQuery 的底層框架，此用來連結 EEP A/P Server 的資料

存取元件 InfoCommand，資料採用無狀態的方式一次取一個 Page(以 PacketRecord 來定義)，

資料的回寫(Insert/Update/Delete)則連到 UpdateComp 來處理，為了符合較新的需求，連線通

訊協定改採了WCF架構，也提供了A/P Server上的 Server Method(Model端的商業邏輯處理)

來讓 View 可以直接呼叫。

JqDataHandle.ashx：為 Infolight.js 與 JDataObject 間的接口，開發者在開發網頁時是以

jQuery 來呼叫 Infolight.js，然後 Infolight.js 再透過 JDataHandle.ashx 來執行 JDataObject 的方

法。

Infolight.js：此為 EEP jQuery 的共用 Utility，這裡的 JS 都是共用的，如提供了寫好的

CRUD (Create/Read/Update/Delete)的公用程式，你只要以 jQuery 的語法呼叫這些程式即可自

動反應到後端的 A/P Server 上，也可選擇是一筆存一次還是一次多筆異動後再一起存檔；為

了讓開發者更方便，可以少寫更多的 JS，Infolight.js 也提供了共用的 Default(預設)與

Validate(檢核)方案，並可以直接呼叫網頁 Code-Behind 的 C#或 VB 語法。

這樣的好處是，你可以自由的以 HTML 加上 jQuery 的語法來設計網頁，完全不必受限

於 EEP 的前端元件，又可以享受 EEP A/P Server 強大的資料處理與管理功能，可以與成熟

的 EEP Workflow Foundation 整合在一起。後面的文章中，我們會刻意以兩種方案來配合使

用 EEP jQuery 的開發方式，一個使用乾淨的 jQuery Mobile 來開發介面，另一個使用 EasyUI

的 jQuery 組件來配合開發，除了前者因為沒有組件所以需要較多的 Hard-Coding jQuery 之

外，後者使用 EasyUI 幾乎沒有甚麼 Code 可以寫，都在定義一些參數而已，很多 JS 的 Code

都可以被歸納到 Infolight.js。總之，用這種方式，就沒有 UI 限制的問題，過程中 EEP 沒有

封裝與 Render，會按開發者原汁(JS)原味(HTML)去呈現，即所謂戲法人人會變，巧妙各有

不同，這就得大家各憑本事囉。

1-3 EEP Jquery 元件

其實 jQuery 並不好學，看似簡單，但學起來沒有 1~2 個月很難寫出甚麼成就，畢竟 EEP

的主要精神還是懶人開發工具，就是不想學不想動腦筋。所以，既然 jQuery 是個潮流，我

們除了以上面的架構做好 EEP jQuery 的框架之外，還是不忘本的要將其包成元件，以屬性

與事件的方式來符合多數開發者的習慣。如下圖，我們就以 EEP jQuery 為核心技術，加上

使用現成的 EasyUI(目前市面上評價不錯的強大 jQuery UI 組件 )來包裝一組好用的

JQClientTools 元件。

EEP jQuery：就是前面提的 JDataObject.cs，JqDataHandle.ashx 與 Infolight.js 這三個部

分，在整體研發的過程是先完成這個核心架構，讓開發者至少可以使用 jQuery以Hard-Coding

來整合 EEP，最後再包裝程元件，目的就是希望其有一個共用核心,當 EEP jQuery 功能成長

之後，元件的功能不至於重複開發，而且也可以簡化元件開發的複雜度。

JQClientTools：這裡我們包裝的 MenuButton，MenuTree(主畫面的元件)，JQDataGrid(最

重要的表格元件)，JQDataForm(表單元件)，JQDefault(預設值)，JQValidate(檢核條件)，

JQQuery(查詢元件),在欄位方面，我們提供了 TextBox,DateTime,ComboBox,

Refval,CheckBox 等最常用的組件。

EEP Wizard：強大的 EEP Wizard 一直是開發者的最愛，有了 JQClientTools 元件後，EEP

Wizard 也不例外加入的"jQuery Form"的項目，讓你透過一致的 Wizard 介面，就可以快速產

生已經貼好元件的 Web 表單，並直接執行成果。

當然，使用 JQClientTools 的組件，因為使用動態 Render JS 與 HTML 的方式，還是會

有自由度與彈性的問題，因此，除了可以在元件的事件加入 JS Code 來部分解決之外，其實

是可以混合 EEP jQuery 與 JQClientTools 元件兩種方式混用，這樣就會讓整個開發變得更自

由與更有彈性。

不但如此，這個 JQClientTools 的元件，也會被整合到我們未來的 EEPCloud 雲端平台

產品，目前 Beta 版的 EEPCloud 之 Web 頁面是使用 Dev Express 來產生結果，我們將在 5

月開始改用 JQClientTools 這組元件，以統一 EEPClund 與 EEP Web 頁面的風格呈現，所以，

在整個 EEP jQuery 的研發方案中，真是可謂一劍三雕來形容。

第二章 Hardcoding 基礎設計

2-1 單檔設計

2-2 彈跳式單檔設計

2-3 跳轉式單檔設計

2-4 折曡式單檔設計

2-5 預設值

2-6 檢驗

2-7 DateTimePicker

2-1 單檔設計

準備工作

alter table Customers add [CreateDate] [datetime] NULL

alter table Customers add [EmployeeID] [int] NULL

首先在 EEP 中使用 Wizard 產生一個客戶表的 Server 端(Model)，sCustomers 為模組名稱(會

被 Build 成 sCustomers.DLL)，這個商業邏輯會自動存取 Customers 客戶表與下達

Insert/Delete/Update 的指令。

接著，來導出 Single 的模板，在 vs 的‚文件-〉導出模板…‛

導出模板是選擇項模板，同時在下面的下拉框中選擇 JQWebClient

並選擇出需要導出的模板對應的 aspx

輸出的模板名稱為：JQuerySingle

完成這些準備后，現在我們開始設計單檔的畫面了。

設計

Step1> 在 JQWebClient 下的 MyPage 的資料夾下選擇‚添加-〉添加新項…‛

Step2> 選擇 JQuerySingle 為模板，新建一個名為 bCustomers 的網頁

Step3> 首先先設定顯示編輯資料的資料來源。remoteName 設定格式為：准備工作中

新建的 server 工程的名字 .連接的 InfoCommand 的名稱。 tableName 為連接的

InfoCommand 的名稱

Step4> 接著設定在 Grid 中顯示的欄位，寫入的位置如下圖

<th data-options="field:'CustomerID',width:80,editor:'text'">客戶編號</th>

<th data-options="field:'CompanyName',width:100,editor:'text'">公司名稱</th>

<th data-options="field:'ContactName',width:80,align:'right', editor:'text'">

聯絡人</th>

<th data-options="field:'ContactTitle',width:80,align:'right',editor:'text'">

職稱</th>

<th data-options="field:'Address',width:250,editor:'text'">地址</th>

<th data-options="field:'City',width:80,editor:'text'">城市</th>

<th data-options="field:'EmployeeID',width:80,editor:'text'">创建员工</th>

<th data-options="field:'CreateDate',width:80,align:'center',editor:'text'">

创建日期</th>

Step5> 將上面的設定保存后，在 EEPManager 中設定權限

Step6> 最後回到設計的網頁上右鍵滑鼠找到在瀏覽器中查看選項，來查看顯示效果

2-2 彈跳式單檔設計

上一節中的内容介紹了設計一個在Grid可編輯的單檔，這一節中將介紹如何在彈跳出Dialog

的模式下對資料進行編輯的功能。

Step1> 首先找到 id 為 dlg 的 div，將他的 style 中的 display:none 刪除。這樣這個 div

就可以顯示出了。

Step2> 在這個 div 上，將它的 remoteName 設定為 sCustomers.Customers，tableName

設定為 Customers。表示這個編輯資料的 div 的資料來源是什麽

Step3> 接著，在 div 中的 table 裏添加所需要編輯的欄位，具體的 code 如下文：

<tr>

<td>客户编号: </td>

<td><input class="easyui-validatebox" type="text"

infolight-options="field:'CustomerID',form:'ff'" name="CustomerID" ></input>

</td>

</tr>

<tr>

<td>公司名称: </td>


infolight-options="field:'CompanyName',form:'ff'" name="CompanyName"></input>

</td>

</tr>

<tr>

<td>联络人:</td>


infolight-options="field:'ContactName',form:'ff'" name="ContactName"></input>

</td>

</tr>

<tr>

<td>职称: </td>

<td><input name="ContactTitle" class="easyui-validatebox"

infolight-options="field:'ContactTitle',form:'ff'" type="text"></input> </td>

</tr>

<tr>

<td>地址: </td>

<td><input name="Address" class="easyui-validatebox"

infolight-options="field:'Address',form:'ff'" type="text"></input></td>

</tr>

<tr>

<td>城市: </td>

<td><input name="City" class="easyui-validatebox"

infolight-options="field:'City',form:'ff'" type="text"></input></td>

</tr>

<tr>

<td>创建员工:</td>

<td><input name="EmployeeID" class="easyui-validatebox"

infolight-options="field:'EmployeeID',form:'ff'" type="text"></input></td>

</tr>

<tr>

<td>创建时间: </td>

<td><input name="CreateDate" class="easyui-validatebox "

infolight-options="field:'CreateDate',form:'ff'" type="text"></input></td>

</tr>

Step4> 最後，請找到顯示資料的 id 為 dg 的 table，請將它的 editDialog 屬性設定為

#dlg，同時 editMode 設定為 Dialog。

這樣重新打開訂單這個畫面，編輯資料，畫面會以 dialog 形式顯示出來。

2-3 跳轉式單檔設計

前面介紹的是如何實現一個 dialog 編輯，下圖的效果為點擊編輯按鈕后，轉入到第二頁編輯。

修改方式為：將顯示資料的 grid 的 div(id=dg)的 editMode 修改為 Switch

將前面設計的 dialog 顯示的 div，將它的 class=”easyui-dialog”註釋起來，同時將它的 style

加入 display 設定為 none

2-4 折曡式單檔設計

前面介紹的是如何實現一個 dialog 編輯，下圖的效果為希望在 grid 前方有一個加號直接點

開可以顯示編輯資料。

修改非常簡單只需要將 id 為 dg 的 table 的 editMode 設定為 Expand 即可。

將註釋的 class=”easyui-dialog”移除，同時將它的 style 加入 display 設定為 none 也刪除。

2-5 預設值

預設值是系統開發中使用最廣泛的功能之一，在新增時，我們希望系統能夠提供以基本常

值，或是通過程式來實現動態的預設值。在 EEP 中，我們都可以通過在每個欄位中的

infolight-options 這個屬性相應的設定預設值。下面的例子以前面完成的 Expand 的形式的單

檔畫面為例，下面的預設值需要都寫在 id 為 dg 的 table 中的每個欄位中

常量

首先，設定 City 欄位預設為台北。找到 dg 中的 city 欄位，在 infolight-options 中直接給予

defaultValue 的值為台北

當然，常值除了給予固定值外，還可以使用 EEP 的系統變數。對於這類型的預設值，我們

有一個固定的格式。defaultValue 中設定的是 remote[系統變數]。那麽到底有哪些系統變數

提供給大家呢？參照如下表格：

系統變數意義系統變數意義

_usercode 登入用戶 ID _username 登入用戶名稱

_solution 登入的 solution id _database 登入的資料庫

在 CreateDate 上添加一個預設為今天的日期。請將整個 infolight-options 的内容

infolight-options="field:'CreateDate',defaultValue:'remote[_today]'"

JS 方式

defaultValue 在使用 js 的方式取得預設值時，寫法為 client[js 的方法名稱]。下面的例

子我們通過 Js 的 GetCurrUser 的方法，來取得當前登入的用戶。

這個方法從 cookie 中取得了登入的 userid。

_ipaddress 登入的 ip 地址 _language 當前語言別

_today 今天日期 _firstday 當月第一天

_lastday 當月最後一天 _firstdaylm 上月第一天

_lastdaylm 上月最後一天 _firstdayty 今年第一天

_lastdayty 今年最後一天 _firstdayly 去年第一天

_lastdayly 去年最後一天

結果如下：

C#方式

DefaultValue 除了可以使用以上兩種方式外，還可以使用 C#的形式。寫法不同的是 remote[C#

方法名稱]。這裡表面寫了一個 C#的 GetCurrUser的方法

infolight-options="field:'EmployeeID',defaultValue:'remote[GetCurrUser]'

"

進入的頁面的代碼部分，寫入 C#的方法，注意該方法為 public，回傳值為 object 類型。這

裡請注意，ClientInfo 需要添加一個 EFClientTools.EFServerReference 的參考。

2-6 檢驗

檢驗作為基本的功能，我們分成幾種。1，系統自動的檢查是否為空值。2，JS 的方式檢查。

3，C#的方式。下面的例子以前面完成的 Expand 的形式的單檔畫面為例，下面的預設值需

要都寫在 id 為 ff 的 div 中的每個欄位中

CheckNull

找到 ff 中的 data-options 為 CustomerID 的 th，將原先 editor 為 text 修改為 validatebox，

同時設定 required 屬性表示是否需要檢查空。

JS 的方式

同樣的找到 ff 中的 city 欄位，在它的 data-options 中添加 validType，在這個 validType

中加入同樣用 client 來表示 js 的方法，client[\’js 的方法名稱\’,\’提示語信息\’]。本例寫

入如下信息：

data-options="required:true, validType:'client[\'CheckCity\', \'请输入正确

的城市\']'" type="text">

js 方法中傳遞了一個參數，這個參數為當前欄位的值：

C#的方式

前面介紹了 js 的方式，這裡講講如何使用 C#來檢查。對於採取 C#的方式檢查，同樣還

是通過 validtype 中寫入 remote 表示為 C#，寫入屬性格式為 remote[\’C#的方法名稱\’,\’

提示語信息\’]

data-options="validType:'remote[\'validatecity\',\'請輸入正確的城市\']'"

C#的程式格式如下：(public 的方法，回傳一個 bool 的值，參數為當前資料的值)

2-7 DateTimePicker

日期元件作爲最基本的元件，在 JQuery 中，我們只需要找到對應需要顯示的日期元件

的欄位，將它的 class 變換為 easyui-datebox 即可。

第三章 Hardcoding 進階設計

3-1 多檔設計

3-2 Detail 的 Dialog 編輯

3-3 查詢

3-4 ComboBox

3-5 RefVal 開窗選單

3-6 Combo/Refval 多級關聯(城市根據國家過濾)

3-1 多檔設計

準備工作

首先在 EEP 中使用 Wizard 產生一個客戶表的 Server 端(Model)，sOrders 為模組名稱(會被

Build 成 sOrders.DLL)，這個商業邏輯會自動存取 Orders 訂單表與下達 Insert/Delete/Update

的指令。

接著，來導出 Single 的模板，在 vs 的‚文件-〉導出模板…‛

導出模板是選擇項模板，同時在下面的下拉框中選擇 JQWebClient

並選擇出需要導出的模板對應的 aspx

同時，將這個模板的名稱命名為 JQueryMasterDetail

設計

Step1> 首先，在 MyPage 上右鍵添加-〉添加新項…

Step2> 以前面新建的 JQueryMasterDetail 為模板，產生一個名為 bOrders 的網頁。

Step3> 在新建的網頁中，首先找到綠色註解為 Master 所在的 Grid 部分，如下圖紅色

框所在區域，在這個區域中用於設定顯示 master 資料的 Grid。

Step4> 第一步，來設定這個grid所在的div的 remoteName以及 tableName，remoteName

為 server 工程的名稱 .所要連接的 InfoCommand 的 id， tableName 為所連接的

infoCommand 的 id

Step5> 在綠色註解為 master 顯示的欄位下方，為這個 grid 添加需要顯示的欄位，添

加程式如下：

<thead>

<tr>

<th

data-options="field:'OrderID',width:120,align:'left',formatter:formatVal

ue,

editor:{type:'text', options:{}}"

infolight-options="field:'OrderID'">訂單編號</th>

<th

data-options="field:'CustomerID',width:120,align:'left',formatter:format

Value,

editor:{type:'text', options:{maxLength:'5',}}"

infolight-options="field:'CustomerID'">客戶編號</th>

<th

data-options="field:'EmployeeID',width:120,align:'left',editor:{type:'te

xt', options:{}}"

infolight-options="field:'EmployeeID'">員工編號</th>



<th

data-options="field:'OrderDate',width:120,align:'left',formatter:formatV

alue,

editor:{type:'datebox', options:{}}"

infolight-options="field:'OrderDate'">訂單日期</th>

<th data-options="field:'RequiredDate',width:120,align:'left',

editor:{type:'datebox', options:{}}"

infolight-options="field:'RequiredDate'">需求日期</th>

</tr>

</thead>

Step6> 接下來就來設定用來新增、修改及顯示 Master 資料的那個 div，找到對應的 id

為 dataFormMaster 的 div，在它下方的 table 中將設定 master 編輯資料的具體欄位

Step7> 依然，還是先要對這個 div 設定資料來源，如前面設定 grid 一樣，設置熱模特

Name 以及 tableName

Step8> 接著，來填補下面的 Form 中所需要顯示的欄位

<tr>

<td>訂單編號</td>

<td>

<input id="dataFormMasterOrderID" name="OrderID" type="text"

data-options="" infolight-options="field:'OrderID',form:'dataFormMaster'"

style="width: 200px" /></td>

<td>客戶編號</td>

<td>

<input id="dataFormMasterCustomerID" name="CustomerID" type="text"

data-options=""

infolight-options="field:'CustomerID',defaultValue:'ALFKI',form:'dataFor

mMaster'" maxlength="5" style="width: 120px" /></td>

</tr>

<tr>

<td>員工編號</td>

<td>

<input id="dataFormMasterEmployeeID" name="EmployeeID" type="text"

class="easyui-validatebox" data-options="required:'required',"

infolight-options="field:'EmployeeID',defaultValue:'1',form:'dataFormMas

ter'" style="width: 120px" /></td>

<td>訂單日期</td>

<td>

<input id="dataFormMasterOrderDate" name="OrderDate" type="text"

class="easyui-datebox" data-options=""

infolight-options="field:'OrderDate',defaultValue:'remote[_today]',form:

'dataFormMaster'" style="width: 120px" /></td>

</tr>

<tr>

<td>需求日期</td>

<td>

<input id="dataFormMasterRequiredDate" name="RequiredDate"

type="text" class="easyui-datebox" data-options=""

infolight-options="field:'RequiredDate',form:'dataFormMaster'"


<td>出貨國家</td>

<td>

<input id="dataFormMasterShipCountry" name="ShipCountry"

type="text" data-options=""

infolight-options="field:'ShipCountry',form:'dataFormMaster'"


</tr>

<tr>

<td>出貨城市</td>

<td>

<input id="dataFormMasterShipCity" name="ShipCity" type="text"

data-options=""

infolight-options="field:'ShipCity',form:'dataFormMaster'" style="width:

80px" /></td>

</tr>

Step9> 到前面的步驟結束 Master 的設定就完成了，下面就來設定 Detail 的資料。同

樣的找到 Detail 顯示的 grid 的部分，如下圖：

Step10> 首先設定 dataGridDetail 這個 table 的資料源，這裡和 Master 設定有差別的地

方，請將 tableName 設定為所要連接的 Detail 的那個 infoCommand 的 id

Step11> 接著，找到這個 table 中的一個 parentRelations 屬性，用來設定 Master 和 detail

的關係欄位，field 為 Detail 中的 orderID，parentField 為 Master 中的 OrderID。

請注意若關聯有多個欄位，可以寫多個{field:’detail 中的欄位’, parentField:’master 中的

欄位’}，同時它們以‚，‛分割。下面只是為虛擬例子作為參考寫法。

Step12> 接著，找到註解為 detail 的編輯欄位下，輸入如下的 code，為 Grid 添加欄位。

<thead>

<tr>

<th

data-options="field:'OrderID',width:120,align:'left',editor:{type:'text',

options:{}}" infolight-options="field:'OrderID'">訂單編號</th>

<th

data-options="field:'ProductID',width:120,align:'left',sortable:'true',e

ditor:{type:'text', options:{}}"

infolight-options="field:'ProductID',defaultValue:'1'">產品編號 </th>

<th data-options="field:'UnitPrice',width:120,align:'left',

editor:{type:'text', options:{}}" infolight-options="field:'UnitPrice' ">

單價</th>

<th

data-options="field:'Quantity',width:120,align:'left',editor:{type:'text

', options:{}}" infolight-options="field:'Quantity'">數量</th>

<th

data-options="field:'Discount',width:120,align:'left',editor:{type:'text

', options:{}}" infolight-options="field:'Discount'">折扣</th>

</thead>

Step13> 這樣設定完成后，MasterDetail 的網頁就設定完成了。接著，將其在

EEPManager->System->SecurityManager 中添加新的 Menu，並給予權限

Step14> 最後，通過 Logon.aspx 右鍵滑鼠，找到在瀏覽器中查看的選項，登入后來瀏

覽網頁。

3-2 Detail 的 Dialog 編輯

上面的例子中 detail 的編輯是直接在 grid 上實現的。當然這樣的情況在 detail 欄位較少的情

況下是可行的，但是當欄位較長的時候，我們就會考慮編輯資料以 dialog 的形式來實現。下

面我們繼續使用上面的例子來做一些小小的改動，將這個畫面做一個相應的變動

Step1> 首先找到顯示 detail 資料的 grid，為這個 grid 我們來添加它的編輯模式。將它

的 editDialog 的屬性設定為顯示編輯 detail 的那個 div，同時 editmode 為 dialog.請注意

這個兩個屬性都是寫在 infolight-options 中。

editDialog:'#dlgdetail', editMode:'Dialog'

Step2> 接著，找到 id 為 dlgdetail 的 div，將它的 style 中的 display:none 刪除

Step3> 接下來，來設定 detail 編輯資料的資料源

Step4> 最後，我們將需要編輯的欄位添加到綠色註解(detail 編輯欄位)下方。内容如

下：

<table>

<tr>

<td>訂單編號: </td>

<td>

<input class="easyui-validatebox"

infolight-options="field:'OrderID',form:'dataFormDetail'" type="text"

name="OrderID" data-options="required:true"></input>

</td>

</tr>

<tr>

<td>產品編號: </td>

<td>


infolight-options="field:'ProductID',form:'dataFormDetail'" type="text"

name="ProductID" data-options="required:true"></input></td>

</tr>

<tr>

<td>單價: </td>

<td>


infolight-options="field:'UnitPrice',form:'dataFormDetail'" type="text"

name="UnitPrice" data-options="required:true"></input>

</td>

</tr>

<tr>

<td>數量: </td>

<td>

<input name="Quantity" class="easyui-validatebox"

infolight-options="field:'Quantity',form:'dataFormDetail'"

type="text"></input></td>

</tr>

<tr>

<td>折扣: </td>

<td>

<input name="Discount" class="easyui-validatebox"

infolight-options="field:'Discount',form:'dataFormDetail'"

type="text"></input></td>

</tr>

</table>

Step5> 保存修改的畫面后，我們就可以來瀏覽效果了

3-3 查詢

Form 中的查詢功能，最普遍的功能之一。下面，我們找到畫面中註解為填寫查詢欄位的部

分，寫入如下代碼為查詢的欄位進行排版。

<tr>

<td>

<td nowrap="nowrap">訂單編號</td>

<td>

<input type="text"

infolight-options="field:'OrderID',condition:'=',dataType:'string'"

id="OrderID_Query" /></td>

</td>

</tr>

<tr>

<td>

<td nowrap="nowrap">訂單日期起</td>

<td>

<input type="text" class="easyui-datebox"

infolight-options="field:'OrderDate',condition:'>=',dataType:'string'"

id="OrderDate_Query" /></td>

</td>

<td>

<td nowrap="nowrap">訂單日期迄</td>

<td>

<input type="text" class="easyui-datebox"

infolight-options="field:'OrderDate',condition:'<=',dataType:'string'

" id="Text1" /></td>

</td>

</tr>

<tr>

<td>

<td nowrap="nowrap">员工编号</td>

<td>

<input type="text"

infolight-options="field:'EmployeeID',condition:'%%',dataType:'string'"

id="EmployeeID_Query" /></td>

</td>

</tr>

設定后，重新開始 Orders 表單，點擊 Master 的 grid 上的查詢按鈕。

3-4 ComboBox

下拉選單在系統設計中，表單中都是保存 ID 的欄位，因此在用戶編輯時，我們希望能夠用

戶看到名稱的欄位來提供用戶進行選擇。因此我們提供了兩組元件，分別為 ComboBox 以

及 ComboGird。這兩個元件的差別在於，ComboGrid 在下來后，可以以 Grid 形式顯示多欄

位。在下面的例子中我們將為大家介紹這兩种類型的 Combo 的具體用法。

準備工作

在 server 端分別加入兩個 InfoCommand，分別命名為 cmdEmployees 以及 cmdCustomers。下

圖為這兩個 Infocommand 的 CommandText 設定。修改完成后，請將 Server 端重新建置。

開始設計

ComboBox

首先找到 Master 的編輯資料的 dataFormMaster 這個 div，找到員工編號，接著將它的 class

變換為 info-combobox，最後在它的 infolight-options 中添加 combo 的資料源，顯示欄位和存

值欄位這些屬性。具體屬性意義為：valueField:'實際保存資料庫的欄位',textField:顯示欄

位,remoteName:’Server 端的工程名稱.連接的 InfoCommand 的名稱’,tableName:'連接的

InfoCommand 的名稱'

valueField:'EmployeeID',textField:'LastName',remoteName:'sOrders.cmdEmployee

s',tableName:'cmdEmployees'

設定完成后，保存頁面，重新開啓 Orders 畫面。編輯資料就可以看到員工編號以下拉形式

顯示

ComboGrid

找到 dataFormMaster 這個 div 中的客戶編號這個欄位，將它的 class 修改為 info-combogrid。

接下來就來設定在 infolight-options 中的屬性，其中大部分的屬性與 combobox 相似。而有幾

個特定的屬性我們來介紹一下，Columns 用於設定在 grid 中顯示的欄位，在這個 columns 的

集合中設定内容包括 field（欄位）、title（標題）、Width（寬度）以及 align(對齊方式)。

每加入一個欄位用逗號分隔。當然這個 Columns 也可以不設定，系統會將 valueField 和

textfield 顯示出來。同時配合 valueFieldCaption，textFieldCaption 這兩個屬性顯示出欄位在

grid 上的標題。本例參考如下：

class="info-combogrid"

infolight-options="field:'CustomerID',defaultValue:'ALFKI',form:'dataFormMas

ter',panelWidth:450,valueField:'CustomerID',textField:'CompanyName',remoteNa

me:'sOrders.cmdCustomers',tableName: 'cmdCustomers',valueFieldCaption:'客戶編

號',textFieldCaption:'公司名稱',columns:[]"

設定后，保存修改内容。重新瀏覽 Orders 的畫面，顯示效果如下：

3-5 RefVal 開窗選單

如下圖，我們看到客戶編號在編輯時，可以通過點開放大鏡這個按鈕打開一個窗口，在該窗

口中可以顯示出多欄位，同時對於每個欄位我們可以做相應的查詢。這就是我們所說的 refval

元件。

請將元件開發使用 combogrid 的客戶編號註釋起來，重新改寫為使用 refval。在改寫中下面

這個重點，該元件的 class 為 info-refval。其他的屬性與 comboGrid 類同。改成代碼請參照如

下代碼：


class="info-refval" data-options=""

infolight-options="field:'CustomerID',defaultValue:'ALFKI',form:'dataFormMas

ter',title:'JQRefval',panelWidth:450,remoteName:'sOrders.cmdCustomers',table

Name:'cmdCustomers',columns:[],columnMatches:[],valueField:'CustomerID',text

Field:'CompanyName',valueFieldCaption:'客戶編號',textFieldCaption:'公司名稱'"

maxlength="5" style="width:120px" />

3-6 Combo/Refval 多級關聯(城市根據國家過濾)

準備工作

create table Country(

CountryID nvarchar(15),

primary key (CountryID)

)

create table City(

CityID nvarchar(15),

CountryID nvarchar(15),

primary key (CityID)

)

insert into Country select ShipCountry from Orders where shipcountry is not null group by

ShipCountry

insert into City select ShipCity,ShipCountry from Orders where shipcountry is not null group by

ShipCity,ShipCountry

Step1> 在 server 工程中添加兩個 infoCommand 作爲 Country 和 city 的資料源

Step2> 在 client 對應的欄位修改為 info-combobox,同時設定它的資料源

<input id="dataFormMasterShipCountry" name="ShipCountry" type="text"

class="info-combobox" data-options=""

infolight-options="field:'ShipCountry',form:'dataFormMaster',remoteName:

'sOrders.cmdCountry',tableName:'cmdCountry',

valueField:'CountryID',textField:'CountryID', onSelect:FilterCountry" />

<input id="dataFormMasterShipCity" name="ShipCity" type="text"

class="info-combobox" data-options="" infolight-options="field:'ShipCity',

remoteName:'sOrders.cmdCity',tableName:'cmdCity',valueField:'CityID',tex

tField:'CityID'" />

Step3> 在 country 的 OnSelect(info-options 中的屬性)寫入方法名稱 FilterCountry，進行

資料過濾(參考上面黃色區塊中紅色字體顯示的内容)

Step4> 在 js 處理寫入如下程式：

function FilterCountry() {

var val = $(this).combobox("getValue");

var combo = $("[comboname='ShipCity'].info-combobox",

"#dataFormMaster");

combo.combobox('setWhere', "CountryID = '" + val + "'");

}

同理，在設定為 comboGrid 的時候也可以進行資料的過濾，過濾的 js 與 ComboBox 略有不

同，請參照

comboGrid 的 OnSelect 寫法：

function FilterCountryComboGrid(val) {

var combogrid = $("[comboname='ShipCity'].info-combogrid",

"#dataFormMaster");

combogrid.combogrid('setWhere', "CountryID = '" + val.CountryID

+ "'");

}

Refval 程式：

function FilterCountryRefVal(val) {

var datagrid = $("[refvalname='ShipCity']",

"#dataFormMaster").data("inforefval").panel.find('table.refval-grid');

datagrid.datagrid('setWhere', "CountryID = '" + val.CountryID +

"'");

}

第四章元件設計

4-1 Single1 單檔設計


4-3 MasterDetail 設計

4-4 Query 設計

4-5 折曡式/跳轉式畫面設計


前面的章節為大家介紹了如何使用 HardCoding 來做一個 JQuery 的 Form，從第四章開始我

們將介紹如何使用 Wizard 加元件來做簡單化的 JQuery 開發。首先，在 4-1 中我們要為大家

介紹一個最基本的在 Grid 上直接新增、編輯資料的模板—JquerySingle1

Step1> 首先打開工具->EEP Wizard 選項，在打開窗口中選擇 JQuery Web Form

Step2> 選在所連接的資料庫，點擊 next

Step3> 選擇保存網頁的網站，請注意選擇 JQWebClient，在已存在 Folder 中選擇

MyPage

Step4> 選擇 JQuerySingle1 的模板，並將這個畫面的名稱修改為 bCustomer1，然後點

擊 next

Step5> 在選擇 server 時，選擇所需要的 sCustomers 這個 server 端中的 Customers 這個

Command，然後點選 Next 按鈕

Step6> 最後，通過選擇畫面上所需要顯示的欄位，點擊 Done 完成網頁的開發。

Step7> 這樣，一個基於 Jquery 開發的 EEP 的控件就會產生在畫面中，其中 JQDataGrid

用於顯示資料的 Grid 元件，JQDefault 為預設值元件，而 JQvalidate 為檢驗元件。

Step8> 現在就可以在 EEPManager 中設定 Menu 菜單，並對這個選擇項設定權限。最

後，通過 Logon.aspx 登入系統，打開 CustomerWizard1 這個程式，畫面就可以看到一個

直接通過 Grid 顯示、新增以及編輯資料的畫面。


前面一節的内容介紹了最基本的在 Grid 上直接編輯的單檔模板，下面介紹的模板，它是通

過彈出畫面的方式來編輯資料。

Step1> 同樣，我們在開始 Wizard 開發時，需要選擇開發類型，產生的網站位置，這

裡請參照上一節的設定就不重復説明了。在選擇模板時，請選擇 JQuerySingle2，同時

我們將產生的網頁命名為 bCustomers2

Step2> 在選擇 server 時，選擇所需要的 sCustomers 這個 server 端中的 Customers 這個


Step3> 接著，同樣來選擇所需要顯示的欄位，點擊 Done 就完成設計了。

Step4> 下面為 Wizard 產生的畫面中，我們會發現多了一個 JQDataForm，這就是用來

提供編輯資料所使用的。

Step5> 現在我們將完成的網頁，在 EEPManager 中同樣的設定選擇項，並設置權限。完成

后，最後瀏覽網頁，點擊 Grid 上的編輯。畫面中會有一個 window 跳彈出來。

4-3 MasterDetail 設計

前面介紹的是單檔設計，這一節中將介紹如何使用 Wizard 開發一個多檔.


裡請參照上一節的設定就不重復説明了。在選擇模板時，請選擇 JQueryMasterDetail1，

同時我們將產生的網頁命名為 bOrders1

Step2> 在選擇 server 時，選擇所需要的 sOrders 這個 server 端中的 Orders 這個


Step3> 接著，選擇 MasterDetail 中的主檔顯示的欄位，請注意，請將 CustomerID 以

及 EmployeeID 的 Control Type 設定為 TextBox

Step4> 最後，在 DetailFields 的設定中，選擇中間的 Add 按鈕，添加所需要的欄位，

選中這些欄位點擊 OK 按鈕，最後點選 Done 完成設計。

Step5> 下圖為我們通過 Wizard 設計的 Detail 畫面

Step6> 現在我們將完成的網頁，在 EEPManager 中同樣的設定選擇項，並設置權限。

完成后，最後瀏覽網頁，點擊 Grid 上的編輯。畫面中會有一個 window 跳彈出 Master

和 Detail 的資料。

4-4 Query 設計

這一部分内容中，我們將為大家介紹使用 Wizard 快速產生一個查詢頁面，這裡我們使用

JQueryQuery1 的模板


裡請參照上一節的設定就不重復説明了。在選擇模板時，請選擇 JQueryQuery1，同時

我們將產生的網頁命名為 bOrdersQuery

Step2> 在選擇 server 時，選擇所需要的 sOrders 這個 server 端中的 Orders 這個


Step3> 接著，選擇查詢后 Grid 中要顯示結果的欄位

Step4> 這裡我們通過選中欄位來修改一下右側的 Query Mode(查詢模式)，以及所使用

的元件類型。其中 CustomerID 為 RefVal 元件 Normal 查詢；EmployeeID 為 Combobox

元件 Normal 查詢；OrderDate 為日期欄位 Range 查詢。而在使用 refval 和 combobox 時

候，需要對應在 ComboBox RefVal Setting 的設定框中，相應設定連接的資料源以及使

用欄位。

Step5> 最後點擊 Done 按鈕完成畫面設計。

Step6> 在使用 JQuery 的查詢時，我們直接設定 JQDataGrid 的 QueryColumns 就可以

設定查詢的欄位。這裡我們點開這個查詢欄位的編輯器，將訂單日期的範圍查詢的

caption 分別修改為‚訂單日期起‛以及‚訂單日期迄‛，同時將‚訂單日期迄‛的

NewLine 屬性設定為 false。請注意：這部分的修改由於 Wizard 剛剛產生的新畫面，屬

性設定會被 vs 鎖住，因此請重新開啓網頁后再做設計。

Step7> 最後，通過 EEPManager 設定一下權限，現在就可以運行這個設計的畫面了。

4-5 折曡式/跳轉式畫面設計

在 4-2 中我們設計一個 Dialog 形式的編輯模式，在 Hardcoding 的部分，我們有介紹如何通

過簡單修改實現折疊式和跳轉式的畫面。這裡我們來看看在元件設計時我們該如何修改。

找到在 DataForm、Default 以及 Validate 最外層的 JQDialog 元件，將它的 EditMode 設定為

Expand

最後，我們重新打開 CustomerWizard2 這個畫面，效果如下：

當然，當我們需要設計為跳轉時，請將 JQDialog 元件的 EditMode 屬性變換為 Switch，這

樣畫面的模式就切換成功了。

第五章元件進階設計

5-1 預設值

5-2 檢驗

5-3 DateTimePicker

5-4 ComboBox

5-5 RefVal

5-6 Security 與 SecurityColumn

5-7 多國語言

5-1 預設值

Step1> 找到產生畫面中的 defaultMaster 這個元件，這個元件負責為欄位設定預設值。

Step2> 點開該元件的 Columns 屬性的按鈕，打開編輯框。用來設定需要預設欄位的

column，在設定欄位前，請先打開 EEPNetServer

Step3> 添加 orderDate 這個欄位，將它的 DefaultValue 設定為_today，表示預設為今天

日期。由此例子可以知道，在 DefaultValue 的屬性中用於設定系統變數和常量。

Step4> 在添加一個欄位，這裡任選一個 EmployeeID 這個欄位，給予 DefaultMethod

為 GetCurrUser，並將 RemoteMethod 設定為 false。這表示這個預設值需要通過使用 js

的方法取得。具體 GetCurrUser 的寫法可參照 HardCoding 中介紹的方法。當然，若設

定為 remoteMethod 為 true，就表示通過一個 C#的程式方法來實現。

設定完成后，新增一筆資料訂單日期和員工編號就會自動給予預設。

5-2 檢驗

Step1> 在元件做合法性檢查的功能時，EEP 會有一個新的元件，JQValidate 的元件來

完成。這裡同樣，打開 validateMaster 這個元件中的 columns 屬性來設定需要檢查的欄

位。

Step2> 在打開的編輯器中，添加 CustomerID 並將它的 CheckNull 設定為 True.

Step3> 在添加一個 ShipCity，並在 checkMethod 中寫入 CheckCity，RemoteMethod 設

定為 false，並在 ValidateMessage 中輸入出錯時，需要顯示的語句。由此可以了解到，

這個欄位我們需要做一個 js 的自定義方法的檢查。該範例中的 CheckCity 的方法寫法請

參照第二章中的檢查範例程式。

5-3 DateTimePicker

從這一節開始我們將介紹如何變換欄位所使用的元件。切換編輯元件我們都在 JQDataForm

或者 JQDataGrid 的 Columns 屬性編輯器中的 Editor 中修改。

在系統中日期欄位類型在編輯時我們需要使用一個日曆的元件進行設計，在這個例子中由於

Wizard 自動產生時，會自動將日期欄位的 Editor 更換為 datetime。那麽如果在自行設計時，

我們該如何做呢？

Step1> 找到 dataFormMaster 這個 DataForm 的元件，點開它的 columns 的屬性。

Step2> 在打開窗口找到 OrderDate 這個欄位，將它的 Editor 類型設定為 datebox，這

樣這個欄位就可以以日期元件顯示了。

5-4 ComboBox

在 combo 的設計中，我們分成 2 种，一種為 ComboBox，另一种為 ComboGrid。下面我們

就來看看具體的修改方式。

Step1> 找到 Columns 的編輯器中的 CustomerID，並將 Editor 修改為 infocombobox，

這樣這個欄位就是以 combobox 形式顯示了。

Step2> 接著，點開 EditorOptions 中的屬性編輯器，分別設定 Combo 顯示資料的資料

源以及顯示欄位。請注意，在設定欄位時，請打開 EEPNetserver

Step3> RemoteName 資料源選擇 sOrders 的 cmdCustomers

Step4> 最後設定 DisplayMember(顯示欄位 )以及 ValueMember(保存實際欄位 )，

PageSize 設定一頁需要顯示的資料筆數，在使用 ComboBox 設定為-1 會將所有資料顯

示出來。這樣，Combo 的設定就完成了。

Step5> 接下來我們再來設計一個 ComboGird 的欄位，請將 EmployeeID 的欄位類型設

定為 infocombogrid

Step6> 接著，同樣點開 EditorOptions, 先設定 RemoteName 為 sOrders 中的

cmdEmployees

Step7> 然後，分別設定 DisplayMember 和 ValueMember 的欄位。在這個屬性編輯器

中，我們會發現有幾個和 combo 不同的屬性，他們分別是 DisplayMemberCaption 和

ValueMemberCaption 以及 Columns。由於 ComboGrid 需要將顯示的欄位以 Grid 的形式

展現，因此 Columns 用於設定 Grid 上的欄位。當然這個屬性也可以不設定，在不設定

的情況下，系統自動會根據 DisplayMember 和 ValueMember 設定的欄位來顯示在 grid

上，同時根據 DisplayMemberCaption 和 ValueMemberCaption 顯示在 Grid 的 Caption 上。

到上面的步驟完成后，這兩种元件的設計就完成了。下圖為實際運行的效果：

5-5 RefVal

Refval 開窗選單元件，用戶通過按鈕打開一個 grid，同時可以查詢每個欄位上的資料。

Step1> 找到 Columns 的編輯器中的 CustomerID，並將 Editor 修改為 inforefval，這樣

這個欄位就是以 refval 形式顯示了。

Step2> 接下來同 comboBox 一樣，可以設定 DisplayMember 和 ValueMember 的欄位。

用樣 Columns 這個屬性也可以不設定，在不設定的情況下，系統自動會根據

DisplayMember 和 ValueMember 設定的欄位來顯示在 grid 上，同時根據

DisplayMemberCaption 和 ValueMemberCaption 顯示在 Grid 的 Caption 上。

Step3> 設計完成后，我們就可以查看瀏覽的效果。

5-6 Security 與 SecurityColumn

權限管控的功能，一般我們會將它劃分為資料的編輯權限以及查看權限。對於這兩個功

能，我們可以通過 JQSecurity 以及 JQSecColumns 兩個元件來配合完成。

Step1> 首先，從工具箱中找到 JQSecurity，將它拖拉到畫面中，請注意將這個元件貼

在 bOrder1 整個 web 網頁的最上面。

Step2> 設定 JQSecurity 的屬性，這裡 DBAlias 設定為登入的這個 DB，這裡以 ERPS

為例，同時將 MenuID 設定為 bOrders1 在 EEPManager 中設定的菜單項的 ID。

Step3> 選中 JQSecurity 這個元件，右上角會出現一個 Export 的選項。將畫面中的元

件做輸出，這部分内容的輸出用於在 EEPManager 上可以控制每個用戶或者群組對畫面

上的按鈕包括資料内容的新增、修改以及可操作性的控制。在 Security Control Export

畫面中點擊 Add All，將畫面中的元件全部添加，點擊 OK 完成輸出。

Step4> 這樣完成后，打開 EEPManager ，打開 System -> SecurityManager ->

MenuUtility。選中 bOrders 這個 Menu 后，點擊下方的 AccessUser 來設定用戶的操作權限。

Step5> 在打開窗口中選中 001 這個 User，然後點擊 AccessControl 按鈕，這樣就可以

AccessControlForUser。

Step6> 點擊窗口中的 Add All，將前面導入的所有控件添加進來，我們設定

dataGridDetail 的 AllowAdd/AllowUpdate/AllowDelete 為 N 表示 Detail 不可編輯。同時

將 dataGridMaster的AllowAdd設定為N，表示不能新增。Excel輸出的按鈕將它的Visible

為 N。完成后點擊 Update

Step7> 設定完成后，在 run 程式后會發現 Master 的新增按鈕被隱藏了。同時 Detail

的新增、修改以及刪除按鈕也被隱藏。

前面介紹了如何控制資料的編輯以及按鈕的操作面的權限。下面我們來介紹一下，以欄位為

單位的權限設定，來控制某些欄位的可見以及編輯權限。

Step1> 首先在畫面中貼入一個 JQSecColumns，請注意，這個元件也同，將它的

BindingObjectID 設定為 dataFormMaster 表示控制 Master 編輯時的欄位。

Step2> 點擊 Columns 屬性后的按鈕，打開欄位設定的對話框，設置 CustomerID 以及

Freight 欄位。

Step3> 上面的設定完成后，重新選中 JQSecurity 元件，並點擊它的 Export 功能。

Step4> 在打開窗口點擊 Add 按鈕，勾選到 JQSecColumn1，點擊 OK，這樣就添加了

新的元件了

Step5> 上面的步驟完成后，保存一下修改的頁面，我們就來設計權限了。同樣打開

EEPManager->System->SecurityManager。同樣選中一個 Menu，選中下方的 AccessUser。

在打開窗口中選擇 002 這個 User，然後點擊 AccessControl.

Step6> 在 AccessControlForUser 畫面中將 JQSecColumns1 的 Enabled 設定為 N。最後

點擊 Update 按鈕更新修改。

Step7> 重新以 002 來登入后，編輯資料會發現客戶編號以及費用是只讀的狀態。

5-7 多國語言

Step1> 多國語言的開發我們將以 bOrders1 為例子，將 JQMultiLanguage 從工具箱中拖

拉到畫面中。

Step2> 接著，設定該元件的屬性，Active為 true表示該元件已被啟動。同時設定 DBAlias

連接的資料庫，這是用戶在資料庫中備份多過語言中設定的值。

Step3> 設定完成后，點選到 JQMultiLanguage 元件，在它的右上角的小三角點開后，

有一個 Edit 按鈕。點開后，選擇需要設定的系統語言有哪些。

Step4> 點擊打開窗口中的 Refresh controls 按鈕，將畫面中可以設定的標題的屬性進

行列出。用戶可以對相應的語系進行設置標題，點擊 OK 完成設定。若您需要保存到資

料庫做備份的話只需點擊 Write to dataBase 即可。

Step5> 最後，我們通過程式來啓動這個多過語系，程式範例如下。其中當 SetLanguage

的參數為 false 時，系統就會根據 JQMultiLanguage 的 GroupIndex 屬性來顯示語言了。

Runtime 可見在畫面登陸的時候，Caption 以英語來顯示。

第六章其他功能

6-1 Grid 加總與 Excel 輸出

6-2 Grid 的 Frozen 與 Sortable

6-3 資料顯示格式設定

6-4 Row 的動態權限

6-5 RefVal 的欄位傳回功能(Column Match)

6-6 FormatScript 的應用

6-7 ServerMethod

6-8 JQAutoSeq

6-9 Multi-Tab

6-1 Grid 加總與 Excel 輸出

在第六章的内容中，我們將為大家介紹一些 JQDataGrid 和 JQDataForm 中的一些進階設計的

功能。在下面的例子中，我們將以 JQDataGrid 為例為大家做介紹。

Step1> 打開 bOrders1 的畫面，在畫面中找到 JQDataGrid"dataGridMaster”這個元件，

在它的屬性中找到 TooItems，並點開編輯框。

Step2> 在編輯器中，添加一個按鈕功能能夠，在這個按鈕設定中，將 icon 設定為

icon-print，OnClick 設為 exportGrid；Text 設定為 Excel 輸出。這樣編輯完 excel 就可以

根據 Grid 中資料輸出了。

最後點擊 Excel 輸出按鈕，產生 Excel

6-2 Grid 的 Frozen 與 Sortable

在 Grid 中每個欄位可以實現 Frozen(凍結)以及 Sortable(排序)的功能，這些功能同樣在 Grid

的 Columns 的屬性中對每個欄位進行一一設定。首先我們將 OrderID、CustomerID 以及

EmployeeID 這三個欄位的 Frozen 屬性設定為 true，這樣 grid 的這三個欄位就會被凍結。

同時，我們將 OrderDate 的 Sortable 設定為 true，這樣這個欄位就可以排序了。

下面，我們將這兩個設定后保存頁面，重新運行 OrderWizard，可見 OrderDate 的 Caption 被

點擊時，畫面會相應進行排序，同時前三個欄位為凍結不可通過 scrollbar 拉動

6-3 資料顯示格式設定

Step1> 同樣這個例子也是在 grid 的 columns 中設計，打開 dataGridMaster 的 Columns

屬性。

Step2> 將 OrderDate 的 Format 設定為 yyyy/mm/dd 表示西元年，RequiredDate 設定為

YY/mm/dd 表示民國年，最後將 Freight 設定為 C2 表示貨幣方式顯示。

最後，重新執行 ordersWizard 畫面，效果如下圖：

Step3> 在我們的格式設定中，還提供一個特殊功能，就是可以對資料進行隱藏信息的

功能，該功能只需要在 Format 上設定即可。它的格式?表示需要顯示字符，*表示隱藏

的字符，由此可見 CustomerID 為 5 碼欄位，因此在輸入 format 中?***?，表示顯示首尾

兩個字符，其他以*隱藏

這樣，在 runtime 時，CustomerID 的顯示就會如下圖效果了。

6-4 Row 的動態權限

在資料的實際編輯時，程式會被要求，某些資料在符合條件時，可以被編輯，否則不可編輯。

這個功能，我們可以根據 js 的程式通過動態的方法來實現。這個例子我們來做一個在登入

用戶為 001 時，當運費(Freight)大於 100 時，資料才可以被編輯。

Step1> 首先在 Grid 的 OnUpdate 的屬性中寫入動態 js 的程式名稱

Step2> 接著，我們就在 source 中輸入如下的方法。這裡要説明，自定義方法有一個

傳入的參數，它用于記錄當前被編輯的這筆資料；回傳一個 bool 的值，true 表示可操

作，false 表示不可操作

function updateRow(rowData) {

var cookies = document.cookie.split(';');

var curruser = "";

for (var i = 0; i < cookies.length; i++) {

var cookie = cookies[i];

var temp = cookie.split('=');

if (temp[0] == "username") {

curruser = temp[1];

}

}

if (rowData.Freight > 100) {

if (curruser == "001") {

return true;

}

return false;

}

return true; }

這樣，我們在以 002 登入畫面時，超過 100 的資料就無法被用戶所編輯了。

6-5 RefVal 的欄位傳回功能(Column Match)

Step1> 在 5-5 种我們介紹了 RefVal 的欄位的使用，這一節中我們要介紹 RefVal 的

ColumnMatch（傳回其他欄位值得功能）。那我們以 CustomerID 為例，在 Columns->Editor

Options 編輯器打開后，找到 ColumnMatchs 屬性。

Step2> 分別在 ColumnMatch 的編輯器中新建兩個成員，分別是 City 與 ShipCity 對應，

以及 Country 與 ShipCountry 兩組欄位對應。

這樣設定下，在切換客戶編號時，出貨城市和出貨國家會根據選擇的客戶而變換。

6-6 FormatScript 的應用

這一章的最後一節，我們來介紹在 Grid/Form 的 Columns 屬性中的最後一個重要的屬性

FormatScript。這個屬性用於用戶可以通過動態的 js 程式判斷給予欄位顯示格式，這裡我們

以超過 100，顯示的字體的顔色為例子。

Step1> 首先，在 Freight 的欄位上的 FormatSript 上輸入自定義 js 方法的名稱。

接著，在 source 上輸入 js 的方法如下：

function colorValue(val, row) {

if (val > 100) {

return "<div style=\"color:Red\">" + val + "</div>";

}

return val;

}

這樣，在超過 100 元運費時，資料會以紅色字體來顯示。

6-7 ServerMethod

以往 EEP 會建議使用者在對資料進行修改、過賬等情況下，使用 Server 端的方法來實現。

那麽這一小節的内容為大家介紹如何使用 ServerMethod 從 server 端自定義取出資料，並在

Client 顯示。下面以 bOrders1 為例。

Step1> 首先我們在 Client 端，添加一個 HTML 的 Input(Button)

Step2> 將它的 value 設定為 CallServerMethod，onclick 輸入 serverMethod();。表示呼

叫 js 的方法 serverMethod。

Step3> 將畫面中的 dataGridMaster 複製並黏貼在 button 下面。

Step4> 由於這個 grid 只是用來顯示 server 取出的資料，因此不需要新增、修改刪除

這些按鈕。因此將 ViewCommandVisible 設定為 false，AllowDelete/AllowUpdate 設定為

false。

Step5> 將 ToolItems 中的按鈕的 Visible 屬性都設定為 false。

Step6> 下面，我們就知道 js 的部分寫入如下的方法

function serverMethod() {

var row = $('#dataGridMaster').datagrid('getSelected');//取得當前

主檔中選中的那個Data

$.ajax({

type: "POST",

url:

'../handler/jqDataHandle.ashx?RemoteName=sOrders.Orders', //連接的Server

端，command

data: "mode=method&method=" + "Test" + "&parameters=" +

row.CustomerID, //method后的參數為server的Method名稱 parameters后為端的到后端

的參數這裡傳入選中資料的CustomerID欄位

cache: false,

async: true,

success: function (data) {

var rows = $.parseJSON(data);//將JSon轉會到Object類型提供給

Grid顯示

$('#dataGridMaster0').datagrid('loadData', rows);//通過

loadData方法清除掉原有Grid中的舊有資料並填補新資料

}

});

}

Step7> 上面步驟完成后，下面就來到 server 端，首先要在 sOrders 中的 Component.cs

中添加一個名為 Test 的方法。内容如下：

程式參數説明：傳入一個 Object 數組，數組長度為 1，參數為 js 中的 Parameters 的值。

回傳一個 object 數組，第一個參數固定格式為 0，其餘參數可根據用戶自己

的需要進行設定

public object[] Test(object[] objParam)

{

string customerId = (string)objParam[0];

string js = string.Empty;

//创建资料库连接

IDbConnection connection =

(IDbConnection)AllocateConnection(GetClientInfo(ClientInfoType.LoginDB).

ToString());

//打开连接

if (connection.State != ConnectionState.Open)

{

connection.Open();

}

//开始transaction

IDbTransaction transaction = connection.BeginTransaction();

try

{

string selectSql = "select OrderID, EmployeeID, OrderDate,

RequiredDate, ShippedDate, ShipVia, Freight from Orders where CustomerID =

'" + customerId + "'";

DataSet ds = this.ExecuteSql(selectSql, connection,

transaction);

js = JsonConvert.SerializeObject(ds.Tables[0],

Formatting.Indented);//Indented縮排將資料轉換成Json格式

}

catch

{

transaction.Rollback();

return new object[] { 0, false };

}

finally

{

ReleaseConnection(GetClientInfo(ClientInfoType.LoginDB).ToString(),

connection);

}

return new object[] { 0, js };

}

Step8> 上面這些程式完成后，請回到該 cs 的頂部，添加兩個 using。

using System.Data;

using Newtonsoft;

using Newtonsoft.Json;

Step9> 最後，請注意，由於使用到轉換 Json 的方法，因此需要在 Server 端的參考中

添加 Newtonsoft.Json 這個 dll，這個 dll 保存在 JQWebClient 下的 bin 中。

6-8 JQAutoSeq

明細資料經常保留一個序號欄位用於為 detail 的資料編號排序。這個自動序號的功能可以通

過 JQAutoSeq 完成。

Step1> 首先我們將 OrderDetails 表中添加一個 Seq 的欄位

Step2> 接著，打開 sOrders，並將這個 infoCommand 中的 CommandText

屬性中的 SQL 語法中，select 出 Seq 這個欄位。完成修改后重新建置 sOrders 這個工程。

Step3> 回到 bOrders1.aspx 中，找到 Detail 所在的 JQDataGrid，找到 Columns 的屬性，

打開編輯器。

Step4> 從 ToolBox 中找到 JQClientTools 頁簽，貼入一個 JQAutoSeq 的元件

Step5> 接著，設定 JQAutoSeq 的屬性。首先設置 BindingObjectID 為 dataGridDetail，

表示元件連接的顯示元件。接著，設定 FieldName 為 Seq，説明具體進行編號的欄位。

Step6> 其他屬性使用默認值，其中 NumDig 表示自動序號的位數，StartValue 表示自

動序號的起始數，Step 表示自動序號的遞增間隔

Step7> 現在我們就可以 run 起 OrderWizard 這個畫面，在新增一個 detail 時，Seq 欄位

會進行自動的編號。

6-9 Multi-tab

Tab 在設計中比較常用的功能，該功能可使用 Easyui 的自身的功能即可。

創建一個 Tab 非常簡單，我們不需要寫任何的 js 代碼。只需要記得將 div 的 class 設定為

easyui-tabs。每一個 tab 的 Panel 需要產生一個子 div。

<div id="Div1" class="easyui-tabs" style="width: 500px; height: 250px;">

<div title="Tab1" style="padding: 20px; ">

tab1

</div>

<div title="Tab2" data-options="closable:true" style="overflow:

auto; padding: 20px; ">

tab2

</div>

</div>

而實際如需要顯示在 Table 中的 grid 或者 Form，都可以在源碼中 copy 到 tab1/tab2 的位置進

行填補。這樣就可以完成元件的 tab 功能。

tab 重要屬性可參照：

名稱類型説明

title string tab 標題

iconCls string tab 標題顯示 icon 的 css class

width number 寬度

height number 高度

第七章 Server 端程式開發

7-1 自動編號

7-2 InfoTransation 過帳設計

7-1 自動編號

自動編號在應用軟體中扮演著非常重要的角色，主要是企業透過 Internet 建立

單據的同時，勢必要維持單據編號的唯一性，是不可能由 User 自行來編，因此就

需要使用AutoNumber元件在後端自動編出唯一的單據號碼；而自動序號 JQAutoSeq

元件則是使用在 Client 端中，讓 User 可以在 Client 端編出項次的序號，一般都應用

在 Master/Detail 中的 Detail DataGrid 元件中。

設計一個新的 Master/Detail

由於我們要設計一個自動編號的Master/Detail單據表單，因為Orders這個Table

的 OrderID 使用 Identify（自動遞增）的方式與我們 AutoNumber 元件是衝突的，因

此我們在Northwind這個資料庫中再新增另一組獨立Master/Detail Table來達到展示

AutoNumber元件的目的。我們將建立 Purchases與 Purchases Details這兩個新 Table，

其結構如下：（請用 SQL Query Analyzer 來建立 Table Schema）。

CREATE TABLE [Purchases] (

[PurchaseID] [nchar] (10) NOT NULL ,

[SupplierID] [int] NULL ,

[EmployeeID] [int] NULL ,

[PurchaseDate] [datetime] NULL ,

[TotalAmount] [money] NULL ,

[RequiredDate] [datetime] NULL ,

[ShippedDate] [datetime] NULL ,

[ShipVia] [int] NULL ,

[Freight] [money] NULL CONSTRAINT [DF_Purchases_Freight] DEFAULT (0),

[ShipName] [nvarchar] (40) NULL ,

[ShipAddress] [nvarchar] (60) NULL ,

[ShipCity] [nvarchar] (15) NULL ,

[ShipRegion] [nvarchar] (15) NULL ,

[ShipPostalCode] [nvarchar] (10) NULL ,

[ShipCountry] [nvarchar] (15) NULL ,

CONSTRAINT [PK_Purchases] PRIMARY KEY CLUSTERED

(

[PurchaseID]

) ON [PRIMARY] ,

) ON [PRIMARY]

GO

CREATE TABLE [Purchase Details] (

[PurchaseID] [nchar] (10) NOT NULL ,

[ProductID] [int] NOT NULL ,

[Seq] [nchar] (3) NOT NULL,

[UnitPrice] [money] NOT NULL CONSTRAINT [DF_Purchase_Details_UnitPrice]

DEFAULT (0),

[Quantity] [smallint] NOT NULL CONSTRAINT [DF_Purchase_Details_Quantity]

DEFAULT (1),

[Discount] [real] NOT NULL CONSTRAINT [DF_Purchase_Details_Discount]

DEFAULT (0),

CONSTRAINT [PK_Purchase_Details] PRIMARY KEY CLUSTERED

(

[PurchaseID],

[ProductID]

) ON [PRIMARY] ,

) ON [PRIMARY]

GO

首先在 EEP 中使用 Wizard 產生一個採購表的 Server 端(Model)，sPurchases 為模組名

稱(會被 Build 成 sPurchases.DLL)。

AutoNumber 的設計

打開剛才做的 sPurchases 項目，從 Toolbox 中選擇 AutoNumber 元件並貼入

Component.cs 的設計頁面中。

Step1＞首先，要確認 Active 屬性為【True】，這樣自動編號元件才被開啟。然後透

過下拉方式選擇 UpdateComp，即代表要配合那一個 UpdateComp 在 Insert 時來執行

AutoNumber 動作，在這裏選擇【ucPurchases】。這時，就可以透過下拉方式來選擇

TargetColumn 的自動編號欄位名稱，我們選欄位【PurchaseID】。

Step2＞接著設定 AutoNumber 的各屬性，如下：

『AutoNoID』屬性：這是給自動編號機制命名。也就是說自動編號是會與 SysAutoNum

這個系統資料表配合使用，所有的單據號碼編到幾號都會記錄到 SysAutoNum 這個表中，因

此 AutoNumber 這個元件就會以 AutoNoID 的屬性來對 SysAutoNum 個別隔離的編號處理。

在此我們命名為【Purchase ID】。

『GetFixed』屬性：則是自動編號設定前置碼。這裏可以直接用字串，也可以通過輸入

函數名稱加括弧的方式來取得其他欄位做為動態前置碼，我們將其填入【MyFixed()】，代表

要呼叫 MyFixed()這個程式來取得前置碼。

『NumDig』屬性：用來是設置自動編號的位數。如果數值的位元不足時，系統會自動

在前面補零，這裏設為【3】，會從“001”編到“999”。

『StartValue』屬性：是設置自動編號的起始值，即從幾開始編號。這裏設為【1】代表

從 1 開始。

『Step』屬性：每次編號時增加多少號，預設為【1】。則每次加 1，如果設為 2，則可

以編出 1，3，5，7…等等。

『OverFlow』屬性：是設定是否要處理溢位的情況。如果為【True】，就會在編到 999

（NumDig＝3）時，自動會編 A00..A99，B00…，編到“Z”時又會從“a”編到“z”。因

此會 NumDig=3 時，可以編出 999+2600+2600=6199 個編號。

『Description』屬性：給這項自動編號機制寫一些比較明確的說明。自動編號是會與

SysAutoNum 這個系統資料表配合使用，所有的單據號碼編到幾號都會記錄到 SysAutoNum

這個系統資料表中，而 Description 屬性的內容也會記錄在 SysAutoNum 這個系統資料表相

對應的 Description 欄位。

接著，我們來設定 MyFixed()的程式。

Step3＞打開程式編輯視窗（在 Server 頁面上按右鍵選<View Code>功能），在

Dispose（bool disposing）下面與 Component Designer generated code 間，寫入程式。

圖示如下：

此段程式代表將取得‚P‛加上系統的日期做為前置碼，日期格式 yyMMdd 代

表為西元年的年月日 6 碼，加上前面的‚P‛共有 7 碼前置碼，就是單據會以‚P‛

加上日期來編號，相同日期就會續號，不同日期又會從 1 開始編號。

Step4＞通過 Wizard 重新製作一個 bPurchases 的畫面。

Step5＞打開設計好的畫面，找到 Master 對應的 JQDefault。點開它的 Columns 屬

性，添加一個 PurchaseID 的預設值，值為自動編號。

Step6＞在 EEPManager 上添加 Purchase 的菜單項並設定權限。

最後，運行一下畫面，新增一筆資料

7-2 InfoTransation 過帳設計

一般資料庫系統的資料登入，往往不是單純的新增更改刪除，而且會需要與其他資

料表發生相關性的異動關係，如輸入出貨單必須對相對的產品庫存扣除，進貨單須對產

品庫存增值等等，就是最常見的資料過帳實例。過帳的程式寫法常用的有三種方法，說

明如下。

第一種方式：

使用後端資料庫的 Trigger 方式來設計，因為 Trigger 可以讓你在 Table

Insert/Delete/Update 時搭配 Inserted 與 Deleted 的新舊資料來自行下達 SQL 語句達到資

料過帳的目的，這種寫法優點是很方便，只要負責下基本 Insert/Delete/Update 指令給資

料庫就可已完成過帳，執行效能高。缺點是維護除錯不易，並當 User 數量大時，會讓

資料庫的負荷不來，另外就是程式與資料庫捆綁的太緊，系統不易與資料庫獨立分開。

另一種方式：

是寫在 A/P Server 上，利用 EEP 的 UpdateComp 有

BeforeInsert/AfterInsert/BeforeDelete/AfterDelete/BeforeModify/AfterModify 等事件可以

用來同步下達 SQL 命令，與 Trigger 的方式很像，不同的是將程式寫在 A/P Server 上，

除錯與維護都容易一些，效能也可以分散，缺點還是必需由程式人員來開發，並且開發

方式與語法也不標準。

EEP 內建一個 Infotransaction 元件，可以直接與 UpdateComp 來配合，可針對大多數的

過帳與異動關係進行標準化與規格化的管理，因此，設計者只要透過視覺化方式定義，就可

以達到多數過帳的目的，不必再另外設計。

下文中我們將舉例說明 InfoTransaction 的強大功能。

設計一個簡單的主檔過帳

我們將舉上一個採購訂單的例子，來說明過帳的使用。也就是要將採購單 Purchase 的

採購金額 TotalAmount 加總到供應商 Supplier 的應付帳總額 APAmount，並將 Purchase 採購

日期回寫 Suppliers 的最後採購日 LastPurchaseDate。

因為 Suppliers 並沒有這兩個欄位，因此我們必須用 SQL Query Analyzer 來在 SQL 命令

中下達下列語句：

Alter table suppliers

add LastPurchaseDate datetime null,APAmount money null

Step1＞開啟 sPurchases 項目，我們貼入一個 InfoTransaction 元件，命名為

tsMaster。先設定 UpdateComp 屬性，選擇要做過帳的資料，這裏選擇【ucPurchases】。

代表當 ucPurchases有發生 Insert/Delete/Update時，會配合 InfoTransaction一起過帳。

Step2＞按 Transactions 屬性右邊的【…】按鈕，出現 Transaction Collection Editor

視窗，代表要開始設定過帳的步驟。

如圖，按左下的【Add】按鈕，新增一個 Transaction 步驟（Step），系統過帳時是會依次

按步驟來過帳，一個步驟通常代表對一個 Table 資料表的過帳關係，但也可以多個步驟

對應同一個 Table。

再來，我們先設定『TransTableName』屬性，即要過帳的目的資料表（對方的資料表），

我們用下拉選擇的方式選【Suppliers】。

接著設定『TransMode』屬性，此用來處理過帳之前是否先瞭解對方是否有相對資料。

這裏設為【AutoAppend】。代表 Suppliers 不存在時，會自動新增一筆相對的資料到

Suppliers 中。上面的模式中，只有 AlwaysAppend 在過帳前不會去 Select 對方 Table 的

相對資料是否存在，其餘都會去 Select，而且也是必要的。

TransMode 共有 AutoAppend/Exception/AlwaysAppend/Ignore 四種模式。分別

代表：

對方不存在時要 AutoAppend 自動新增；

Exception 發出異常錯誤並終止過帳；

AlwaysAppend 代表無論是 Insert/Update/Delete 都會讓對方資料表新增；

Ignore 忽略並繼續過帳。

Step2＞將『WhenInsert』、『WhenUpdat』、『WhenDelete』三個屬性設為【True】。

過帳時機的設定分別為 When Insert/When Update/When Delete，分別代表此過

帳可配合的時機為 Insert 或 Update 或 Delete 時發生作用。一般預設三個項目都是

True，代表 UpdateComp 不管 Insert/Delete/Update 都會去執行 InfoTransaction 的過

帳。

與對方 Table 的過帳關係共有兩種設定。一種是鍵值關係（TransKeyFields），

代表資料表與資料間表的 Where 關係，另一種就是過帳關係（TransFields），是指

主表欄位要與對方資料表的欄位處理關係。因此我們先設定 TransKeyFields 屬性。

Step2＞點擊 TransKeyFields屬性右邊的【…】按鈕，出現 TransKeyField Collection

Editor 視窗。按左下的【Add】按鈕，增加一個 TransKeyField，下拉選擇『SrcField』

屬性為【SupplierID】，『DesField』屬性也選【SupplierID】。（兩個 Table 的欄位名稱

剛好相同）。

此代表要以 Purchase 資料表的 SupplierID 去找 Suppliers 的 SupplierID。在過帳

時此 TransKeyFields 就是用來組合 Where 的語法，因此可以設定多組 KeyFields，

而且必須一對一對應。設定完畢按下【OK】。

接著設定 TransFields 屬性來定義主表與過帳目的表的過帳欄位關係。

Step3＞點擊 TransFields 屬性右邊的【…】按鈕，出現 TransField Collection Editor

視窗，點擊左下的【Add】按鈕，增加一個 TransField，下拉選擇『DesField』為

【ApAmount】，『SrcField』選擇為【TotalAmount】，『UpdateMode』選擇為【inc】。

此代表要以 Purchase 的 TotalAmount 欄位值去累加到 Suppliers 的 ApAmount

欄位中。

UpdateMode 有 Inc/Dec/WriteBack/Replace/Disable 等 5 種方式。除了 Inc 代表

累加之外；Dec 代表累減；Replace 代表更換（覆蓋對方的欄位）；WriteBack 則是

與 Replace 相反，反而要將對方欄位內容回寫到主表的欄位上，一般用來記錄對方

動態的欄位值或 AlwaysAppend 所產生的單據號碼的回寫。

Step4＞於 TransFields 中繼續新增第二個過帳欄位，這個我們將『DesField』選

擇為【LastPurchaseDate】，『SrcField』選擇為【PurchaseDate】，『UpdateMode』為

【 Replace 】。此代表要將 Purchase 的 PurchaseDate 記錄到 Suppliers 的

LastPurchaseDate 中。

Step4＞請編譯 sPurchases 項目，過帳功能基本上已完成。

為了方便檢驗過帳的實現，我們將 bPurchases 打開，並在 JQDefault 中增加對

PurchaseDate 的預設值處理。

Step5＞在先前的 JQDefault 的 Columns 屬性按下【…】設定增加一個欄位。

『FieldName』選【PurchaseDate】，『DefaultValue』設定為一個系統變數【_today】。

Step6＞執行結果，此時我們可以再打開 Purchase，並新增一筆資料。如圖，在

「廠商編號」與「員工編號」中各輸入 1，訂單日期（應該代表採購日期）會自動

帶入今天的日期，在「金額」上輸入 5000，最後按下「存檔」。

此時也可以利用 SQL Profiler 看到其過帳的 SQL 語句。

首先，可以看到整個存檔與過帳被一組 BEGIN TRANSACTION 與 COMMIT

TRANSACTION 包起來，也就是過帳會與主檔明細檔的異動在同一個交易處理當

中，一同成功或一同退回（這是因為 ucPurchases.AutoTranas=True）。

再來，過帳的部份因為 TransMode=AutoAppend，所以會有一個取 Select

Suppliers 的語句，再下達一個 Update Suppliers 的語句，並對 APAmount 進行增值

與 LastPurchaseDate 進行設值的動作，如果是 Update 與 Delete 時，其 SQL 語句會

自動對應。

設計明細檔的過帳

再來就是要處理採購單明細檔 Purchase Detail 的過帳處理，讓 Purchase Detail

的 Quantity 累加到 Products 的 UnitsInStock 的欄位上，原本此欄位應該是進貨單時

才累加到 UnitsInStock，因為 Products 中並沒有 UnitsOnPurchase 的欄位，我們就以

UnitsInStock 做為實驗對象，其過帳理論是一致的，另外我們也在 Products 中另外

增加一個 LastPurchasePrice 代表最後採購單價，讓 Products 能自動記錄下來。

因為Products並沒有這LastPurchasePrice欄位，所以我們用SQL Query Analyzer

來在 SQL 命令中下達下列語句：

Alter table products

add LastPurchasePrice money null

Step1＞Detail 的過帳與 Master 的設定基本相同。打開 S004 項目，增加一個

infoTransaction 元件，命名為【tsDetail】。先設定『UpdateComp』屬性，這裏選擇

【ucPurchaseDetails】。

Step2＞連點兩下（double click） tsDetail 就會出現如下的 InfoTransaction

Component Editor 設定介面。按下【Add】按鈕，在新增的 TransTableName1 的方格

中連點兩下（double click）。

Step3＞在出現的設定介面中，下拉『TransTableName』屬性為【Products】。

『TransMode』屬性同樣設為【AutoAppend】（代表如果對方不在會自動新增相對的

資料）。

Step4＞按下 TransKeyFields 屬性右邊的小按鈕【…】，出現新的設定視窗。開始

對此 Transaction 來定義彼此的鍵值關係。按【Add】新增一個 TransKeyField。將

『DesField』屬性下拉選擇為【ProductID】，『SrcField』屬性為【ProductID】（在此

明細檔與 Products 的欄位名稱剛好一樣），按下【OK】。

Step5＞接著設定與 Products 關連的過帳欄位，按下 TransFields 屬性右邊的小按

鈕【…】，出現 TransField Collection Editor 視窗。按【Add】新增一個 TransField，

將『DesField』屬性下拉選擇為【UnitsInStock】，『SrcField』屬性則選擇為【Quantity】，

『UpdateMode』屬性則為【Inc】。按下【OK】。

Step6＞再新增一個過帳欄位，按下【Add】按鈕，將『DesField』屬性下拉選擇

為【LastPurchasePrice】，『SrcField』屬性則選擇為【UnitPrice】，『UpdateMode』

屬性則為【Replace】。按下【OK】。

Step7＞完成之後的 InfoTransaction Component Editor 設計介面如下圖。

按下連接線的起點（圓點）可以設定 TransKeyfield；按下終點（箭頭），可以

設定 TransField。

Step8＞同樣打開 Purchase 這個視窗，這次要測試的是更改的動作，選擇一筆有

Detail 的資料，在明細中將 1 號產品的單價多加了 5 元，如圖把 20 元改成 25 元，

並在 2 號產品的數量上加 10，如將數量 40 改成 50，最後按下 Master 的「存檔」即

可。

最後，我們用 SQL Profiler 來監看此過帳的 SQL 語句。如圖所示。

可以看到交易時有兩筆 Purchase Detail 都進行了更改的動作，也各進行了過帳

的處理，1 號產品的 UnitsInStock 沒有改變，改變的是 LastPurchasePrice 成為 25；2

號產品的 UnitsInStock 增加的 10，LastPurchasePrice 則一樣為 20。

AlwaysAppend 的應用實例

在 TransMode（過帳模式）有一種 AlwaysAppend 用來特殊處理不管主檔是

Insert/Delete/Update 時，都是以 Insert 來記錄到對方的目的資料表（Update 時會有

新舊值各 Insert 一筆到目的資料表）。此目的就是讓交易的資料表可以用 OnLine 的

方式集中到幾個資料表上統一處理，來讓系統的計算與統計功能變得更容易處理。

在這裏我們另外開立一個 Detail_Log 資料表，來將所有庫存的交易都存到此統一處

理。如進貨/出貨/入庫/出庫/借出/借入/調撥出/調撥入等所有庫存交易作業的明細資

料表都會統一 Log 到此 Detail_Log 表中。

Step1＞新建一個 Table，命名為 Detail_Log，資料結構與 Order Details 幾乎完全

一樣，只是新增一個 Log_ID 的 Indentity 欄位，作為主鍵，這樣的資料結構可以記

錄 Detail 的每個欄位的值。當然，也可以只選擇性的按需要設計 Log 的欄位。

CREATE TABLE [Detail_Log] （

[Log_ID] [int] IDENTITY （1, 1） NOT NULL ,

[PurchaseID] [nchar] （10） NULL ,

[ProductID] [int] NULL ,

[Seq] [nchar] （3） NULL ,

[UnitPrice] [money] NULL ,

[Quantity] [smallint] NULL,

[Discount] [real] NULL,

CONSTRAINT [PK_Detail_Log] PRIMARY KEY CLUSTERED

（

[Log_ID]

） ON [PRIMARY]

） ON [PRIMARY]

GO

Step2＞打開 sPurchases 項目，一樣在之前的 tsDetail 中新增一個 Transaction，

設定『TransTableName』為【Detail_Log】，『TransMode』為【AlwaysAppend】。

Step3＞接著設定 TransKeyFields為【PurchaseID】對應到【PurchaseID】，以及【ProductID】

對應到【ProductID】。

一般 AlwaysAppend 模式下設定在 TransKeyFields 與 TransFields 是近似的，但

不能重複設定，也就是設定在 TransKeyFields 中又設定在 TransFields，最大的差別

是 TransKeyFields 只有 Replace Mode，但 TrnasFields 則有 inc/dec 的模式。

Step3＞設定 TransFields，表示哪些要記錄的 Log 欄位。這裏新增 Seq，再新增

UnitPrice，再新增 Quantity，再新增 Discount。

因為過帳的方式是 AlwaysAppend，所以 UpdateMode 都設為 Replace，只有

Quantity 是設為 inc。在原始檔更改時，會 Insert 兩筆到 Detail_Log 資料表中，一筆

是更改前的舊值，一筆是更改後的新值，因此在 UpdateMode 為 inc 時，第一筆 Insert

的舊值會自動為負值（用來扣除先前的交易），第二筆 Insert 的新值會自動為正值（再

加上去）。如果 Dec 則正負後剛好與 inc 相反。

Step4＞編譯 sPurchases，執行查看結果。

我們試著在某一筆 Master 所對應的 Detail 中，去新增一筆 Detail。如輸出「產品號

碼」為 4，「單價」為 10，「數量」為 40；並在「產品號碼」為 3 的那筆進行更改，

將「數量」原本為 10 改成 30，最後按下 Master 的「存檔」。

最後，我們一樣用 Profiler 來查看後端對 Detail_Log 所執行的 SQL 語法來瞭解

AlwaysAppend 的作用。

我們可以看會有三筆 Insert 到 Detail_Log 資料表中，第一二筆為 Update 所產

生的，Quantity 從 10 改成 30 時，可以看到 Quantity 為 inc 模式，產生一筆 -10 的

數量，與另一筆 +30 的數量；第三筆為 Insert 的資料，相對也產生另一比「產品編

號」為 4的Detail_Log資料；如果有Delete的話，Detail_Log也會 Insert，只是Quantity

會自動為負值。

第八章發行及網站應用

8-1 Windows Server 2008 安裝 IIS

8-2 網站發佈

8-3 JQWebClient 呼叫 EEPWebClient

8-1 Windows Server 2008 安裝 IIS

在本章中，將為大家介紹在 Windows Server 2008 中如何安裝 IIS 以及 EEP Sliverlight 如何進行發佈，下面請一起跟著手冊看看如何在 Windows Server 2008 安裝 IIS

爲了能夠正常在 IIS 上運行，需要安裝的 FrameWork4.0。

Step1> 現在就可以安裝 Framework 4.0 了，首先請按照下面的地址下載 Framework 4.0 的

安裝包。

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9cfb2d51-5ff4-4491-b0e5-b386f

32c0992&displaylang=en

Step2> 下載完畢後，點開 Framework4.0 的安裝程式。請按照安裝程式的提示訊息進行安

裝。

注意：安裝完成后，若 IIS 在 Framework 前安裝，請在命令行下執行如下：

C:\Windows\Microsoft.NET\Framework\v4.0.30319>aspnet_regiis -i

Step3> 從這個步驟開始，下面就開始安裝 Windows Server2008 中的 IIS。首先，在 Windows

的開始菜單中找到控制台-〉系統及安全性選項。

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9cfb2d51-5ff4-4491-b0e5-b386f32c0992&displaylang=en

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9cfb2d51-5ff4-4491-b0e5-b386f32c0992&displaylang=en

Step4> 點開系統及安全性中有的系統管理工具。

Step5> 在系統管理工具中找到伺服器管理員將其打開。下放圖二為打開後的伺服器管理員

Step6> 在伺服器管理員的左下方找到角色，右擊滑鼠點擊新增角色

Step7> 接著，跟著新增角色精靈來完成 IIS 的安裝，在開始畫面點擊下一步

Step8> 在選取伺服器角色的選擇畫面中選擇網頁伺服器(IIS)

Step9> 在伺服器選定後，畫面會顯示出安裝 IIS 的確認畫面，這裡直接點選下一步。

Step10> 在選取角色服務的畫面中，請將應用程式開發的選項勾選到，點擊 Next。

Step11> 在確認安裝選項中，點擊 Next 確認需要安裝 IIS，這樣系統自動進入 IIS 安裝

進程。

Step12> 安裝完成後，系統自動提示安裝成功，點擊關閉按鈕完成安裝。

8-2 網站發佈

在 7-2 的内容中，將會為大家講述如何發佈，以及如何正確的設定 EEP2012 的 Server。

Step1> 首先，來安裝 EEP2012 的 Server。請在您打算安放 EEP Server 的位置中創建一個

資料夾。這裡以 C 槽為例，在 C 槽内創建一個 EEP2012 資料夾，用於下面步驟中安放

EEPNetServer、InitEEP 以及 EEPManager 所用。

Step2> 請從您的程式師的 EEP 安裝目錄下複製 EEPManager、EEPNetServer 以及 InitEEP

到上一步驟中產生的 EEP2012 的資料夾内。

Step3> 接著，分別打開 EEPManager、EEPNetServer 以及 InitEEP 這三個資料夾，將該資

料夾中的除去 xml、config、dll 以及 exe 文件保留外，其餘的文件都可以刪除。

注意：前面的步驟都是在您的 Server 上不會進行程式碼的調試，只作爲 EEP 的 Server

時使用的。若您需要在 server 上作 Debug，那麽在 server 上需要安裝 VS2012，同時完

整安裝 EEP2012。

Step4> 請在和 EEPNetServer 同一層加入一個 EFWCFModule 的空資料夾

Step5> 請將 EEPNetServer下的 InfoRemoteModule.dll以及 Srvtools.dll複製到 EEPManager

的資料夾下

Step6> 重新回到 C 槽創建一個 EEPPulish 以及 EEPPulishTest 的資料夾用於保存 EEP 的發

佈文件。

Step7> 打開控制台->系統及安全性->系統管理工具中的 Internet Information Services(IIS)

管理員

Step8> 打開後，首先找到應用程式集區，點中它在畫面的右側會出現應用程式集區清單

Step9> 點中右側應用程式集區清單中的 Classic .NET AppTool 右擊滑鼠點擊基本設定

Step10> 在編輯應用程式集區中將.NET Framework 版本設定為.NET Framework

v4.0.30319

Step11> 請以 Step8~Step9 中同樣的方法應用程式集區清單中的 DefaultAppPool

Step12> 在 IIS 管理員中，找到 Windows 的電腦名的節點，在它的右側將 ISAPI 及 CGI

限制雙擊

Step13> 在打開畫面中點中 ASP.NET v4.0.30319 右擊滑鼠選擇允許，這樣就可以在 IIS

中正常運行 Silverlight 了。

Step14> 接著，回到 IIS 管理員左側的連接列表處，打開站台->DefaultWebSite

Step15> 在 Default Web Site 右擊滑鼠選擇新增應用程式。

Step16> 在該步驟中請設定 Web 應用程式的別名，以及它對因的實體路徑(這裡的實體

路徑為前面創建的 C 槽下的 EEPPulish 的資料夾)

Step17> 設定完成後，請打開C槽下的 EEP2012/InitEEP，打開 InitEEP.exe，將WebClient

Directroy 設定為 C 槽下的 EEPPulish 的資料夾。最後點擊 Apply 按鈕。

Step18> 找到 JQWebClient 的一項，右擊滑鼠找到發行網站。

Step19> 在選取或匯入設定檔案中選擇下拉框中的<新增…>，並為該設定檔案命名完

成后點擊下一步

Step20> 發行方式選擇檔案系統，選擇后下方的設定項會相應改變。將目標路徑設定為

C 槽下新增的 EEPPublishTest 資料夾。發行在 EEPPublishTest 這樣做的目的是爲了避免

在站點下的上傳文件因爲使用了 VS 的直接發佈而被無意中刪除。

Step21> 接下來，使用默認值在設定和預覽頁中點擊下一步，最後點選發行來完成網站

的發行。

Step22> 最後，請將 EEPPublishTest 中的文件都 Copy 到 EEPPublish 的資料夾下。

8-3 JQWebClient 呼叫 EEPWebClient

在開發了 JQWebClient 后，程式師會提出這樣的問題，如何才能在 JQWebclient 下呼叫舊的

EEPWebClient 下的網頁呢？

Step1> 首先，需要找到 EEPWebClient 下的 Web.config 的 system.web 的節點下，添加

如下内容

<webServices>

<protocols>

<add name="HttpGet"/>

<add name="HttpPost"/>

</protocols>

</webServices>

Step2> 接著，需要將 EEPWebClient 發行，或者通過 VS 瀏覽網頁的方式建立一個虛

擬的網站。這樣 EEPWebClient 打開就會有一個準確的網址。

Step3> 將上面的網址的前半段，不包含 InfoLogin.aspx 的部分進行複製。打開

JQWebClient 下的 Web.config 文件，修改 appSetting 中 key 為 EEPWebClient 的 value，

將它修改為上面 copy好的地址。這樣設定后，JQuery的網站下就可以瀏覽EEPWebClient

的内容了。

第九章程式偵錯

9-1 Client 端 C#偵錯

9-2 Client 端 JS 偵錯

9-3 Server 端偵錯

9-1 Client 端 C#偵錯

出錯的執行方法：

逐步執行：

Step Into:(F11)

執行並移動到下一句要執行的語句上。

Step Over:(F10)

同上，但不進入嵌套的函式。

Step Out:(Shift+F11)

執行到程式塊的末尾，在執行完該部分後，重新進入中斷

Step1> 在 Client 的程式上設定中斷點

Step2> 先運行 Client 程式，在運行起來后，打開 VS 中的調試->附加到進程

Step3> 在打開窗口中選擇 ie 上 run 起來的網頁的網址的那個進程

當選擇進程出現下圖的錯誤時，請點擊確定按鈕，並點擊刷新。在重復上面一個步驟。

這樣程式即可開始調試。

9-2 Client 端 JS 偵錯

Step1> JS 的調試同樣需要 run 起要調試的 client 畫面，接著在 ie 畫面打開的狀態下，

點擊 F12 按鈕。

Step2> 在打開的 F12 的畫面中找到腳本這個頁簽，同時在下面的下拉選單中選擇到

需要調試的網頁名稱。

Step3> 將斷點打在需要調試的位置，最後點擊啓動調試。這樣，將調試畫面重新刷新

后，即可進行調試了。

9-3 Server 端偵錯

Step1> 首先，需要在 Server 上要調試的程式打上斷點。

Step2> 接著，同樣的需要將要調試的程式 run 起來，與 client 調試不同，Server 調試

需要附加的進程為 EEPNetServer

Step3> 這樣，當 Server 斷點亮起為實心圓時，即可開始調試。

注意：當附加進程后，該斷點圓圈為空心的圓，可能存在以下這些情況：

1. Client 端還未運行到調用這個 server 端的程式。

2. 請將 EEPNetServer->PackageManager 中的 Load in Memory 勾選去掉。

3. 重新建置您的 Server 端。

附錄

A.類別參數 (class parameters). HardCoding 使用

DataGrid

DataGrid 將資料以表格的形式顯示，並提供資料編輯、新增、排序等功能。

用例

以<table> 為標記創建 datagrid. 使用 <th> 標記定義中間的 Column，grid 所在 class 為

info-datagrid.

<table id="dg" class="info-datagrid" title="" data-options="toolbar:

'#Div1',pagination:true,view:commandview"

infolight-options="autoApply:true,remoteName:'sCustomers.Customers',tableNam

e:'Customers',queryDialog:'#query', editDialog:'#dlg', editMode:'Expand'">

<thead data-options="frozen:true">

<tr>

<th data-options="field:'CustomerID',width:80,

editor:{type:'validatebox',

options:{required:'required'}}">客戶編號

</th>

<th

data-options="field:'CompanyName',width:100,editor:'text'">公司名稱

</th>

</tr>

</thead>

<thead>

<tr

<th

data-options="field:'ContactName',width:80,align:'right', editor:'text'">聯絡

人

</th>

<th

data-options="field:'ContactTitle',width:80,align:'right',editor:'text'">職稱

</th>

</tr>

</thead>

</table>

data-options

設定基本的 easyui 中的屬性。

名稱功能描述

toolbar 設定定義工作條(新增、修改、刪除等按鈕)的 div 的 id

pagination True 表示在 grid 上需要顯示頁碼工具條

view 設定為 detailview 時需配合 infolight-options 中 EidtMode 為 Expand，grid 前方

會出現+用於展開。

設定為 commandview 時，grid 前方出現瀏覽、編輯以及刪除的按鈕。

Infolight-options

設置 EEP 提供屬性

名稱功能描述

allowInsert true 表示允許新增

allowUpdate true 表示允許修改

allowDelete true 表示刪除

alwaysClose True 表示首次打開畫面時，不取得資料

autoApply 是否自動存檔,true 表示自動保存

commandButtons 顯示瀏覽、編輯以及刪除 button 分別以‘v’,‘u’,‘d’按順序顯示，也可不設

定某個按鈕。如：‘ud’表示顯示修改與刪除按鈕。

duplicateCheck True 表示進行重復性檢查

editMode 設置 grid 的編輯模式，Dialog 表示彈跳視窗模式；Expand 表示展開模式；

Switch 表示換頁顯示；Continued 表示同頁顯示模式

editDialog 配合 editMode 設定顯示新增、編輯時的 div。格式：#Div 的 id

tableName 設定實際連接的 InfoCommand 的名稱

onDelete 在按下刪除按鈕時，觸發的 js 方法名稱

onInsert 在按下新增按鈕時，觸發的 js 方法名稱

onUpdate 在按下修改按鈕時，觸發的 js 方法名稱

parent 在 MasterDetail 時，設定 detail 對應的 Master 顯示的 div 的 id。

parentRelations

設定主檔和明細檔的關係。格式： [{field:'Detail 關聯欄位

',parentField:'Master 關聯欄位'}]

若有多個關聯欄位，每組關聯以{}為單位以,分隔

queryAutoColumn True 表示可以在 Grid 的 Column 下方顯示 TextBox，對每個欄位可進行

查詢

queryDialog 設定查詢畫面的 div。格式：#查詢 Div 的 id

remoteName

設定連接的 Server 端以及對應取資料的 InfoCommand。格式：server 專

案名稱.連接的 InfoCommand的 ID(多檔情況下為Master的 infoCommand

的 ID)

totalCpation 加縂標題名稱

thead 屬性

DataGrid 中的每個欄位設定在 th 中。同時通過 thead 來區分隔凍結欄位與非凍結欄位。

data-options

名稱功能描述

frozen true 表示凍結

GridColumn 屬性

data-options

名稱功能描述

field 綁定欄位

width 欄位寬度

align 對其方式，可用'left','right','center'

sortable True 表示允許排序

format 單元格顯示格式

日期格式 : yyyy-mm-dd, yyyy.mm.dd 或 yyyymmdd 等 , YYY-mm-dd 或

YY-mm-dd 代表民國年.

數值: Cn, Nn, n 代表小數位數, C3, 幣別有','且小數 3 位, N2, 有','且小數 2 位.

字串 : 以 '?'來 Mask 字符串 , 如 : '??O??' , 中間的 2 個 Byte 使用 'O',

'????****', 後面的 4 個 byte 使用'****'

二進位 : 'L-t-f', t 帶表 True(字元為 'Y'或 'y', 或數值為 1) 的文字內容 ,

'f' 代表 False( 字元為 'N' 或 'n', 或是數值為 0) 的文字內容 ,

如'L-是-否', 'L-通過-不通過', 'L-男-女'

formatter 單元格使用 js 方法調整顯示格式。該方法有三個參數:

value: 欄位值

rowData: 當前整筆資料.

rowIndex: row 的 ndex.

maxLength 輸入最大長度

disabled True 表示不可修改

editor 欄位使用的元件，一般情況為 text。

非 text 時寫法：以 datebox 為例

editor:{type:'datebox', options:{ validType’datetime’,disabled:false,}}

options 中寫入的是 datebox 它所使用到的屬性，如上例設定進行日期的類型

的檢查

infolight-options

名稱功能描述

field 綁定欄位

disabled True 表示不可修改

defaultValue 設定預設值，預設值可分為：系統變數、常值、js 方法以及 C#方法

格式：

js 方法：client[js 方法名稱]

C#方法：remote[C#方法名稱]

系統變數：remote[系統變數]

系統變數意義系統變數意義

_usercode 登入用戶 ID _username 登入用戶名稱

_solution 登入的 solution

id

_database 登入的資料庫

_ipaddress 登入的 ip 地址 _language 當前語言別

_today 今天日期 _firstday 當月第一天

_lastday 當月最後一天 _firstdaylm 上月第一天

_lastdaylm 上月最後一天 _firstdayty 今年第一天

_lastdayty 今年最後一天 _firstdayly 去年第一天

_lastdayly 去年最後一天

autoSeq 設定欄位自動序號功能。

格式：

[{numDig:’位數’,startValue:’起始值’,step:’加值數’}]

如：3 位數，以 1 為開始值，每次加 1

autoSeq:[{numDig:’3’,startValue:’1’,step:’1’}]

total 欄位計算方式。

sum：加縂；max：最大值；min：最小值；avg：平均值；count：筆數。

QueryWindow

用例

以<div> 為標記創建 query 打開的 windows. 使用 <input> 定義查詢的 Column，grid 所在class 為 easyui-window.

<div id="query" class="easyui-window" title="查詢" style="padding: 10px;

width: 360px; height: 100px;" iconcls="icon-search" closed="true"

maximizable="false" minimizable="false"

collapsible="false">

<div>

<table>

<tr>

<td>

<td nowrap="nowrap">客戶編號</td>

<td>

<input type="text"

infolight-options="field:'CustomerID',condition:'=',dataType:'string'"

id="CustomerID_Query" /></td>

</td>

</tr>

<tr>

<td>

<a class="easyui-linkbutton" iconcls="icon-search"

href="javascript:void(0);" onclick="query('#dg')">Query</a>

</td>

</tr>

</table>

</div>

</div>

QueryColumn

infolight-options

名稱功能描述

field 綁定欄位

condition 設置查詢條件

包含條件:

=等於、!=不等於、>大於、>=大於等於、<小於、<=小於等於、%以開始、

%% 包含

dataType 欄位類型

包括：

number、string、datetime、guid

defaultValue 設定查詢預設值，設定方式請參照 DataGrid 的 Column 中的設定屬性

DataForm

用例

<div id="ff" method="post"

infolight-options="remoteName:'sCustomers.Customers',tableName:'Customer

s'">

<table>

<tr>

<td>客户编号:

</td>

<td>

<input class="easyui-validatebox" type="text"

infolight-options="field:'CustomerID',form:'ff'" name="CustomerID"

data-options="required:true"></input>

</td>

</tr>

<tr>

<td>公司名称:

</td>

<td>


infolight-options="field:'CompanyName',form:'ff'"

name="CompanyName"></input>

</td>

</tr>

</table>

</div>

infolight-options

名稱功能描述

continueAdd 在新增情況下，完成一筆資料新增 Submit 時,不用關掉 Form, 持續進入

新增的狀態。

duplicateCheck True 表示進行重復性檢查


parent 在 MasterDetail 時，設定 detail 對應的 Master 顯示的 div 的 id。

parentRelations

設定主檔和明細檔的關係。格式： [{field:'Detail 關聯欄位

',parentField:'Master 關聯欄位'}]

若有多個關聯欄位，每組關聯以{}為單位以,分隔

remoteName

設定連接的 Server 端以及對應取資料的 InfoCommand。格式：server 專

案名稱.連接的 InfoCommand的 ID(多檔情況下為Master的 infoCommand

的 ID)

FormColumn

infolight-options

名稱功能描述

field 綁定欄位

defaultValue 設定預設值，預設值可分為：系統變數、常值、js 方法以及 C#方法

格式：

js 方法：client[js 方法名稱]

C#方法：remote[C#方法名稱]

系統變數：remote[系統變數]

autoSeq 設定欄位自動序號功能。

格式：

[{numDig:’位數’,startValue:’起始值’,step:’加值數’}]

如：3 位數，以 1 為開始值，每次加 1

autoSeq:[{numDig:’3’,startValue:’1’,step:’1’}]

Dialog

Dialog 是一個特殊定義的 window，用於顯示出彈跳、折疊方式的 DataForm。預設情況下在

窗口的右上角有一個關閉按鈕。該 dialog 在 easyui-dialog 這個 class 下。

用例

<div id="dlg" class="easyui-dialog"

style="width: 600px; padding: 10px 20px" closed="true"

buttons="#dlg-buttons" infolight-options="containForm:'#ff'">

<div id="ff" method="post"

infolight-options="remoteName:'sCustomers.Customers',tableName:'Customer

s'">

<table>

<tr>

<td>客户编号:

</td>

<td>


infolight-options="field:'CustomerID',form:'ff'" name="CustomerID"

data-options="required:true"></input>

</td>

</tr>

</table>

</div>

<div style="text-align: center; padding: 5px">

<a href="javascript:void(0)" class="easyui-linkbutton"

onclick="submitForm('#dlg')">確定</a>

<a href="javascript:void(0)" class="easyui-linkbutton"

onclick="closeForm('#dlg')">取消</a>

</div>

</div>

data-options

名稱功能描述

close true 表示顯示關閉按鈕

width 打開窗口寬度

height 打開窗口高度

infolight-options

名稱功能描述

containForm 設定打開編輯資料 DataForm 的 table 的 id

ComboBox

下來選單功能，class 為 info-combobox

用例


class="info-combobox" data-options="required:'required'"

infolight-options="field:'EmployeeID',

valueField:'EmployeeID',textField:'LastName',remoteName:'sOrders.cmdEmpl

oyees',tableName:'cmdEmployees'"

infolight-options="field:'EmployeeID',defaultValue:'1',form:'dataFormMas

ter'" style="width: 120px" />

infolight-options

名稱功能描述

valueField 保存資料值欄位

textField 顯示資料欄位

remoteName 設定連接的 Server 端以及對應取資料的 InfoCommand。格式：server 專案名

稱.連接的 InfoCommand 的 ID


selectOnly 在 ComboBox 中不可輸入

pageSize 在下來時顯示資料的筆數，-1 表示所有資料，當設定有限數值時，如果下

拉列表中無法顯示出需要顯示的資料可以輸入字符實現自動帶出的功能。

onSelect 資料選中時，可執行的 js 方法，輸入值為方法名稱

ComboGrid

與 ComboBox 相似，但不同之處在於 ComboGrid 中顯示的參考資料以 Grid 的形式顯示多列

參考資料。該元件為 info-combogrid 的 class

用例

綠色標註部分為FormColumn的 infolight-options的屬性，黃色為combogrid的 infolight-options

屬性。


class="info-combogrid" data-options=""

infolight-options="field:'EmployeeID',defaultValue:'client[GetCurrUser]'

,form:'dataFormMaster',panelWidth:300,valueField:'EmployeeID',textField:

'LastName',remoteName:'sOrders.cmdEmployees',tableName:'cmdEmployees',va

lueFieldCaption:'EmployeeID',textFieldCaption:'LastName',selectOnly:true

,columns:[{field:'EmployeeID',title:' 員工編號

',width:80,align:'left',sortable:false},{field:'LastName',title:' 姓氏

',width:80,align:'left',sortable:false}]" style="width:120px" />

infolight-options

名稱功能描述



valueFieldCaption 在 columns 沒有設定的情況下，用於作爲顯示的 Grid 中的保存資料欄位

的標題

textFieldCaption 在 columns 沒有設定的情況下，用於作爲顯示的 Grid 中的保存顯示資料

欄位的標題

remoteName 設定連接的 Server 端以及對應取資料的 InfoCommand。格式：server 專

案名稱.連接的 InfoCommand 的 ID


selectOnly 在 ComboBox 中不可輸入

columns 設定在 Grid 中顯示的欄位，該屬性可以不設定

設定格式：

{field:'欄位名稱',title:'grid 上的標題',width:欄位 ie 在 Grid 上顯示的寬

度,align:'對齊方式(left,center,right)',sortable:是否可以排序}

上面為一組欄位的設定，在多個欄位的情況下，請在每組之間以‘,’分

割


RefVal

通過按鈕打開 window，顯示出相關設定的欄位提供用戶參考選擇，同時可以帶回關聯欄位。

該功能 class 為 info-refval

用例

黃色為 RefVal 的 infolight-options 屬性。


class="info-refval" data-options="required:'required'"

infolight-options="field:'CustomerID',form:'dataFormMaster',title:'JQRef

val',panelWidth:300,remoteName:'sOrders.cmdCustomers',tableName:'cmdCust

omers',columns:[{field:'CustomerID',title:' 客戶編號

',width:80,align:'left'},{field:'CompanyName',title:' 公司編號

',width:150,align:'left'},{field:'City',title:' 城市

',width:80,align:'left'},{field:'Country',title:' 國家

',width:80,align:'left'}],columnMatches:[{field:'ShipCountry',value:'Cou

ntry'}],valueField:'CustomerID',textField:'CompanyName',valueFieldCaptio

n:'客戶編號',textFieldCaption:'公司編號'" maxlength="5" style="width:120px"

/>

infolight-options

名稱功能描述

title 顯示窗口的標題

panelWidth 顯示窗口的寬度



valueFieldCaption 在 columns 沒有設定的情況下，用於作爲顯示的 Grid 中的保存資料欄位

的標題

textFieldCaption 在 columns 沒有設定的情況下，用於作爲顯示的 Grid 中的保存顯示資料

欄位的標題

remoteName 設定連接的 Server 端以及對應取資料的 InfoCommand。格式：server 專

案名稱.連接的 InfoCommand 的 ID


columns

設定在 Grid 中顯示的欄位，該屬性可以不設定

設定格式：

{field:'欄位名稱',title:'grid 上的標題',width:欄位 ie 在 Grid 上顯示的寬

度,align:'對齊方式(left,center,right)',sortable:是否可以排序}

上面為一組欄位的設定，在多個欄位的情況下，請在每組之間以‘,’分

割

columnMatchs

用於設定關聯欄位帶入的功能

設定格式：

{field:'被帶值欄位名稱',value:'帶入值欄位名稱'}


CheckBox

Data-Option

名稱功能描述

on int 设定 DataOptions 为 on:1 varchar 设定 DataOptions 为 on:'y'

off int 设定 DataOptions 为 off:0 varchar 设定 DataOptions 为 off:'n'

B.元件屬性.

JQAutoSeq

為 Detail 中的序號欄位自動編號

屬性

名稱類型説明

BindingObjectID string 顯示編輯需要欄位所在的元件，一般為 JQDataForm 與

JQDataGrid 的 ID

FieldName string 需要編寫需要的欄位

NumDig int 自動序號的位數

StartValue int 自動序號的起始數

Step int 自動序號的遞增間隔

JQCheckBox

設定字符對應 CheckBox 定義

屬性

名稱類型説明

On string 設定 Checked 時表示的意義

int 设定 DataOptions 为 on:1, varchar 设定 DataOptions 为 on:'y'

Off string 設定在沒有 Checked 是表示的意義

int 设定 DataOptions 为 off:0 varchar 设定 DataOptions 为

off:'n'

JQComboBox

下拉選單元件

屬性

名稱類型説明

RemoteName string 元件連接的資料源

DataMember string 連接的 Server 端具體的 InfoCommand ID

DisplayMember string 顯示資料欄位

ValueMember string 保存資料值欄位

OnSelect string 資料選中時，可執行的 js 方法，輸入值為方法名稱

PageSize int 在下來時顯示資料的筆數，-1 表示所有資料，當設定有限數值

時，如果下拉列表中無法顯示出需要顯示的資料可以輸入字符實

現自動帶出的功能。

SelectOnly bool 在 ComboBox 中不可輸入

JQComboGrid

下拉選單，顯示資料並以 Grid 形式顯示的元件

屬性

名稱類型説明




DsiplayMember

Caption

string 在 columns 沒有設定的情況下，用於作爲顯示的 Grid 中的保存

顯示資料欄位的標題


ValueMemberCa

ption


資料欄位的標題


PageSize int 在下來時顯示資料的筆數，-1 表示所有資料，當設定有限數值

時，如果下拉列表中無法顯示出需要顯示的資料可以輸入字符實

現自動帶出的功能。

SelectOnly bool 在 ComboBox 中不可輸入

DialogWidth int 顯示 Grid 的 Dialog 的寬度

Columns Collect

ion

顯示 grid 中的欄位，在不設定的情況下 Grid 顯示出

DisplayMember 和 ValueMember 中設定的欄位

Columns 中的屬性請參考 JQGridColumn 説明

JQDataForm

自由排版的 Form 元件

屬性

名稱類型説明



HorizontalColu

mnsCount

int 水平方向顯示的欄位個數

DuplicateCheck bool true 表示存檔時檢測重復性

ContinueAdd bool 在新增情況下，完成一筆資料新增 Submit 時,不用關掉 Form, 持

續進入新增的狀態。

ShowApplyButt

on

bool 在 Identity 欄位類型時設定，這樣可以自動將 Server 端新產生的

編號帶回。

ParentObjectID string 在 MasterDetail 時，設定 detail 對應的 Master 顯示的元件的 id。

RelationColumn Collect 設定主檔和明細檔的關係。

s ion RelationColumns 中的屬性請參照 JQRelationColumn 説明

Columns Collect

ion

顯示 Form 中顯示的欄位

Columns 中的屬性請參考 JQFormColumn 説明

JQFormColumn

設定 Form 中具體顯示欄位。

屬性

名稱類型説明

FieldName string 欄位名

Caption string 標題

Alignment string 對齊方式,left\right\center

Width int 顯示寬度

Editor string 顯示元件類型

分別： text, checkbox, numberbox, validatebox, datebox,

infocombobox, infocombogrid, inforefval, password

Format string 顯示格式

日期格式 : yyyy-mm-dd, yyyy.mm.dd 或 yyyymmdd 等 ,

YYY-mm-dd 或 YY-mm-dd 代表民國年.

數值: Cn, Nn, n代表小數位數, C3, 幣別有','且小數 3位, N2, 有','

且小數 2 位.

字串: 以'?'來Mask字符串, 如: '??O??' , 中間的 2個Byte使用'O',

'????****', 後面的 4 個 byte 使用'****'

二進位: 'L-t-f', t 帶表 True(字元為'Y'或'y', 或數值為 1) 的文字

內容, 'f'代表 False(字元為'N'或'n', 或是數值

為 0) 的文字內容, 如'L-是-否', 'L-通過-不

通過', 'L-男-女'

EditorOptions string 根據 Editor 屬性設定值，進入到不同元件的屬性設定。請相應參

考 JQComboBox，JQComboGrid，JQRefVal 等屬性説明

MaxLength int 最大輸入寬度

ReadOnly bool true 表示只讀欄位

Span int 欄位間隔大小

JQDataGrid

用於以表格形式顯示資料

屬性

名稱類型説明



AutoApply bool 是否自動存檔

AlwaysClose bool True 表示首次打開畫面時，不取得資料

AllowAdd bool 是否允許新增

AllowUpdate bool 是否允許修改

AllowDelete bool 是否允許刪除

ViewCommand

Visible

bool 是否在 grid 前顯示瀏覽按鈕

UpdateComman

dVisible

bool 是否在 grid 前顯示修改按鈕

DeleteCommand

Visible

bool 是否在 grid 前顯示刪除按鈕

ParentObjectID string 在 MasterDetail 時，設定 detail 對應的 Master 顯示的元件的 id。

EditDialogID string 配合 EditMode 設定顯示新增、編輯時的 JQDialog 的 id。

EditMode enum 設置 grid 的編輯模式，Dialog 表示彈跳視窗模式；Expand 表示

展開模式；Switch 表示換頁顯示；Continued 表示同頁顯示模式

RelationColumn

s

Collect

ion

設定主檔和明細檔的關係。

RelationColumns 中的屬性請參照 JQRelationColumn 説明

Columns Collect

ion

顯示 Form 中顯示的欄位


Title string Grid 顯示標題

QueryTitle string 查詢 panel 顯示的 title

Pagination bool 是否分頁，在顯示 Detail 時設置為 false。

QueryMode enum Window 表示打開新窗口顯示查詢條件欄位，Panel 表示在 grid

上方直接顯示查詢條件欄位

QueryAutoColu

mn

bool 自動在 grid 上產生 textBox 提供欄位的查詢

ToolItems Collect

ion

用於設定 Grid 上的新增、修改、刪除等按鈕，請參照 JQToolItem

屬性設定

QueryColumns Collect

ion

用於設定 Grid 的查詢欄位，請參考 JQQueryColumn 屬性設定

TotalCaption string 加縂標題

OnInsert string 在資料準備新增時，調用的 js 方法名稱

OnUpdate string 在資料準備修改時，調用的 js 方法名稱

OndDelete string 在資料準備刪除時，調用的 js 方法名稱

JQGridColumn

設定 Grid 中顯示的具體欄位

屬性

名稱類型説明



Alignment string 對齊方式,left\right\center

Width int 顯示寬度




Format string 顯示格式

日期格式 : yyyy-mm-dd, yyyy.mm.dd 或 yyyymmdd 等 ,

YYY-mm-dd 或 YY-mm-dd 代表民國年.

數值: Cn, Nn, n代表小數位數, C3, 幣別有','且小數 3位, N2, 有','

且小數 2 位.

字串: 以'?'來Mask字符串, 如: '??O??' , 中間的 2個Byte使用'O',

'????****', 後面的 4 個 byte 使用'****'

二進位: 'L-t-f', t 帶表 True(字元為'Y'或'y', 或數值為 1) 的文字

內容, 'f'代表 False(字元為'N'或'n', 或是數值

為 0) 的文字內容, 如'L-是-否', 'L-通過-不

通過', 'L-男-女'

FormatScript string 單元格使用 js 方法調整顯示格式。該方法有三個參數:

value: 欄位值

rowData: 當前整筆資料.

rowIndex: row 的 ndex.



MaxLength int 最大輸入寬度

ReadOnly bool true 表示只讀欄位

Total string 欄位計算方式。

sum：加縂；max：最大值；min：最小值；avg：平均值；count：

筆數。

Sortable bool True 表示允許排序

ReadOnly bool true 表示為只讀欄位

Visible bool true 表示可見欄位

JQDefault

欄位預設值元件

屬性

名稱類型説明

BindingObjectI

D

string 綁定元件

Columns collecti

on

預設值具體欄位信息

名稱類型説明

FieldName string 預設值具體欄位

DefaultValu

e

string 預設的常量或系統變數

DefaultMeth

od

string 預設的方法

RemoteMet

hod

bool true 表示預設使用的 C#方法，false 表

示預設為 js 方法，配合 DefaultMethod

使用

JQDialog

用在配合彈出框形式，折曡式等編輯資料模式時，定義的對話框元件。

屬性

名稱類型説明

Title string 標題

Icon string 對話框顯示圖標

BindingObjectI

D

string 綁定控件

Closed bool true 表示顯示關閉按鈕

EditMode enum 設置 grid 的編輯模式，Dialog 表示彈跳視窗模式；Expand 表示

展開模式；Switch 表示換頁顯示；Continued 表示同頁顯示模式

JQMultiLanguage

用於設定多過語言功能

屬性

名稱類型説明

Active bool 是否激活

GroupIndex enum 定義當前的系統語言 English, ChineseTra, ChineseSim,

ChineseHK, Japanese, Korean, LANG1, LANG2

DBAlias string 連接的資料庫

方法

名稱傳入參數回傳類型説明

SetLanguage bool none 根據傳入參數設定是否根據當前 OS 系統語言顯示

語系。True 表示根據默認系統語系，false 則根據

GroupIndex 屬性設定語系顯示

JQQueryColumn

設定查詢欄位

屬性

名稱類型説明



Condition string 設置查詢條件

包含條件:

=等於、!=不等於、>大於、>=大於等於、<小於、<=小於等於、

%以開始、%% 包含






DefaultValue string 預設值，設定常值或系統變數

DefaultMethod string 設定 js 或 C#方法名稱

RemoteMethod bool 是否為后台（C#）方法

JQRefval

開窗選單元件。

屬性

名稱類型説明

Columns collecti

on

顯示 grid 中的欄位，在不設定的情況下 Grid 顯示出

DisplayMember 和 ValueMember 中設定的欄位


ColumnMatches collecti

on

用於設定自動匹配欄位

名稱類型説明

SourceField

Name

string 源帶出資料欄位

TargetField

Name

string 目的帶入資料欄位

SourceMeth

od

string 源帶出資料内容的方法

RemoteMet

hod

bool true 表示預設使用的 C#方法，false 表

示預設為 js 方法，配合 SourceMethod

使用




DsiplayMember

Caption


顯示資料欄位的標題


ValueMemberCa

ption


資料欄位的標題


DialogWidth int 顯示 Grid 的 Dialog 的寬度

DialogTitle string 顯示 grid 的 Dialog 的標題

JQRelationColumn

設定主檔與明細檔關聯關係的編輯器中的屬性。

屬性

名稱類型説明

FieldName string Detail 對應 Master 所關聯的欄位

ParentFieldName string Master 對應 Detail 所關聯的欄位

JQScriptManager

為初次想 hardcoding 的人士使用，自動帶出頁面中所需要引用到的 js 方法。無需做任何屬

性設定。若您是通過 template 產生的頁面不需要使用該元件。

JQSecColumns

用於設定欄位的顯示權限，需要配合 JQSecurity 元件使用。

屬性

名稱類型説明

BindingObjectID string 綁定控件

Columns collect

ion

設定需要權限管控的欄位

名稱類型説明

ColumnNam

e

string 欄位名稱

Visible bool 是否可見

ReadOnly bool 是否只讀

JQSecurity

用於設定顯示權限。

屬性

名稱類型説明

DBAlias string 保存設定資料庫別名

MenuID string 當前畫面在 Menu 上對應的 ID

Active bool 是否激活

RelaxMode bool 是否是寬鬆模式，即若在設定某個按鈕 Group 和 User 可見與否

時，寬鬆模式時任何一個設置為可見就可見。

Priority enum 權限優先級別，Group 還是 User

JQToolItem

用於設定 Grid 上的操作按鈕。

屬性

名稱類型説明

Icon string 按鈕圖標

ItemType string 按鈕類型

Text string 按鈕提示文字

OnClick string 按鈕 js 腳本

Visible bool 是否可見

JQValidate

用於檢驗合法性功能元件。

屬性

名稱類型説明

BindingObjectI

D

string 綁定元件

Columns collecti

on

合法性檢驗具體欄位信息

名稱類型説明

FieldName string 具體欄位

CheckNull bool 是否為空

CheckMetho

d

string 檢驗的方法

RemoteMet

hod

bool true 表示使用的 C#方法，false 表示為

js 方法，配合 CheckMethod 使用

ValidateMes

sage

string 方法檢驗時的自定義提示語

RangeFrom string 範圍檢查的起始字符

RangeTo string 範圍檢查的結束字符

C. EEPNetServer 的設定

DB Manager

【用途】: 用於設定連接資料庫的信息，以及指定放置 EEP 系統資料表的資料庫。

開啟路徑: File->DB Manager

【說明】

1． DB Manager->Data Base 用於設定資料庫的連接字串，並可以對連接成功的資料庫創建

EEP 系統資料表，畫面中的按鈕說明如下:

⑴ DB List: 此處用於顯示所有連接的資料庫的列表，可以透過 Add…來新增。

⑵ DB Detail Information: 選中 DB List 中的資料庫連接名稱後，在此處會顯示出所設定的資

料庫具體的連接信息。此信息框中的內容不可修改，需要通過 Modify 按鈕進入修改。

⑶ Add…: 增加連接資料庫信息，點擊後顯示 DB 設置對話框，進行設定。

⑷ Modify..: 修改連接資料庫信息，必須先點選左方所要修改的資料庫後，再點擊該按鈕

後，顯示 DB 設置對話框，進行修改。

⑸ Delete: 刪除連接資料庫信息，點選需刪除的資料庫名稱後，點擊該按鈕。

⑹ Save: 保存所有新增、修改和刪除的資料庫信息。

⑺ Test Connection: 測試連接資料庫設定是否正常，可否成功連接到相對的資料

庫。

⑻ Create System Table: 資料庫連接成功後，若該資料庫作為系統資料庫，請選擇該按鈕，

可以用來自動產生所有 EEP 內部所使用的系統資料表。

2．由 Add…或 Modify..進入 DB 設定對話框，屬性說明如下:

⑴ DataBase Name: 設定連接資料庫的名稱，即為此連接設定一個別名，此別名可

以讓 USER 登入時選擇或在 EEP 的開發時期所使用到的資料庫別名。

⑵ DataBase String: 連接資料庫連接字符串，請參考各資料庫的連接參數定義，每

個資料庫有一些少許的差異，另外，為了保密規定，Password 的設定將另外加密，

不存在此字串中。

⑶ DataBase Type: 連接資料庫類型，共有 none、MsSql、OleDB、Oracle、ODBC 和 MySql 6

個選項，當選擇為 ODBC 時，OdbcType 可進行選擇 Informix 或 FoxPro。

⑷ Max Count: 資料庫最大連接數，也是 EEP 內部的 Connection Pooling 數量，當

User 者瞬間同時需要資料庫連接池的服務時，就會依照此連接數量給 User 來使用，

如果需求大於本數量時，系統就會讓 User 等待 TimeOut 的秒數，如果時間內還是

無法取得連接池的話，

將回返回錯誤訊息給 User。本 Max Count 的建議值為實際連線數的 1/3，如連線使

用的 User 數為 50 個 User，只要 15~20 的 Max Count，須視 User 的存去頻率來增減。

⑮ Time Out: 等待連接池的逾時時間，單位為秒數，超過此時間，User 會得到錯誤的錯誤

訊息。建議值為 30 秒。

⑯ Split System Table: 是否分離系統資料表，當此資料庫要與別的資料庫共用系統資料表

時，請勾選此選項，這樣系統抓取 EEP的系統資料表時，就會根據另一頁”System DataBase”

所設定的系統資料庫來存取。系統資料表的設定下文會說明。

⑰ Password: 連接資料庫的密碼，另外設定，並以加密處理。

設定完成後點選 Ok 表示確定，若選擇 Cancel 設定便會取消所有設定。

3． DB Manager->System DataBase 用於設定 EEP 的系統資料庫，在此資料庫中存放 EEP 的系

統資料表。下圖中選擇 System DataBase 的下拉選單時，會列出前面所設定的 DB List 資

料庫別名，選擇哪一個是系統的資料庫，本設定專門用在 Split System Table 有勾選的狀

態下，就是以此資料庫為系統資料表。

Package Manager

【用途】: 用於將完成的 Server 工程的 dll 記錄在 Package Manager 中，並保存到

Package.xml 中。開啟路徑: File->Package Manager

【說明】

1. 在 Packages 區域中，看到的是 Solution 以及在本個 Solution 下的 Server 的 dll 的名稱。

下面對畫面中的按鈕說明如下:

⑪ Load in memory: 用於是否使用記憶體的方式來載入 dll，此設定是為了能及時更新這些

Server 端的 dll，因為在.net 相同的 Domain 程序中的 dll 被載入後是無法被釋放的，因此

可以利用載入到記憶體的方式來達到即時更新目的，但這種方法無法支援兩個 dll 相互引

用與調用，因此只能選擇要即時更新但不能相互調用，或者可以相互調用但無法即時更

新，如要更新則需關閉 EEPNetServer 或使用”Update Package”的功能來更新。

⑫ Add…: 用於增加 dll 的模組，在點選 Solution 的情況下，點選該按鈕，可以增加

新的 dll。

⑬ Delete: 刪除 dll，點選要刪除的 dll 後，點選該按鈕，即可刪除。

⑭ Unload: 用於在更新 Server 的 dll 時，剔除舊的 dll，這樣系統就可載入新的 dll，

但此功能需配合 Load in memory 的選項。

⑮ Save: 保存所有設定。

2. 當在 Packages 畫面中，點選一個 Solution 右擊滑鼠，這樣就可以增加、修改和刪除

Solution。其實在此處的增加 Solution 的名稱必須與 EEPNetServer 目錄下的 Solution 目錄

名稱須相同，並必須配合系統資料表 ITEMTYPE 的 Solution 名稱也要一致。

3. 另外在每個 dll 前面有一個 checkbox，代表是否讓此 dll 有作用，如果勾選代表 Active 為

啟用狀態，如果沒有勾選，代表為 InActive 為暫時無法服務的狀態。

System Log Manager

【用途】: 用於記錄對 Server 的所有操作，將其記錄在 NetServer\EEPLogFiles 資料

夾中，這些 Log 文件將以當次操作的日期作為命名方式，並以 txt 格式保存；或者

記錄在 SYSEEPLOG 的資料庫中。開啟路徑:File->System Log Manager。

【說明】

在 System Log Manager 中，預設為 Disable Server Log(不記錄 Server Log)。System Log

Manager 說明如下:

1. Disable Server Log: 用於設定是否記錄 Server 操作的 Log，在勾選的情況下，表示不記

錄；否則將記錄 Log。

2. Log to txt File: 用於設定 Log 記錄的方式，當選擇 Log To File 時，系統將會在

EEPNetServer\ EEPLogFiles 目錄下創建一個以當天日期為名稱的 txt 文件，此文件中記

錄對 Server 的所有操作；

a) Max size: 設定最大 Log 的 txt 大小，以 K 為單位，預設值為 1024。

b) Reserve days: 設置最多的 Log 天數，以 Day 為單位，預設為 7。當系統檢測到 Log

的天數超過設定的值，就會將前面超出天數的 txt 文件刪除。

3. Log to Database: 系統會將 Log 記錄在 SYSEEPLOG 的系統資料表中。

a) Keep records: 資料庫保存的最大筆數，如果超過會將舊資料刪除。

4. Also Log SQL: 是否記錄 Server 所下的 Sql 語句。選擇後，系統會將所下的 Server 語法

記錄在 EEPNetServer\ EEPLogFiles 下的，以”sql+日期”作為命名方式，保存為 txt 文件。

5. Detail Settings:設定具體保存到文件或資料庫中的内容。

Login Manager

【用途】: 設定用戶登陸狀態。開啟路徑:File-> Login Manager

【說明】

1. Allow user to multiple login: 是否允許用戶在多台電腦重復登陸。當此選項被點選時，一

個 User 可以重複登陸系統；否則，一個用於只能登陸一個 Client，不能重複登陸。預設

為勾選。

2. Allow user to login in same ip: 是否在同一个 ip 登入時，user 的登陸 count 加 1，勾選擇

加 1，否則就不加。

3. Save users in database:將登入信息記錄到 SYS_EEP_USERS

4. Active Directory: AD 目錄服務設定

⑪ Domain: 在有 AD 目錄服務的情況下，用於設定 AD 的域名。

⑫ Administrator: 用於設定登陸該域名的管理員帳號。

⑬ Password: 用於設定管理員帳號的密碼。

⑭ Test: 對於設定進行測試是否連接到指定的 AD 域名是否成功。

5. User Table Redifination: 用戶資料表重定義，即表示不使用 EEP 提供的 User 資料表時，

可自行定義已有的 User Table。預設不勾選此功能。在勾選的情況下，下面這些屬性可

以設定:

⑪ Table: 用於設定作為 User table 的名稱。

⑫ UserID: 用於設定該 Table 中作為 UserID 的欄位名稱。

⑬ UserName: 用於設定該 Table 中作為 UserName 的欄位名稱。

⑭ Password: 用於設定該 Table 中作為 Password 的欄位名稱。

請注意，如果用了此項設定，EEP 的安全管理機制將全面失效，只保留登入/登出的功能

有效而己，其餘所有 Menu 與 Security 元件與 InfoCommand 的資料權限等功能都會失效。

6. Password Policy:密碼規則

⑪ Password MinSize:密碼最短長度

⑫ Password MaxSize: 密碼最長長度

⑬ Password Char&Num:是否需要數字、字符混合模式

Server Config

【用途】: 用於設定主-從 Server 連接地址，登陸用戶限制與負載平衡的設定。開啟

路徑:File->Server Config

【說明】

1. Master Server: 表示此 Server 是否是主 Server。勾選的情況下，表示為主 Server，否則

為從 Server (Slave)。

⑴ Master Server IP: 當 Master Server 不勾選的情況下(即為從 Server 時)，該屬性中

設定了連接的 Master Server 的 IP。

⑵ Master Server Port: 當 Master Server 不勾選的情況下(即為從 Server 時)，該屬性

中設定了連接的 Master Server 的 Port，預設為 8989。

⑶ Max Time Out: 用於設定本 Server 的 User 逾時時間限制，當 User 可能因為斷線

或其他原因沒有在這個時限內存取本 Server 時，系統將會強制清除該 User，此單位

為小時，系統預設為 0 代表沒有時限不會執行清除 User 的動作。

⑷ Master User Number: 用於設定此 Master Server 最大的登陸用戶數，如果超過此

數量，本 Master Server 會將所有服務都指向其他的 Slave Server。

⑮ Current User Number: 顯示現在 Master Server 的線上用戶數，此應該是目前在

Server Monitor 中所有 User 的總和。

2. Slave Server: 用於設定分配的 Slave Server(從 Server)。

⑪ Slave Server List: 可設定多個從 Server。

⑫ Add: 新增一個從 Server。

⑬ Delete: 刪除一個從 Server，先點選所要刪除的 Server，再選擇該按鈕。

⑭ Modify: 修改一個從 Server，先點選所要修改的 Server，再選擇該按鈕。

⑮ Active: 表示是否啟動該點選的 Slave Server。

⑯ IP Address: 該 Slave Server 的 IP 地址，此屬性在此處不可修改，要通過 Modify 按鈕進行

修改。

⑰ Max User Number: 該 Slave Server 的最大用戶數量，只能顯示無法設定。

⑱ Current User Number: 該 Slave Server 的目前線上的用戶數，只能顯示無法設定。

WorkFlow Config

【用途】: 用於設定發送 Email 的具體信息。開啟路徑:File->WorkFlow Config

【說明】

在「Work Flow Config」中需要設定「Email」、「Password」、「SMTP Server」、「Mail Subject」

以及「Email Body」。

1. Email: 表示發送 mail 時所使用的發送者

2. Password: 該 mail 用戶的密碼

3. SMTP Server: 為發送 mail 的伺服器；

4. Port: mail 發送端口；

5. Enable TLS/SSL：是否啓用 SSL

6. Mail Subject: 用於設定 Mail 的主題顯示內容，共有四個選項 Sender(發送者)、FlowName(流

程名稱)、ActivityName(流程活動名稱)以及 Description(意見說明)；

7. Email Body: 表示發送的 mail 的正文內容，其中包括 Sender(發送者)、FlowName(流程名稱)、

ActivityName(流程活動名稱)、Content(單據主要內容)、Description(意見說明)、Date Time(流

程申請日期)以及 HyperLink(該申請單超鏈接)。

Client Update Manager

【用途】: 用於對 Window Client 程式更新管理，此適合 WinLoader 與 ClientLoader

這兩種 EEP 的 Client 端載入程式的專屬設定。開啟路徑: File-> Client Update Manager

【說明】下圖為 EEPClient Update Server 的連線 User，此用來專門管理 Client 端的下

載狀態與下載紀錄等等。

1. 在 Tools->Options 中設定 EEPWinLoad 所要下載的文件，屬性說明如下:

⑪ Port: 設定 WinLoader 或 ClientLoader 的端口。

⑫ Default: 是否設定默認端口(即 8990)，勾選的情況表示設默認端口；否則可自定

義端口。

⑬ Folder: 表示 EEPNetClient 所在路徑，此值不可修改。

⑭ Select Default Files: 選擇哪些預設的檔案要提供給 WinLoader 或 ClientLoader 來

進行下載，可以在 CheckBox 中勾選要下載的檔案。

2. Tools->Restart 用來重啟 EEPNetServer，因為更改設定後，必須重新啟動 EEPNetServer

才能讓 User 享用新的設定值。

3. Windows-> Active User 表示現在正在下載檔案的用戶狀態。

4. Windows-> History User 表示列出所有用戶下載安裝檔案的記錄。

下圖為 History User 的顯示結果，Active User 顯示結果類似。

Package Transfer Info

【用途】: 用於顯示更新的 Package 信息列表，每次更新後會顯示在 Grid 裡面。開

啟途徑:File->Package Transfer Info

【說明】

下圖為 Package Transfer Info 的顯示，它會顯示出更新的文件名稱，Package 類型，

更新日期等信息， Auto Transfer Package 都是預設為勾選的，請採用 Auto 的方式:

Update Package

【用途】: 在 Server程式更新時，如果在Package Manager中沒有選擇 Load in Memory

時，dll 的更新就必須此功能來完成，他會將 EEPNetServer 重新啟動來完成更新，用

此方式更新與自行關閉的更新不同的地方在自行關閉更新必須等待 USER 沒有使用

時更新，但此可以在 EEPNetServer 找到瞬間沒有 User 需要服務的空檔來結束

EEPNetServer，並會自動將 Package Transfer Information 所列的 DLL 進行更新，更新

完畢會自動重新啟動 EEPNetServer。

【說明】

在選擇 Update Package 後，系統會顯示上面的對話框，選擇 Ok，即可重啟 Server

來更新文件。

About

【用途】: 注冊 EEP，以及注冊信息的顯示。開啟路徑: Help->About

【說明】

1. 在 About 畫面中，顯示著 EEP 的注冊信息，如果本個 EEP 未經過注冊，可以通過點選

Register…來進行注冊，上圖中的 LITE001 就是代表沒有註冊的狀態。

2. 在注冊對話框中，填入公司的序列號、密碼以及公司名稱，點選 Register 按鈕，如果注

冊信息正確，便可以注冊成功。

About EEP.Net Server

【用途】: 用於顯示 EEP 的版本，開啟路徑: Help->About EEP.Net Server

【說明】

在 About EEP.Net Server 的對話框里，可以看到 EEPNetServer、 Srvtools 和

InfoRemoteModule 的版本號。

D. EEPManager 的使用手冊

Config Proxy

【用途】: 用於設定 Proxy 的代理服務器。開啟路徑: Login -> Config Proxy

【說明】當用戶在局域網需要設定 Proxy 的代理服務器時，可通過此功能來完成。

當畫面最上方的 CheckBox 被選中時，用戶可進行代理服務器的設定。

1. Address: 代理服務器地址。

2. Port: 代理服務器的端口。

3. User: 代理服務器的用戶。

4. Password: 代理服務器的密碼。

此設定是專用在有 Proxy 代理服務器時所使用，因為 EEPManager.exe 是透

過.net remoting 的 http 協定來與 EEPNetServer 進行溝通，因為有些企業基於安全理

由，必須透過 Proxy 服務器才能進行連線，就需透過此設定才能連上 EEPNetServer，

在此設定後，即可不必再使用 IE 的網際網路設定/連線來進行 Proxy 的設定，並會

自動將以上的設定紀錄在此 Client 當中。

Security Manager

【用途】: 用於對系統的安全性管理以及用戶、群組的管理。在購買 Flow 產品的用

戶，則可以設定組織架構以及職級。開啟路徑: System -> Security Manager

【說明】

1. Security -> Users & Groups -> Users 用來對用戶資料的設定

⑴ Navigator: 用於對 User List 中的資料進行新增、修改、刪除、瀏覽和保存等功能。

⑵ User List: 用於顯示 User 資料的列表。這裡要特別說明，如果該用戶可以有權管理

EEPManager 時，請將 User 資料中的 UserType 設定為 S，這樣該 User 就可以登陸

EEPManager，否則將只可以登入 EEP 的系統，但無法登入至 EEPManager 中。

⑶ Password: 用於設定用戶密碼。設定密碼時，首先需選中某個 User 後再輸入密碼，最後

必須通過 Navigator 上的保存按鈕來完成存入資料庫的動作。

⑷ ResetPWD: 用於清除密碼，需在選中一個用戶後，點選該按鈕，這樣可以讓該用戶的密

碼清空。

⑸ GetADUser: 用於取得 AD(Active Directory)目錄服務的用戶，此功能必須在 EEPNetServer

的 Login Manager 中設定了 AD 認證服務的前提下使用。

⑹ Access Menu: 用於設定單個用戶在系統功能中的權限。操作前必須先選中一個用戶。下

面說明一下 Access Menus

① UserID: 當前所要設定權限的用戶 ID。

② UserName: 當前所要設定權限的用戶名。

③ Copy From: 要進行權限設定複製的被複製對象，請選出用戶 ID。

④ Copy: 表示複製 Copy From 的用戶權限設定到目前用戶的權限設定中。

⑤ Equal: 表明複製其他用戶的權限設定情況，但是不保留該用戶原有權限設定。

⑥ Solution: 選擇所要進行權限管理的 Solution 名稱。

⑦ Menu List: 顯示 Solution 下的所有功能選單，當該選單被勾選時，表明用戶有權限。

⑧ Select All: Menu List 中的功能選單全部選中，表示該用戶有權限使用所有功能選單。

⑨ Cancel All: Menu List 中的勾選全部取消，表明該用戶沒有權限使用所有功能選單。

⑩ Apply: 存檔所有設定。

2. Security -> Users & Groups -> Groups 用來對群組資料的設定

⑪ Navigator: 用於對 Group List 中的資料進行新增、修改、刪除、瀏覽和保存等功

能。

⑫ Group List: 用於顯示 Group 資料的列表。

⑬ Group User Define: 用於定義該 Group 有那些 User，一個 Group 可以定義多個 User，一

個 User 也可在多個 Group 中被定義。左半邊是未選擇用戶列表，右半邊是已選擇用戶列

表，列表之間通過箭頭按鈕來新增或移除用戶。雙箭頭表示全部新增，或全部移除。

⑭ Query User: 用於對列表用的用戶進行查詢，分為未選擇用戶和已選擇用戶兩種，僅需按

下右邊的即可查詢，中間的按鈕是用來恢復顯示原來列表中的所有內容。

⑮ GetADGroup: 用於取得AD目錄服務的群組，此功能必須在EEPNetServer的 Login Manager

中設定了 AD 的設定下才能使用。

⑯ Save: 用於保存 Group User Define 中的設定。

Access Menus: 用於設定目前群組在系統功能表中的權限。操作前必須先選中一個

用戶。下面說明一下 Access Menus 的使用方式：

① GroupId: 目前所要進行權限設定的群組 ID。

② GroupName: 目前所要進行權限設定的群組名稱。

③ Copy From: 要進行權限設定複製的被複製對象，請選出群組 ID。

其他屬性同 User 中的設定，請自行參考，差別的是此為群組為角色，前文則為。

3. Security -> Users & Groups -> Groups 用來對角色資料的設定

設定 Groups，之前的 Groups 是代表使用者群組，但在 Workflow 中卻也可以代表角色，一個

角色可以有多個 User 扮演，也可是一個 User，在此我們將角色設定為「Y」就代表示流程所

使用的角色，因此之前的群組不一定是角色，但角色也可以是一個群組，如下圖，可以透過

後面的 ListBox 來設定該角色為哪一個 User 或哪些 User：

4. Security -> Menu Utility 用於對功能表的權限設定

⑪ Solution: 選擇要進行權限管理的 Solution 名稱。

⑫ Menu List: 用於顯示該 Solution 下所有功能表的樹形列表。

⑬ Menu Information: 用於顯示每個功能項目的設定明細情況

① Menu ID: 設定功能項目的 ID，此項值只能在新增時輸入，無法讓開發者進行修改，

此值也會自動案最後一號來編碼，並讓你可以更改，但改時是無法與其他 ID 重複的。

② Caption: 設定功能項目在 TreeView 中的標題名稱。

③ Parent ID: 用於設定父節點 ID，這裡 ID 指的是上一層父節點的 Menu ID，如果此節點

不填值將代表它是最上層的父節點。

④ Module Type: 用來設定此功能項目的類型，共有四種選擇。F 表示為 Window Form，

W 表示為 Web Form，O 表示為 WorkFlow 流程圖，C 表示為 Windows Form 但可以

掛入 Web 的表單中來使用，就是 Web 可以打開 Windows 表單的意思。

⑤ Image Url: 用於設定 TreeView 中每個節點顯示的圖示。

⑥ Package: 用來定義功能項目的程式檔案名稱，如果為 Web 時，Package 點開右側

選出 aspx 的文件；如果為 Window 時，Package 點開右側後，需要選擇 Cient 端

dll 檔案，如果為 WorkFlow 則會用來選擇 XOML 的檔案名稱，Package 有時為一個目

錄的名稱，真正的檔案名稱則會配合 Form Name 來使用。

⑦ Item params: 用來填入要傳入 Form 的參數，在 Window Form 中，可以通過在程式中

使用 this.ItemParamters 的方法取到該參數，它將會以 string 類型傳入。若在 WebForm

中，可通過 Request.QueryString["ItemParam"]來取得此參數。

⑧ Form Name: 用來填入 Win 或者 Web Form 的名稱。在 Web 中 EEPManager 會自動帶

出 Form Name(Aspx 名稱)；在 Windows 裡系統會預設為 Form1，因此開發者可根據真

正的 Form Class Name 來填入此表單名稱。

⑨ Solution: 顯示該功能項目的 Solution 名稱，此值不可修改，他會根據 Menu Utility 左

側的 Solution 的設定而決定。

⑩ Sequence: 用來設定該節點在該層當中的排列順序，由小到大的排列原則。

Add: 對目前的節點進行新增功能表項目。

Delete: 對目前的節點或功能項目進行刪除。

Modify: 對目前的節點或功能項目進行更改的動作。

OK: 對上面的 Add/Delete/Modify 進行存檔的動作。

Cancel: 對上面的 Add/Delete/Modify 進行取消的動作。

⑭ Apply: 如果對 Menu List 新增或更改動作時，可以用本 Apply 來存檔起來。

⑮ Reload: 用於將 Menu List 進行重新載入，相當于重新整理的動作。

⑯ Access User: 在選定一個功能項目後進行該項目的 User 權限設定，下面為 Access User

Define 的說明:

① User List: 用來顯示並提供選擇的 User 列表。

② Selected Users: 用來顯示已經選擇好的 User 列表。

③ >>: 表示將選擇所有 Users 資料。

④ >: 選擇目前在 User List 中的一個或多個 User。

⑤ <<:表示將取消所有以選擇的 Users 資料。

⑥ <: 代表取消選擇目前在 Selected Users 中的一個或多個 User。

⑦ Access Control: 在 Selected Users 中選中一個 User，並用來設定在該功能項目(表單)

中，設定該用戶在該表單的詳細操作權限，此權限設定需配合 InfoSecurity/WebSccurity

元件來完成輸出到此介面中來設定，否則此為空項目無法設定。下面為 Access Control

功能說明:

a. Menu ID: 顯示權限設定的功能項目 ID。

b. MenuName: 顯示權限設定的功能項目標題名稱。

c. UserID: 顯示權限設定的用戶 ID。

d. User Name: 顯示權限設定的用戶名稱。

e. Control List: 顯示並設定該表單中各個元件的操作權限，其中有 Enabled、Visible、

AllowAdd、AllowUpdate、AllowDelete 和 AllowPrint 權限管理。表明該用戶對該 Form

中的某個元件的操作權利，其中後面四項都是針對 WebDataSource 或

InfoBindingSource 元件而設定，對其他元件是無效的。

f. Add All: 將 InfoSecurity/WebSecurity中設定的所有需要控制權限的元件加入 Control

List 中。

g. Add: 將 InfoSecurity/WebSecurity 中設定的某個需要控制權限的元件加入 Control

List(元件列表)中。

h. Delete: 用來刪除目前選中 Control List 的權限設定。

i. Update: 將所有的 Control List 的權限設定進行保存。

5. Security -> Organization 用於設定組織架構

①部門編號：可以自行編立，如果同層部門的編號將為其排序的依據，如上面的業務部

為’2’，專案部為’3’，因此業務部在上方，以此類推。

②上層部門：本部門市隸屬哪一個部門之下，可以用來定義其樹狀的結構，為空白代表

組織最上層。

③主管：此設定是必填的，否則無法存檔，每個組織都必須設定一個主管，而主管的角

色最好也只能定義一個 User，因為該主管的角色如果有兩個 User，則會發生權責不清

的現象。

④職級名稱：就是上述的 OrgLevel 主管層級，每個部門主管在該組織中的主管層級，主

管審核 Activity 元件的授權標準就是會以此主管層級來處理的。

⑤部門中角色：每個部門內，都可以設定有哪些角色，注意在此都是角色為主，無法以

User 來設定，因此都必須透過角色來定義 User，操作時，必須要按下『Update』的 Button

才能進行部門的角色定義。

6. Security -> OrgLevel 用於設定職級

「OrgLevel」，代表設定公司主管的層級，代碼設定時須注意必須職級小的設定到職級大的，

如最小的主管是「1」，最大的主管是「9」等等。

職級的用途是在組織設定時，用來定義該組織主管的層級，因為在流程中的主管審核大都會

依照不同的層級有不同的授權，就以此來做授權標準。

Solution Define

【用途】: 用於定義 Solution(方案)的名稱。開啟路徑: System-> Solution Define

【說明】此處的 Solution ID 必須與 EEPNetServer\Package Manager 中添加的 Solution

名稱相同，Solution Name 則可根據用戶需求填入解決方案的名稱即可，一般情況下

我們會設定成一樣。

如果需要新增、修改 Solution 時，只需在 Define 的 Grid 中增加進入即可。刪除時，

先要選中需刪除的那筆資料的那行最前面表頭，然後點擊鍵盤上的 Del 按鈕即可。

所有操作完成後使用 Save 按鈕即可保存這些新增或更改方案的資料。

Package Manager

【用途】: 用於更新遠端 EEPNetServer 上的 Server 與 Client 的 dll 檔案，也就是說要

將目前開發環境上的 Server 或 Client 的 DLL 透過本功能要發佈到另一個

EEPNetServer 上。開啟途徑: System -> Package Manager

【說明】如圖及以下說明：

1. Package Type: 用於選擇上傳更新的類型是 Server 還是 Client 程式的 DLL。

2. Solution: 選擇要進行更新 dll 的 Solution 名稱。

3. Remote Package: 遠端所要更新的列表與紀錄，可以選中一筆更新記錄右擊滑鼠，查看

該更新程式的歷史記錄，說明如下:

① History List: 顯示該 DLL 檔案的所有更新記錄。

② DownLoad: 下載遠端 Server 的歷史版本到目前的 Local 目錄當中。

③ RollBack: 表示要恢復目前選中 DLL 的之前版本，操作時需要先選中要恢復版本的 DLL

然後點選 RollBack。

④ Close: 關閉該窗口。

4. Local Package: 顯示本地 Server 或 Client 的所有 dll，如要進行上傳更新到遠端的 Server

時，只需要選中 Local 所需更新的 DLL 程式，拖拉到 Remote Package 區域即可進行上傳

動作。

下面為更新時顯示畫面，選擇 Start 按鈕開始上傳或下載 DLL 版本。

Database Alias Options

【用途】用於切換登陸 EEPManager 的 Database。開啟路徑: System -> Database Alias

Options

【說明】

Currnet DataBase 的下拉列表中會顯示所有在 EEPNetServer 中定義的 DB 名稱(在 DB

Manager 中定義)，用戶可以根據此選項，按下 Apply 後即可變換 DB 名稱，這樣的

動作與開發者在 EEPManager 中 Login 時選資料庫的動作是一樣的，差別在不必重新

Login。

Reference Value

【用途】: 用於設定 RefVal 元件中的資料來源、顯示欄位這類的基本設定，此專門

使用於 Wizard 當中，用來自動產生 RefVal 元件時，能自動設定 RefVal 的資料來源。

開啟路徑: System -> Reference Value。

【說明】

1. Select Reference Value: 用於顯示已經存在的 Reference Value 代號，當選中此列表中的某

一項時，Detail 區將顯示該項 Reference Value 的所有設定。

2. Add: 增加一個 Reference Value，並可以在 Detail 區中設定。

3. Update: 修改該項 Reference Value，必須先選定 Select Reference Value 中的一項才能夠

修改，請在 Detail 區中進行修改，最後須按下 OK 的按鈕來存檔。

4. Delete: 刪除該項 Reference Value 的設定，先選中 Select Reference Value 中的一項後按下

Delete 即可。

5. Detail 區: 用於顯示 Reference Value 的各項設定，詳細屬性說明如下:

⑪ Caption: 用於設定 Reference Value 的視窗標題，會顯示在開窗後 Reference Value 的

視窗抬頭中。

⑫ Description: 用於設定 Reference Value 的描述，僅為備註使用，不會與產生 RefVal

元件的設定有關。

⑬ SelectAlias: 用於設定 RefVal 元件的連接資料庫名稱，此為虛擬的資料庫名稱，設定

於 EEPNetServer/DB Manager 中。

⑭ TableName: RefVal 元件的資料來源 Table 名稱，此僅用來在 Wizard 使用中顯示

ReferenceValue 信息時起到索引作用，在產生 RefVal 元件時並沒有使用到此設定。

⑮ SelectCommand: RefVal 元件的 Select SQL 語法，用來取得資料。

⑯ Connect: 測試 Select Command 中的 SQL 語法是否可以正確執行並能夠連接正確。

⑰ DisplayMember: 設定 RefVal 元件中的 DisplayMember 的欄位名稱。

⑱ ValueMember: 設定 RefVal 元件中的 ValueMember 的欄位名稱。

⑲ Display Column: 用於設定 Refval 元件有哪些 Column(即開窗顯示的欄位)，表格中的

REFVAL_NO 會自動編號無需修改，FIELD_NAME 用來設定欄位名稱，HEADER_TEXT 用

來設定該欄位顯示的表頭標題，WIDTH 可設定欄位的顯示寬度。

Data Dictionary

【用途】: 用於將開發者經常設計的資料表欄位與其基本常用的設定，統一設定與

管理，來達到一致性與自動化的目的，這部分我們稱之資料字典，簡稱 D.D.。開啟

路徑: System –> Data Dictionary

【說明】

1. Table List: 顯示需要設定 D.D.的 Table 名稱，當選中一個 Table 後，可在右側的 Grid 中設

定各欄位的 D.D.以及 Wizard 所要用到的相關設定屬性。

2. add: 增加一個 D.D.的 Table，點選此按鈕後將顯示出一個 D.D. Select Form，在此選擇一

個 Table 名稱。

⑴ Query: 可用來直接查詢所要的的 Table Name。

⑫ Check Box List: 用於選擇要設定 D.D.的 Table，可以多選，如果 Checkbox 中已經有勾選

了，就代表已經新增過了此 Table 的資料字典了。

選擇完畢，按下 OK 即可新增到 Table List 中。

3. refresh: 將 Table List 中的 Table 重新整理一次。

4. remove: 將目前選中 Table 的 D.D. 刪除。

5. Navigator 操作條: 用於新增、修改、刪除在 D.D.中的各欄位設定。

6. Grid: 用於設定 D.D 的各欄位設定。以下介紹一下 Grid 中的主要設定:

⑪ Caption: 欄位顯示標題，在 Wizard 產生頁面時都會取得此欄位的值，顯示在 FormView

或 GridView 中。

⑫ Control Type: 該欄位將使用那一種元件類型，共有六種選擇: TextBox、ComboBox、

RefValBox、DataTimeBox、ValidateBox 和 CheckBox，會在 Wizard 產生時自動按此所設定

來產生對應的元件。

⑬ CHECK_NULL: 設定該欄位是否及進行空白值檢測。Y 須表示檢查，N 表示不檢查。

⑭ DEFAULT_VALUE:設定該欄位的預設值，可以在 Wizard 中自動產生 Default 元件，並將該

欄位的預設值設定給 Default 元件。

⑮ QueryMode: 設定該欄位的查詢方式，共有三種選擇 normal、none 和 Range，在 Wizard

產生時會自動設定 Navigator 的欄位查詢模式。

ErrorLog Maintenance

【用途】: User 在 RunTime 執行時發生錯誤時，是可以回報給 EEPNetServer，此功

能將用來顯示所有 User 回報的錯誤記錄。開啟路徑: System –> ErrorLog Maintenance

【說明】

1. Query: 用來輸入 Error Log 的查詢條件，其中 Show Error For 代表要顯示那些類別的錯

誤，有 All、Error、Processing、Wait QC 和 Final 五種選擇。

2. Grid: 顯示所有錯誤回報的明細資料。

3. Image: 用於顯示 User 所回報回來的錯誤畫面，選中一筆錯誤回報資料後才會顯示。

4. Error Message: 代表Ｕser 發生錯誤當時的錯誤訊息。

5. Description: User 發生錯誤後，所回報的錯誤說明描述。

6. Call Stack: 顯示發生錯誤當時，系統的程式堆疊情況。

System Log Viewer

【用途】: 用於顯示 EEPNetServer 中所 Log 下來的資訊，此功能需配合 EEPNetServer

中 System Log Manager 來設定。開啟路徑: System -> System Log Viewer

【說明】

在 System Log Viewer 中共有 3 個頁籤，這三種 Log 都可以在 EEPNetServer 的 Log

Manager 中來分別設定是否必須 Log，其中 Log To File(查詢記錄在 txt 文檔中的 Log)、

Log To DataBase(查詢記錄在DataBase中的 Log)和 Log Sql Sentence(查詢EEPNetServer

所記錄的所有 SQL 語句)。在這三個頁籤中畫面的基本功能都很類似，因此以 Log To

File 來說明:

1. Log Type: 代表 EEP Log 的類型。

2. read from files: 按下此 Button 時，可用來讀取 Log 文檔，如果是 Log To DataBase 時，則

表示從資料庫中讀取 Log 資料下來。

3. Query: 對讀取出的文件進行 Log 資料查詢篩選。下面解釋一下查詢的欄位:

⑴ UserID: 表示要查詢那一個 User 的 Log 記錄。

⑵ Log Type: 表示要查詢那一種 Log 的類型，共有 All(全部)、Normal(正常)、

Warming(警告)、Error(錯誤)和 Unkown(未知)等五種選擇。

⑶ Log Style: 表示要查詢那一種 Log 記錄，共有 All(全部)、System(EEP 系統操作 Log)、

Provider(資料讀取與寫入的操作)和 Method(執行 Server Method 的動作)四種選擇。

⑷ search: 表示開始進行查詢。

4. Grid: 顯示 EEPNetServer 所 Log 的結果，其格式說明如下。

ConnID: 自動編號, 以日期+時間+毫秒+序號來紀錄.

LogStyle: 0-> SystemCall, 1->DataProvider, 2->ServerMethod

LogDateTime: Log 的時間.

DoMainID: 資料庫的別名.

UserID: 自動記錄該 UserID.

LogType: 0->正常結束, 1->例外或警告, 2->開始

注意: 每次服務, LogType 都會記錄兩次, 先紀錄 2 代表開始, 在紀錄 0 代表結束,

如果只有 2 後面沒有 0, 代表異常錯誤, 但 LogStyle 為 SystemCall 時, 只記錄結束.

Module: 模組名稱(如 ProviderName 或 MethodName)

Description: 如有 Exception, Exception 內容

ComputerIP: 系統自動紀錄.

ComputerName: 系統自動紀錄.

Executeiontime: 執行時間, 從 LogType2 到 LogType0 的時間.

~ 249 ~

About EEP Manager

【用途】: 用於顯示 EEP Manager 的版本，開啟路徑: Help->About EEP Manager

【說明】

在 About EEP Manager 的對話窗中，可以看到 EEPManager 、 Srvtools 和

InfoRemoteModule 的各版本號碼。

~ 250 ~

E. Q&A

Q:Datebox 如何使用 varchar(8)類型的欄位？

A: DateTime 如果使用 Varchar(8)時, 可以在 Editor 為 datebox 時, 設定 EditorOptions 為

dateFormat:'nvarchar'即可.

Q: 何在開啟 Form 之後設定 setwhere,然後 datagrid 再將符合條件的資料帶出來?

A: 可以通過在 Page 第一次運行時，下一個條件。同時，在查詢時也將這個條件加入進去即

可。

$(document).ready(function () {

$("#dataGridMaster").datagrid('setWhere', "EmployeeID=3");

});

function queryGrid(dg)

{

if ($(dg).attr('id') == 'dataGridMaster')

{

var where = $(dg).datagrid('getWhere');

if (where.length > 0) {

where = where + " and EmployeeID=3";

}

else {

where = "EmployeeID = 3";

}

//alert(where);

$(dg).datagrid('setWhere', where);

}

}

Q: Server Method 的使用

A:Remote 端(IIS)呼叫 Server Method.

public object CallMethod()

~ 251 ~

{

List<object> list = new List<object>();

list.Add("test");

object ret = EFClientTools.ClientUtility.CallMethod("sOrders", "SharpServerMethod",

list);//第一個參數 Server 專案名稱，第二個參數為 Method 名稱，第三個參數為傳入 Server

的 list 參數

return ret;

}

Client 端(JS)呼叫 Server Method.

function CallMethod() {

var ret;

$.ajax({

type: "POST",

url: '../handler/jqDataHandle.ashx?RemoteName=sOrders.Orders', //連接的

Server 端，command

data: "mode=method&method=" + "SharpServerMethod" +

"&parameters=test", //method 后的參數為 server 的 Method 名稱 parameters 后為端的到后端

的參數

cache: false,

async: false,

success: function (data) {

ret = data;

}

});

return ret;

}

5-3 datetimepicker - 首頁 · jdataobject.cs：這是一個eep jquery...

Documents