jeesite快速开发平台(七)---硕正WEB组件的应用
来源:互联网 发布:库里生涯场均数据 编辑:程序博客网 时间:2024/04/29 02:04
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快速开发平台(七)---硕正WEB组件的应用
- jeesite快速开发平台(五)---内置组件的应用
- jeesite快速开发平台(六)---代码生成器的应用
- jeesite快速开发平台(八)---工作流的应用实例
- Jeesite信息化快速开发平台
- 第5章 硕正WEB组件的应用
- 企业信息化快速开发平台 JeeSite
- 企业信息化快速开发平台 JeeSite
- JeeSite 企业信息化快速开发平台
- JeeSite 企业信息化快速开发平台
- jeesite快速开发平台(一)----简介
- jeesite快速开发平台(二)----环境搭建
- jeesite快速开发平台(一)---简介
- jeesite快速开发平台(二)---环境搭建
- 移动应用快速开发平台(七)
- 基于J2EE的WEB应用快速开发构件平台--XFRAME
- 新一代的Web应用快速开发平台--OpenJWeb
- 快速开发平台——web应用的整体安全
- [编程题] 数列还原
- Eclipse 和 IDEA快捷键对比大全
- Filesystom函数——fread和fwrite详细整理
- PHP算法之排序算法
- dfs,,类似树的想法
- jeesite快速开发平台(七)---硕正WEB组件的应用
- Java线程中yield与join方法的区别
- Sum of Left Leaves
- 谈谈MVC模式
- 颜色校准总结
- Vue学习之路---No.3(分享心得,欢迎批评指正)
- git 在github上托管代码
- mmb小结
- pta--5-4 逢7击掌 (15分)