第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="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"javascript说明, 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. 调用实例
<%@includefile="/WEB-INF/views/include/supcan.jsp"%>
<scripttype="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为：硕正实例化后的对象。
<divid="supcan"class="supcan">
<script>insertTreeList('AF', 'border=none;')</script>
</div>
Test为，实体类的名称。
Ready：硕正加载调用方法。
Event：硕正事件调用方法。
3.2. 方法接口
/**
*实例化一个硕正控件
*@paramAF硕正对象
*@paramurl硕正描述文件URL，如果不是一个URL，则填写实体类名
*@paramoptions参数选项
*@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()
/**
*初始化方法
*@paramurl描述文件URL
*/
$this.init = function(url)
/**
*加载数据
*@paramdataUrl数据调用URL
*@paramparamString参数字符串
*@parampareDiv分页DIV的ID，如果数据格式为JSON，则自动设置分页器代码。
*/
$this.load = function(dataUrl, paramString, callback)
/**
*加载数据
*@paramform参数表单，自动序列化表单字段，加入数据URL中
*@parampage分页DIV，如果数据格式为JSON，则自动设置分页器代码。
*/
$this.loadByForm = function(form, page)
/**
*获取单元格数据
*@paramcolumnName列表列名
*@paramisMany是否支持多选，获取多个值
*/
$CellText = 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.st.entity.Test.java
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论