本文系原创,如需转载,请注明出处: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了~