JeeSite 硕正WEB组件的应用

1. 简介

硕正描述格式采用XML,数据格式采用JSON。原因如下:描述采用XML可表现比较复杂的结构,易于官方文档查找好对应;数据采用JSON格式原因有三点,一是JSON官方有很好的支持;二是JSON格式比较简单并解析速度快,三是JSON相比XML要小,节省流量。
后台采用注解方式配置,自动返回描述XML字符串和数据JSON字符串。
  • 描述文件XML注解配置请参考本文第2章;
  • 数据格式JSON注解配置请参考Jackson注解,官方网站

2. 树列表注解

实例代码见TestController.java,testList.jsp文件,演示页面如下:


2.1. 调用实例

@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")
})

实体配置,参考类: Test.java


2.2. @SupTreeList

  • 硕正总体注解
  • 硕正主要注解,只可以定义到类之上。
2.3. @ SupProperties
硕正属性设置注解。


2.4. @ SupFont
硕正字体设置注解。


2.5. @SupCol、@SupGroup
硕正表头列及列表头组设置注解。

3. JS封装库 supcan.js

3.1. 调用实例

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

解释:

AF为:硕正实例化后的对象。

<div id="supcan" class="supcan">
		<script>insertTreeList('AF', 'border=none;')</script>
</div>
Test为,实体类的名称。
Ready:硕正加载调用方法。
Event:硕正事件调用方法。

3.2. 方法接口

/**
 * 实例化一个硕正控件
 * @param AF 硕正对象
 * @param url 硕正描述文件URL,如果不是一个URL,则填写实体类名
 * @param options 参数选项
 * @returns {Supcan} 硕正封装对象实例
 */
function supcan(AF, url, options);

options参数:

su: $this,				// 当前硕正对象
		checked: true,		// 是否插入复选框
		curSelMode: "rows",	// 行选择模式(row:单选;rows:多选;excel:Excel选择模式)
		dataType: "json",		// 数据类型,如果数据类型不是json,则This.data不自动转换为对象,分页代码也不自动赋值
		height: "auto",		// 控件高度,默认自适应。
		body: "body",			// 控件高度自适应,相关对象
		frame: top.mainFrame,// 控件高度自适应,相关对象
		ready: function(){},	// 默认的控件加载调用方法
		event: function(){}	// 默认的控件事件调用方法

对象公共方法:

var $this = this;
	
	/**
	 * 硕正原始对象
	 */
	$this.AF = AF;
	
	/**
	 * 硕正描述文件URL,如果不是一个URL,则填写实体类名
	 */
	if (url.indexOf('/') == -1){
		$this.url = ctx + '/supcan/treeList/' + url + '.xml';
	}else{
		$this.url = url;
	}
	
	/**
	 * 硕正组件配置选项
	 */
	$this.options
	
	/**
	 * 硕正数据对象,如果dataType为json,则为JSON对象,否则为数据字符串
	 */
	$this.data = "";

	/**
	 * 调用硕正内置函数
	 */
	$this.func = function(name, param)
	
	/**
	 * 硕正控件自动高度
	 */
	$this.autoHeight = function()
	
	/**
	 * 初始化方法
	 * @param url 描述文件URL
	 */
	$this.init = function(url)
	
	/**
	 * 加载数据
	 * @param dataUrl 数据调用URL
	 * @param paramString 参数字符串
	 * @param pareDiv 分页DIV的ID,如果数据格式为JSON,则自动设置分页器代码。
	 */
	$this.load = function(dataUrl, paramString, callback)
	
	/**
	 * 加载数据
	 * @param form 参数表单,自动序列化表单字段,加入数据URL中
	 * @param page 分页DIV,如果数据格式为JSON,则自动设置分页器代码。
	 */
	$this.loadByForm = function(form, page)

	/**
	 * 获取单元格数据
	 * @param columnName 列表列名
	 * @param isMany 是否支持多选,获取多个值
	 */
	$this.getCellText = function(columnName, isMany)
	
	/**
	 * 切换到以树显示,并让勾选列和第一列(树的排序列)合并显示
	 */
	$this.setTree = function(flag)

	
	/**
	 * 使硕正控件变为灰色
	 */
	$this.setGrayWindow

4. 应用实例

展示页面:
WEB-INF/views/modules/test/testList.jsp
数据获取方法:
src/main/java/cn/net/modules/test/web/TestController.java 里的 listData 方法
数据实体类配置:
com.thinkgem.jeesite.test.entity.Test.java

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部