jeesite 说明文档-5.硕正WEB组件的应用

第5章 硕正WEB组件的应用

作者：ThinkGem 更新日期：2014-01-03

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=\, curSelBgColor=\,

displayMask=\管理员', '#ff0000', transparent)\, expresses={

@SupExpress(text=\), @SupExpress(text=\)

}), fonts={

@SupFont(faceName=\宋体\, weight=\),

@SupFont(faceName=\楷体\, weight=\, height=\), @SupFont(faceName=\楷体\, weight=\, height=\)},

@SupGroup(id=\, name=\日期\, headerFontIndex=\, sort=50), @SupGroup(id=\, name=\日期2\, headerFontIndex=\, sort=60, @SupGroup(id=\, name=\日期3\, headerFontIndex=\, sort=70,

groups={

parentId=\), parentId=\)

实体配置，参考类： Test.java

2.2. @SupTreeList

硕正总体注解

硕正主要注解，只可以定义到类之上。

2.3. @ SupProperties

硕正属性设置注解。

2.4. @ SupFont

硕正字体设置注解。

2.5. @SupCol、@SupGroup

硕正表头列及列表头组设置注解。

3. JS封装库 supcan.js

3.1. 调用实例

<%@include file=\ %>

解释：

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

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: \, // 行选择模式（row：单选；rows：多选；excel：ExceldataType: \, height: \, body: \,

// 数据类型，如果数据类型不是json，则This.data// 控件高度，默认自适应。 // 控件高度自适应，相关对象

选择模式）

不自动转换为对象，分页代码也不自动赋值

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';