jeesite简介文档-5.硕正WEB组件应用.docxVIP

第5章 硕正WEB组件的应用 作者：ThinkGem 更新日期：2014-01-03 简介 硕正描述格式采用XML，数据格式采用JSON。原因如下：描述采用XML可表现比较复杂的结构，易于官方文档查找好对应；数据采用JSON格式原因有三点，一是JSON官方有很好的支持；二是JSON格式比较简单并解析速度快，三是JSON相比XML要小，节省流量。 后台采用注解方式配置，自动返回描述XML字符串和数据JSON字符串。 描述文件XML注解配置请参考本文第2章； 数据格式JSON注解配置请参考Jackson注解， HYPERLINK / 官方网站 树列表注解 实例代码见TestController.java，testList.jsp文件，演示页面如下： 调用实例 @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 @SupTreeList 硕正总体注解 硕正主要注解，只可以定义到类之上。 @ SupProperties 硕正属性设置注解。 @ SupFont 硕正字体设置注解。 @SupCol、@SupGroup 硕正表头列及列表头组设置注解。 JS封装库 supcan.js 调用实例 %@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 scriptinsertTreeList(AF, border=none;)/script /div Test为，实体类的名称。 Ready：硕正加载调用方法。 Event：硕正事件调用方法。 方法接口 /** * 实例化一个硕正控件 * @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