1、第 5 章 硕正 WEB 组件的应用作者：ThinkGem更新日期：2014-01-031. 简介硕正描述格式采用 XML，数据格式采用 JSON。原因如下：描述采用 XML可表现比较复杂的结构，易于官方文档查找好对应；数据采用 JSON 格式原因有三点，一是 JSON 官方有很好的支持；二是 JSON 格式比较简单并解析速度快，三是 JSON 相比 XML 要小，节省流量。后台采用注解方式配置，自动返回描述 XML 字符串和数据 JSON 字符串。 描述文件 XML 注解配置请参考本文第 2 章； 数据格式 JSON 注解配置请参考 Jackson 注解，官方网站2. 树列表注解实例代码见
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=Su
3、pFont(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=“
4、date3“, name=“日期3“ , headerFontIndex=“2“, sort=70, parentId=“date“)实体配置，参考类： Test.java2.2. SupTreeList硕正总体注解硕正主要注解，只可以定义到类之上。2.3. SupProperties硕正属性设置注解。2.4. SupFont硕正字体设置注解。2.5. SupCol、SupGroup硕正表头列及列表头组设置注解。3. JS 封装库 supcan.js3.1.调用实例$(document).ready(function() su = supcan(AF, “Test“, ready: funct
5、ion()/ 加载数据page();,event: function(Event, p1, p2, p3, p4)if(Event = DblClicked)edit(););); 解释：AF为：硕正实例化后的对象。insertTreeList(AF, border=none;)Test 为，实体类的名称。Ready：硕正加载调用方法。Event：硕正事件调用方法。3.2.方法接口/* 实例化一个硕正控件* param AF 硕正对象* param url 硕正描述文件URL，如果不是一个URL，则填写实体类名* param options 参数选项* returns Supcan 硕正封装对
6、象实例*/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,/
7、控件高度自适应，相关对象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为jso
8、n ，则为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 = f
9、unction(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.setGrayWindow4. 应用实例展示页面：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
