论坛首页 Web前端技术论坛

初步搭建yui-ext(Ajax)的开发环境(第一部分:后台->前台数据交换)

浏览 12918 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-01-19  
    如果看过yui-ext的例子,相信大家很想把它用在实际项目中去,我这两个星期都在研究它,国内几乎没有资料,只能从http://www.jackslocum.com的论坛找,我现在简单介绍一下我的实际开发环境:

     我的项目原来的开发环境是Struts+Spring1.2.8+Hibernate3.1.2,现在要把页面的jsp+jstl,和Struts的Action转换成yui-ext的Ajax页面,简单实现数据列表、翻页和添加、修改、删除等功能。

     1. 数据交换,要从Struts环境的Action通过request对象传递数据给jsp页面,如果用Ajax,比较常用的是XML转换和Json转换,我选择了Json,因为用json-lib包可以在java端用很方便的把对象转换成Json格式,在页面可以调用脚本eval()转换成javascript的数组对象。

     1) json-lib转换java对象(下载json-lib:http://json-lib.sourceforge.net)
    Action例子:(example.do)代码中加入:
    response.setContentType("text/xml;charset=utf-8");
    JSONArray jsonArray = JSONArray.fromObject(list);
     response.getWriter().print("{datalist:" + jsonArray + "}");
    return null;
    简单说明:把action的return mapping改成null,因为现在使用response对象进行数据传递,fromObject(list)中的list包括就是页面需要调用显示的数据,可以是其他java对象,String、bean或Map。

    2) JSONDataModel调用Action(example.do)
     yui-ext通过JSONDataModel.js把json格式转换成javascript的数组对象
     js例子:
     var schema = {
    root: 'datalist',
    id: 'nothing',
    fields: ['a','b', 'c', 'd']

     dataModel= new YAHOO.ext.grid.JSONDataModel(schema);
    dataModel.load('http://xxx/example.do');

    说明:schema的root参数要和action传递的json数据头list对应,这里new JSONDataModel后,JSONDataModel会把example.do返回的json数据转换成dataModel的数组,JSONDataModel继承于LoadableDataModel,JSONDataModel只复杂转换json数据,其他由继承的类实现,这是yui-ext的特点,你可以自己写DataModel继承父类,转换自己的数据格式,yui-ext提供了JSONDataModel和XMLDataModel两种数据格式转换。

     3) 使用grid显示dataModel数据
     js例子:
        var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
       grid.render();
    jsp页面例子:
        <div id="example-grid" style="border: 1px solid #cccccc; overflow: hidden; width: 535px; height: 225px;"></div>
    说明:colModel的使用看example,grid绑定dataModel后,在页面的<Div>显示grid。
    
   发表时间:2007-01-31  
为什么不用DWR来处理数据交换呢?
0 请登录后投票
   发表时间:2007-01-31  
看了一下那个LoadableGrid,用dwr的确不方便。如果用dwr需要自己扩展一个model和grid。
0 请登录后投票
   发表时间:2007-02-02  
看了楼主的介绍,确实比较好用先进,不过如果在WEB层使用webwork不知道代码该作那些改动呢?
0 请登录后投票
   发表时间:2007-02-05  
参考学习下
0 请登录后投票
   发表时间:2007-02-05  
freemanxm84 写道
看了楼主的介绍,确实比较好用先进,不过如果在WEB层使用webwork不知道代码该作那些改动呢?

webwork和struts又没有本质区别,用法都是相似的!
0 请登录后投票
   发表时间:2007-02-07  
看了grid几个例子,请问是否支持grid标题多行且存在合并的表格。
0 请登录后投票
   发表时间:2007-02-26  
我运行后没有反应
0 请登录后投票
   发表时间:2007-02-26  
终于成功了!上手还是有一定的难度,真是愚钝!
0 请登录后投票
   发表时间:2007-02-26  
songail 写道
看了grid几个例子,请问是否支持grid标题多行且存在合并的表格。

我知道dhtmlXGrid在这方面支持的很好!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics