jQuery与原型冲突 [英] Jquery conflict with Prototype
问题描述
我在原型中使用了灯箱"，在Jquery中使用了导出为CSV".当前，原型与Jquery库冲突.下面是导出功能的代码，第一个脚本是Jquery导出库，第二个脚本是Javascript .
I used 'lightbox' in Prototype and 'Export to CSV' in Jquery. Currently, Prototype is conflict with Jquery library. Below is the code for export function, the 1st script is Jquery export library and 2nd script is Javascript.
在导出库的第一行中添加'jQuery.noConflict();'后，导出功能将不起作用.所以我的问题是如何使它们都在同一页面上工作.
Once adding 'jQuery.noConflict();' in the 1st line of the export library, the export function doesn't work. So my question is how to make both of them work in the same page.
<script type="text/javascript">
jQuery.fn.table2CSV = function(options) {
var options = jQuery.extend({
separator: ',',
header: [],
delivery: 'popup' // popup, value
},
options);
var csvData = [];
var headerArr = [];
var el = this;
//header
var numCols = options.header.length;
var tmpRow = []; // construct header avalible array
if (numCols > 0) {
for (var i = 0; i < numCols; i++) {
tmpRow[tmpRow.length] = formatData(options.header[i]);
}
} else {
$(el).filter(':visible').find('th').each(function() {
if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
});
}
row2CSV(tmpRow);
// actual data
$(el).find('tr').each(function() {
var tmpRow = [];
$(this).filter(':visible').find('td').each(function() {
if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
});
row2CSV(tmpRow);
});
if (options.delivery == 'popup') {
var mydata = csvData.join('\n');
return popup(mydata);
} else {
var mydata = csvData.join('\n');
return mydata;
}
function row2CSV(tmpRow) {
var tmp = tmpRow.join('') // to remove any blank rows
// alert(tmp);
if (tmpRow.length > 0 && tmp != '') {
var mystr = tmpRow.join(options.separator);
csvData[csvData.length] = mystr;
}
}
function formatData(input) {
// replace " with "
var regexp = new RegExp(/["]/g);
var output = input.replace(regexp, """);
//HTML
var regexp = new RegExp(/\<[^\<]+\>/g);
var output = output.replace(regexp, "");
if (output == "") return '';
return '"' + output + '"';
}
function popup(data) {
var generator = window.open('', 'csv', 'height=400,width=600');
generator.document.write('<html><head><title>CSV</title>');
generator.document.write('</head><body >');
generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
generator.document.write(data);
generator.document.write('</textArea>');
generator.document.write('</body></html>');
generator.document.close();
return true;
}
};
</script>
<script type="text/javascript">
function getCSVData(){
var csv_value=$('#insideTable5').table2CSV({delivery:'value'});
$("#csv_text").val(csv_value);
}
</script>
<input type="image" src="images/Excel.jpg" value="Get CSV File" onclick="getCSVData()"/>
<table id='insideTable5' border='1'>
.
.
.
</table>
推荐答案
如果像这样包装代码:
(function( $ ){
// CODE HERE
})( jQuery );
然后，它在不发生冲突后仍然可以正常工作.这样一来，$仍是该代码中的jquery，但不在其外部.
Then it will still work after no-conflict. This will make it so that $ is still jquery within this code but not outside of it.
然后在您自己的函数中，或者使用jQuery代替$，或者使用noConflict将其分配给其他变量名称.
Then in your own function, either use jQuery in place of $, or use noConflict to assign it to a different variable name.
function getCSVData(){
var csv_value=jQuery('#insideTable5').table2CSV({delivery:'value'});
jQuery("#csv_text").val(csv_value);
}
这篇关于jQuery与原型冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
