This is my Blog!!Welcome to you!!
【分享个人java学习心得和技术问题汇总】

jeesite学习文档API-第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文件,演示页面如下:

1

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

 

未经允许不得转载:Java学习 » jeesite学习文档API-第5章 硕正WEB组件的应用

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址