Question

我在Prototype中使用了'lightbox'，在Jquery中使用了'Export to CSV'。目前，Prototype与Jquery库发生冲突。下面是导出功能的代码，第一个脚本是Jquery导出库，第二个脚本是Javascript 。

在导出库的第一行添加'jQuery.noConflict（）;'后，导出功能不起作用。所以我的问题是如何使它们在同一页面上工作。

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

Answer 1

如果你像这样包装代码：

(function( $ ){

    // CODE HERE

})( jQuery );

然后在没有冲突之后它仍然可以工作。这将使$在此代码中仍然是jquery但不在它之外。

然后在您自己的函数中，使用jQuery代替$，或使用noConflict将其分配给不同的变量名。

function getCSVData(){
    var csv_value=jQuery('#insideTable5').table2CSV({delivery:'value'});
    jQuery("#csv_text").val(csv_value);
}

Answer 2

不是仅为两个功能加载两个框架而是担心冲突，而是加载一个并使用它。您的用户下载的代码将更少，您的JavaScript代码库将更容易扩展，更新将更容易等。

JQuery有很多灯箱插件。我最喜欢的一个是http://colorpowered.com/colorbox/

Jquery与Prototype发生冲突

2 个答案: