jeesite 说明文档-5.硕正WEB组件应用.docxVIP

第5章硕正WEB组件的应用作者：ThinkGem更新日期：2014-01-03简介硕正描述格式采用XML，数据格式采用JSON。原因如下：描述采用XML可表现比较复杂的结构，易于官方文档查找好对应；数据采用JSON格式原因有三点，一是JSON官方有很好的支持；二是JSON格式比较简单并解析速度快，三是JSON相比XML要小，节省流量。后台采用注解方式配置，自动返回描述XML字符串和数据JSON字符串。描述文件XML注解配置请参考本文第2章；数据格式JSON注解配置请参考Jackson注解，官方网站树列表注解实例代码见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调用实例%@includefile=/WEB-INF/views/include/supcan.jsp%scripttype=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为：硕正实例化后的对象。divid=supcanclass=supcanscriptinsertTreeList(AF, border=none;)/script/divTest为，实体类的名称。Ready：硕正加载调用方法。Event：硕正事件调用方法。方法接口/***实例化一个硕正控件*@paramAF硕正对象*@paramurl硕正描述文件URL，如果不是一个URL，则填写实体类名*@paramoptions参数选项*@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