╰☆把酒言欢
                               聪明出于勤奋,天才在于积累.

本文系原创,如需转载,请注明出处:http://www.cnblogs.com/Ivan-j2ee/archive/2012/09/28/2707099.html

 

今天项目里需要实现 dataTables 的列表数据显示功能,而这个 dataTables 是jQuery的扩展插件,当然也用到了jQuery.js,现在要使用这个 dataTables,主要的问题就是 如何实现在 ofbiz 中 让 prototype、jQuery 这两个库共存?

之前做前端开发的时候,遇到过类似的问题,当然,那不是在ofbiz这样的框架下,使用 jQuery 库自带的 jQuery.noConflict(); 即可;

jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

现在我们的后台框架不是 SSH,而是ofbiz架构,它本身就已经包含了 prototype.js 库,那我们该如何让已有的 prototype.js 库 和 新加的 jquery.js 完美兼容呢?

不废话了,直接看实现!其实质还是用的 jQuery.noConflict(); 这样一个方法!

我们知道 :ofbiz 的 ofbiz/framework/common/widget/CommonScreen.xml 文件里导入了 ofbiz 需要用到的所有外部文件,找到下图中方框里的代码片段,我们可以看到ofbiz引入的 prototype.js 库中的三个文件,好的,我们现在这三个文件上面 再引入 jquery.js ,如下图示:

 

但是要注意的是:jquery.js 文件的最后 需要加一句:

$.noConflict();   

( 或者  jQuery.noConflict();  )

 

这一句的官方解释:

官方给的方法如下:
jQuery.noConflict(),调用这个方法,会返回一个值,返回值可以理解为,为jQuery的$函数在取一个别名吧。
这个方法的解释如下:
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。 

 

代码截图是这样的:

好了,大功告成!

页面可以完美兼容 prototype.js 和 jquery.js 的功能模块:

当然,在页面中,如果使用 jquery 的方法时,你应该这样定义:jQuery('#xxx').html();   而 不可以 这样:  $('#xxx').html();

因为上面的修改 : $.noConflict();    已经把 "$" 符 让渡给了 prototype 库了!

怎么样,效果还不错吧!上面的 “查找” 功能可是用了ofbiz中没有实现的无刷新技术哦~ 呵呵 (这是dataTables自带的无刷新啦~)

 

追加:有时候你的ftl页面可能是通过 redirect 过来的,页面中并不是通过 screen 引入的,所以也就不可能获得 CommonScreen.xml 文件中jquery的引入,你可以通过在页面右击 “查看源文件” 的命令,然后搜索 “jquery.js” 看有没有引入,如果没有引入的话 ,就在ftl 页面的头部 加上一句:

<script src="http://images.cnblogs.com/dataTables/js/jquery.js" type="text/javascript"></script>

就OK了~

 

 

 

posted on 2012-09-28 14:07  把酒言欢  阅读(1675)  评论(0编辑  收藏  举报