首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

【Operamasks-UI】omGrid直接设立json数据给dataSource

2013-07-01 
【Operamasks-UI】omGrid直接设置json数据给dataSource? ? ?在operamasks-ui中,omGrid的dataSource属性可以

【Operamasks-UI】omGrid直接设置json数据给dataSource

? ? ?在operamasks-ui中,omGrid的dataSource属性可以接收的值为一个url地址串,而不能直接把一个json对象传递给grid,这对于想直接在前台封装JSON对象,并在omGrid上面展示就没办法实现了。

? ?为了解决该问题,可以通过自行扩展新函数(解决方案一),或者改造原来的数据加载程序(解决方案二);不管采用什么样的解决方案,基于operamasks-ui良好的扩展机制和监听机制,都是很容易实现的。

?

? ?解决方案一:为omGrid新增函数setSimpleData(data),实现直接加载json数据的功能.

?

/* * Depends: *  om-grid.js */(function($) {/** * 直接加载json格式的数据 */    $.omWidget.addInitListener('om.omGrid',function(){        var self = this,            el = this.element,op = this.options;if (this.loading) {                return true;        }        var grid = el.closest('.om-grid'),loadMask = $('.gBlock',grid);        self.setSimpleData=function(data){var pageData = this.pageData;var nowPage = pageData.nowPage || 1,data=data || {"rows":[],"total":0};this.loading = true;loadMask.show();try {self._addData(data);for(var i=0 , len=op._onRefreshCallbacks.length; i<len; i++){                    op._onRefreshCallbacks[i].call(self);                }self._trigger("onRefresh",null,nowPage,data.rows||[]);}finally{   loadMask.hide();   this.loading = false;}}    });})(jQuery);

?

?

? ? 解决方案二:改造原有的加载数据函数,使得omGrid的dataSource对象可以是一个json对象,也可以是一个url.

? ??参考链接:http://www.operamasks.org/forum/thread-8912-1-9.html

(该参考链接里的解决方案是直接修改源代码的方式来实现的,其实可以使用扩展机制来实现)

? ? 通过插件扩展来实现该功能的代码如下:

$.omWidget.addBeforeInitListener('om.omGrid',function(){        this._base_populate=this._populate;this._populate=function(){    var self=this,op = this.options,el=this.element; if(op.dataSource && typeof op.dataSource == 'object'){ var data = op.dataSource; var grid = el.closest('.om-grid'),loadMask = $('.gBlock',grid);var pageData = this.pageData;var nowPage = pageData.nowPage || 1,data=data || {"rows":[],"total":0};this.loading = true;loadMask.show();try {self._addData(data);for(var i=0 , len=op._onRefreshCallbacks.length; i<len; i++){                    op._onRefreshCallbacks[i].call(self);                }self._trigger("onRefresh",null,nowPage,data.rows||[]);}finally{   loadMask.hide();   this.loading = false;}             return true;         } else {    this._base_populate(); }   }    });

?(该解决方案在对可编辑表格执行数据删除时,遇到js报错,原因及处理办法见)

?

更多内容请进群:312531189

热点排行