jeesite快速开发平台(七)---硕正WEB组件的应用
2017-03-19 22:28
513 查看
1. 简介
硕正描述格式采用XML,数据格式采用JSON。原因如下:描述采用XML可表现比较复杂的结构,易于官方文档查找好对应;数据采用JSON格式原因有三点,一是JSON官方有很好的支持;二是JSON格式比较简单并解析速度快,三是JSON相比XML要小,节省流量。后台采用注解方式配置,自动返回描述XML字符串和数据JSON字符串。
描述文件XML注解配置请参考本文第3章;
数据格式JSON注解配置请参考Jackson注解,官方网站
2. 树列表注解
实例代码见TestController.java,testList.jsp文件,演示页面如下:1.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
1.2. @SupTreeList
硕正总体注解硕正主要注解,只可以定义到类之上。
1.3. @ SupProperties
硕正属性设置注解。1.4. @ SupFont
硕正字体设置注解。1.5. @SupCol、@SupGroup
硕正表头列及列表头组设置注解。2. JS封装库 supcan.js
2.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:硕正事件调用方法。
2.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
3. 应用实例
展示页面: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
相关文章推荐
- jeesite快速开发平台(八)---工作流的应用实例
- jeesite快速开发平台(五)---内置组件的应用
- jeesite快速开发平台(六)---代码生成器的应用
- OpenJWeb(1.6) Java Web应用快速开发平台技术白皮书
- REDCAT 数据库应用软件快速开发平台
- 系统集成应用及快速开发平台
- 低成本、高效率的Java Web应用快速开发利器-OpenJWeb快速开发平台1.8
- Phonegap:快速开发跨平台HTML5应用的胶水层
- Java Web应用快速开发平台OpenJWeb(v1.6)增删改查页面生成器操作手册
- 快速应用开发平台-对象建模
- 新一代的Web应用快速开发平台--OpenJWeb
- Phonegap:快速开发跨平台HTML5应用的胶水层
- OpenJWeb(1.6) Java Web应用快速开发平台技术白皮书
- openjweb1.8 java web应用快速开发平台产品白皮书
- 华丹快速开发平台应用二
- 新一代的Web应用快速开发平台--OpenJWeb
- openjweb1.8 java web应用快速开发平台产品白皮书
- Java Web应用快速开发平台OpenJWeb(v1.6)增删改查页面生成器操作手册
- 快速开发平台应用的必要性
- 基于J2EE的WEB应用快速开发构件平台--XFRAME