JSON

第5章 硕正WEB组件的应用

字号+ 作者:H5之家 来源:H5之家 2017-04-30 14:03 我要评论( )

第5章 硕正WEB组件的应用 作者:ThinkGem 更新日期:2014-01-03 1.简介 硕正描述格式采用XML,数据格式采用JSON。原因如下:描述采用XML可表现比较复杂的结构,

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(

    [email protected](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

    [email protected]

    硕正总体注解

    硕正主要注解,只可以定义到类之上。

    [email protected]

    硕正属性设置注解。

    [email protected]

    硕正字体设置注解。

    [email protected]、@SupGroup

    硕正表头列及列表头组设置注解。

    2.JS封装库 supcan.js 2.1.调用实例

    <%@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=“supcan”class=“supcan”>

    <script>insertTreeList(‘AF’, ‘border=none;’)</script>

    </div>

    Test为,实体类的名称。

    Ready:硕正加载调用方法。

    Event:硕正事件调用方法。

    2.2.方法接口

    /**

    *实例化一个硕正控件

    *@paramAF硕正对象

    *@paramurl硕正描述文件URL,如果不是一个URL,则填写实体类名

    *@paramoptions参数选项

    *@returns{Supcan}硕正封装对象实例

    */

    functionsupcan(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()

    /**

    *初始化方法

    *@paramurl描述文件URL

    */

    $this.init = function(url)

    /**

    *加载数据

    *@paramdataUrl数据调用URL

    *@paramparamString参数字符串

    *@parampareDiv分页DIV的ID,如果数据格式为JSON,则自动设置分页器代码。

    */

    $this.load = function(dataUrl, paramString, callback)

    /**

    *加载数据

    *@paramform参数表单,自动序列化表单字段,加入数据URL中

    *@parampage分页DIV,如果数据格式为JSON,则自动设置分页器代码。

    */

    $this.loadByForm = function(form, page)

     

    /**

    *获取单元格数据

    *@paramcolumnName列表列名

    *@paramisMany是否支持多选,获取多个值

    */

    $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

     

    AD:【java书籍推荐】适合初级,中级,高级

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

    标签:jeesite

    相关推荐

    评论 抢沙发

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • JSON.parse() 与 eval()区别

      JSON.parse() 与 eval()区别

      2015-11-17 18:49

    网友点评
    h