Question

我是jQuery的新手，所以对任何明显的错误表示道歉。

我有一个.CSV文件，其标题和数据布局如下：

订单号，库存状态，数量，评论，日期 1234567，有库存，15，全红色，15/08/2012 1234568，缺货，203，与邻居，21/08/2012 1234569，订购，20，Chrome完成，2012年7月17日 1234570，其他，140，木制服装，01/09/2012

我有一个带有4个按钮的HTML页面（与库存状态相对应）：

有货，缺货，订购，其他，

我要做的是当我点击上述其中一项时，我的代码消失，搜索与“库存状态”列匹配的所有记录，并返回订单号，数量和注释。

到目前为止

代码：

var allText =[];
var allTextLines = [];
var Lines = [];
var txtFile = new XMLHttpRequest();

txtFile.open("GET", "file://C:/data.txt", true);
txtFile.onreadystatechange = function()
{
 allText = txtFile.responseText;
 allTextLines = allText.split(/\r\n|\n/);
};

// On opening the site, show the loading icon and GIF.
$(document).ready(function () {
$("#Outline").hide();
$("#loadingTable").delay(1000).hide(0);
$.ajax({
    type: "GET",
    url: "data.txt",
    dataType: "text",
    success: function (data) { processData(data); }     
})
alert("0.2")
});

function showSLAMenus() {
$("#Outline").show();
};

$("#OutOfStock").click(function() {
alert("OutOfStock search")
// returns Order Number, Quantity and Comments for items Out of Stock
});

$("#InStock").click(function() {
alert("InStock search")
// returns Order Number, Quantity and Comments for items In Stock
});

$("#Other").click(function () {
alert("Other search")
// returns Order Number, Quantity and Comments for items Other
});

function processData(allText) {
alert("1")
var allTextLines = allText.split(/\r\n|\n/); 
var headers = allTextLines[0].split(','); 
var lines = []; 

for (var i=0; i<allTextLines.length; i++) { 
    var data = allTextLines[i].split(','); 
    if (data.length == headers.length) { 

        var tarr = []; 
        for (var j=0; j<headers.length; j++) { 
            tarr.push(headers[j]+":"+data[j]); 
        } 
        lines.push(tarr); 
    } 
} 
alert(lines); 
}

我的第二次尝试：

// On opening the site, show the loading icon and GIF.
$(document).ready(function () {
$("#Outline").hide();
$("#loadingTable").delay(1000).hide(0);
var data = []; // Empty array in global scope where we will store your data

// Your ajax call to get the data and store it in the var above
$.ajax({
    type: "GET",
    url: "data.txt",
    dataType: "text",
    success: function (data) { processData(data); }
})
});

function showSLAMenus() {
$("#Outline").show();
};

setTimeout(showSLAMenus, 1001);

$("#Other").click(function () {
alert("Other1")
// An example search call
var output = searchData(data, "Other");

alert("Other2")

// Dump out the results of our search
for (var i in output) {
    $("div#output").html(output[i] + "<br>");
}
});

// Main function to process the data into an array
function processData(allText) {
var allTextLines = allText.split(/\r\n|\n/);
var headers = allTextLines[0].split(',');
var lines = [];

for (var i = 0; i < allTextLines.length; i++) {
    var data = allTextLines[i].split(',');
    if (data.length == headers.length) {

        var tarr = [];
        for (var j = 0; j < headers.length; j++) {
            tarr.push(headers[j] + ":" + data[j]);
        }
        lines.push(tarr);
    }
    //alert(lines);
}
return lines; // Returns the data you need, to be stored in our variable 
}

// A search function using the jQuery inArray method
// - matches the data position in the array and returns a new array of matched data
function searchData(data, search) {
alert("searchData Called")
// Create a temp array to store the found data
var tempArray = [];

// Loop through the data to see if each array has the search term we need
for (i = 0; i < data.length; i++) {
    var pos = $.inArray(search, data[i]);

    // Add found data to the array
    if (pos !== -1) {
        tempArray.push(data[i]);
    }
}

// Return the array of matched data
return tempArray;
}

嗨，谢谢。您在jsFiddle中的代码似乎正在运行。但是，查看我的代码时，单击其他按钮

alert("Other1")
// An example search call
var output = searchData(data, "Other");
alert("Other2")

显示警报其他1，但我认为它无法调用searchData。

我还需要

吗？

txtFile.open("GET", "file://C:/data.txt", true);
txtFile.onreadystatechange = function()
{
   allText = txtFile.responseText;
   allTextLines = allText.split(/\r\n|\n/);
};

在我的代码中???

感谢。

Answer 1

你快到了。最好的办法是使用jQuery $.inArray方法将数组中的行与您追踪的数据进行匹配。您只需要一个搜索功能，它将您之后的数据作为新数组返回。这是一个例子 - 编辑：http://jsfiddle.net/gNTWk/1/

这对您的代码有何影响？添加如下：

$(document).ready(function () {

    var data = []; // Empty array in global scope where we will store your data

    // Your ajax call to get the data and store it in the var above
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data){
            data = processData(data);
        }     
    });

    // Your main function to process the data into an array
    function processData(allText) {
        alert("1")
        var allTextLines = allText.split(/\r\n|\n/); 
        var headers = allTextLines[0].split(','); 
        var lines = []; 

        for (var i=0; i<allTextLines.length; i++) { 
            var data = allTextLines[i].split(','); 
            if (data.length == headers.length) { 

                var tarr = []; 
                for (var j=0; j<headers.length; j++) { 
                    tarr.push(headers[j]+":"+data[j]); 
                } 
                lines.push(tarr); 
            } 
        } 
        return lines; // Returns the data you need, to be stored in our variable 
    }


    // A search function using the jQuery inArray method
    // - matches the data position in the array and returns a new array of matched data
    function searchData(data, search){
        // Create a temp array to store the found data
        var tempArray = [];

        // Loop through the data to see if each array has the search term we need
        for(i=0; i<data.length; i++){
            var pos = $.inArray(search, data[i]);

            // Add found data to the array
            if(pos !== -1){
                tempArray.push(data[i]);
            }
        }

        // Return the array of matched data
        return tempArray;
    }


    // An example search call
    var output = searchData(data, "Other");

    // EDITED OUTPUT LOOP    
    for(i=0; i<output.length; i++){
        $("div#output").append(output[i] + "<br>");
    }

 });

修改道歉，searchData功能很好。只是输出循环是错误的。上面的代码应该可以正常工作。编辑过jsfiddle：http://jsfiddle.net/gNTWk/1/

使用jQuery搜索.CSV文件

1 个答案: