ofbiz下如何实现 prototype、jQuery多库共存

本文转自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了~