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了~