JeeSite 碩正WEB組件的應(yīng)用

1. 簡(jiǎn)介

碩正描述格式采用XML，數(shù)據(jù)格式采用JSON。原因如下：描述采用XML可表現(xiàn)比較復(fù)雜的結(jié)構(gòu)，易于官方文檔查找好對(duì)應(yīng)；數(shù)據(jù)采用JSON格式原因有三點(diǎn)，一是JSON官方有很好的支持；二是JSON格式比較簡(jiǎn)單并解析速度快，三是JSON相比XML要小，節(jié)省流量。
后臺(tái)采用注解方式配置，自動(dòng)返回描述XML字符串和數(shù)據(jù)JSON字符串。

• 描述文件XML注解配置請(qǐng)參考本文第2章；
  
• 數(shù)據(jù)格式JSON注解配置請(qǐng)參考Jackson注解，官方網(wǎng)站
  

2. 樹列表注解

實(shí)例代碼見TestController.java，testList.jsp文件，演示頁面如下：

2.1. 調(diào)用實(shí)例

@SupTreeList(
	properties=@SupProperties(headerFontIndex="2", curSelBgColor="#ccddcc",
		displayMask="backColor=if(name='管理員', '#ff0000', transparent)",
		expresses={
			@SupExpress(text="total=round(price*num, 2)"),
			@SupExpress(text="price=round(total/num, 4)")
	}),
	fonts={
		@SupFont(faceName="宋體", weight="400"),
		@SupFont(faceName="楷體", weight="700", height="-12"),
		@SupFont(faceName="楷體", weight="400", height="-12")}, 
	groups={
		@SupGroup(id="date", name="日期", headerFontIndex="1", sort=50),
		@SupGroup(id="date2", name="日期2", headerFontIndex="2", sort=60, parentId="date"),
		@SupGroup(id="date3", name="日期3", headerFontIndex="2", sort=70, parentId="date")
})

實(shí)體配置，參考類： Test.java

2.2. @SupTreeList

• 碩正總體注解
  
• 碩正主要注解，只可以定義到類之上。

2.3. @ SupProperties
碩正屬性設(shè)置注解。

2.4. @ SupFont
碩正字體設(shè)置注解。

2.5. @SupCol、@SupGroup
碩正表頭列及列表頭組設(shè)置注解。

3. JS封裝庫 supcan.js

3.1. 調(diào)用實(shí)例

<%@include file="/WEB-INF/views/include/supcan.jsp" %> 
	<script type="text/javascript">
		$(document).ready(function() {
			su = supcan(AF, "Test", {
				ready: function(){
					// 加載數(shù)據(jù)
					page();
				},
				event: function(Event, p1, p2, p3, p4){
					if(Event == 'DblClicked'){
						edit();
					}
				}
			});
		}); 
	</script>

解釋：

AF為：碩正實(shí)例化后的對(duì)象。

<div id="supcan" class="supcan">
		<script>insertTreeList('AF', 'border=none;')</script>
</div>

Test為，實(shí)體類的名稱。
Ready：碩正加載調(diào)用方法。
Event：碩正事件調(diào)用方法。

3.2. 方法接口

/**
 * 實(shí)例化一個(gè)碩正控件
 * @param AF 碩正對(duì)象
 * @param url 碩正描述文件URL，如果不是一個(gè)URL，則填寫實(shí)體類名
 * @param options 參數(shù)選項(xiàng)
 * @returns {Supcan} 碩正封裝對(duì)象實(shí)例
 */
function supcan(AF, url, options);

options參數(shù)：

su: $this,				// 當(dāng)前碩正對(duì)象
		checked: true,		// 是否插入復(fù)選框
		curSelMode: "rows",	// 行選擇模式（row：?jiǎn)芜x；rows：多選；excel：Excel選擇模式）
		dataType: "json",		// 數(shù)據(jù)類型，如果數(shù)據(jù)類型不是json，則This.data不自動(dòng)轉(zhuǎn)換為對(duì)象，分頁代碼也不自動(dòng)賦值
		height: "auto",		// 控件高度，默認(rèn)自適應(yīng)。
		body: "body",			// 控件高度自適應(yīng)，相關(guān)對(duì)象
		frame: top.mainFrame,// 控件高度自適應(yīng)，相關(guān)對(duì)象
		ready: function(){},	// 默認(rèn)的控件加載調(diào)用方法
		event: function(){}	// 默認(rèn)的控件事件調(diào)用方法

對(duì)象公共方法：

var $this = this;
	
	/**
	 * 碩正原始對(duì)象
	 */
	$this.AF = AF;
	
	/**
	 * 碩正描述文件URL，如果不是一個(gè)URL，則填寫實(shí)體類名
	 */
	if (url.indexOf('/') == -1){
		$this.url = ctx + '/supcan/treeList/' + url + '.xml';
	}else{
		$this.url = url;
	}
	
	/**
	 * 碩正組件配置選項(xiàng)
	 */
	$this.options
	
	/**
	 * 碩正數(shù)據(jù)對(duì)象，如果dataType為json，則為JSON對(duì)象，否則為數(shù)據(jù)字符串
	 */
	$this.data = "";

	/**
	 * 調(diào)用碩正內(nèi)置函數(shù)
	 */
	$this.func = function(name, param)
	
	/**
	 * 碩正控件自動(dòng)高度
	 */
	$this.autoHeight = function()
	
	/**
	 * 初始化方法
	 * @param url 描述文件URL
	 */
	$this.init = function(url)
	
	/**
	 * 加載數(shù)據(jù)
	 * @param dataUrl 數(shù)據(jù)調(diào)用URL
	 * @param paramString 參數(shù)字符串
	 * @param pareDiv 分頁DIV的ID，如果數(shù)據(jù)格式為JSON，則自動(dòng)設(shè)置分頁器代碼。
	 */
	$this.load = function(dataUrl, paramString, callback)
	
	/**
	 * 加載數(shù)據(jù)
	 * @param form 參數(shù)表單，自動(dòng)序列化表單字段，加入數(shù)據(jù)URL中
	 * @param page 分頁DIV，如果數(shù)據(jù)格式為JSON，則自動(dòng)設(shè)置分頁器代碼。
	 */
	$this.loadByForm = function(form, page)

	/**
	 * 獲取單元格數(shù)據(jù)
	 * @param columnName 列表列名
	 * @param isMany 是否支持多選，獲取多個(gè)值
	 */
	$this.getCellText = function(columnName, isMany)
	
	/**
	 * 切換到以樹顯示，并讓勾選列和第一列(樹的排序列)合并顯示
	 */
	$this.setTree = function(flag)

	
	/**
	 * 使碩正控件變?yōu)榛疑?	 */
	$this.setGrayWindow

4. 應(yīng)用實(shí)例

展示頁面：
WEB-INF/views/modules/test/testList.jsp
數(shù)據(jù)獲取方法：
src/main/java/cn/net/modules/test/web/TestController.java 里的 listData 方法
數(shù)據(jù)實(shí)體類配置：
com.thinkgem.jeesite.test.entity.Test.java