1

我下载了一个网格：ParamQuery 网格，我需要向其中添加项目，我对 javascript 很陌生，但正如我所见，它使用了一个变量数据，它将其记录保存在数组数组中，如下所示：

var data = [['hello','byebye']]

我需要从 ini 文件中添加这些记录，所以现在我有这样的代码：

$(function () {

var allText =[];
var allTextLines = [];
var Lines = [];
var txtFile = new XMLHttpRequest();
var linenumber = 0; 
var data = new Array();

txtFile.open("GET", "automaticlang_EN.ini", true);
allText = txtFile.responseText;
txtFile.onreadystatechange = function()
{
    if (txtFile.readyState == 4)
    {

              // Makes sure it's found the file.
                allText = txtFile.responseText;
                allTextLines = allText.split(/\r\n|\n/);
                var data = new Array([allTextLines]);

                console.log(data[0]);
            } else { 
            }

    }
txtFile.send(null)
//console.log(data);


//var data = [['hello','byebye']] //this works


    var obj = { width: 700, height: 700, title: "Translation  Grid",resizable:true,draggable:true };
    obj.colModel = [{ title: "ID", width: 100, dataType: "string" },
    { title: "Translation", width: 200, dataType: "string" }];
    obj.dataModel = { data: data };
    $("#grid_array").pqGrid(obj);

});

我没有给我结果我做错了什么？

4

2 回答 2

1

我认为你很接近。JavaScript 的 XMLHttpRequest open()方法的第三个参数是数据是否被异步请求。 true意味着下载将开始，然后在下载结束时调用 onreadystatechange 回调完成。

你有几个选择。您可以传入false而不是 true 并在send()调用之后保留您的数据处理代码，因为这将导致下载在send()返回之前完成。这通常是不受欢迎的，因为它会导致浏览器停止执行任何处理，直到下载完成。

您的另一个选择是保持下载异步并将数据处理代码移动到 onreadystatechange 回调中。这将允许浏览器在文件下载时继续处理其他事件。

我看到的另一个问题是您var data在外部函数和 onreadystatechange 函数中说变量。这将导致data内部函数中的变量与外部变量不同。所以当你设置 inner 时data，它的值会在函数返回时丢失。要解决此问题，请删除var内部函数之前的 from，data以便内部函数使用data外部函数定义的。

最后，看起来您将数据包装在太多数组中。在数据周围放一个[]就足够了。

回顾一下，这里有两个选项。使用同步下载并修复data范围：

$(function () {
  var txtFile = new XMLHttpRequest();
  var data;

  txtFile.open("GET", "automaticlang_EN.ini", /* async = */ false);

  txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4) {   
      // Makes sure it's found the file.
      var allText = txtFile.responseText;
      var allTextLines = allText.split(/\r\n|\n/);
      data = [allTextLines];
    }
  };

  txtFile.send();

  var obj = { width: 700, height: 700, title: "Translation Grid",resizable:true,draggable:true };
  obj.colModel = [{ title: "ID", width: 100, dataType: "string" },
                  { title: "Translation", width: 200, dataType: "string" }];
  obj.dataModel = { data: data };
  $("#grid_array").pqGrid(obj);  
});

使用异步并将处理移至 onreadystatechange：

$(function () {
  var txtFile = new XMLHttpRequest();

  txtFile.open("GET", "automaticlang_EN.ini", /* async = */ true);

  txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4) {   
      // Makes sure it's found the file.
      var allText = txtFile.responseText;
      var allTextLines = allText.split(/\r\n|\n/);
      var data = [allTextLines];

      var obj = { width: 700, height: 700, title: "Translation Grid",resizable:true,draggable:true };
      obj.colModel = [{ title: "ID", width: 100, dataType: "string" },
                      { title: "Translation", width: 200, dataType: "string" }];
      obj.dataModel = { data: data };
      $("#grid_array").pqGrid(obj);  
    }
  };

  txtFile.send();
});
于 2013-10-08T07:43:30.497 回答
1

您的代码不起作用的原因是您试图在回调data之外使用您的变量。XMLHttpRequest您尝试使用的代码在data您发出请求后立即运行GET，而不是在服务器返回值后运行。

因此，您需要解决的主要问题是在回调中进行pqGrid()设置。XMLHttpRequest

只是为了好玩，我为你调整了一些其他的东西：

  • 由于您使用的是 jQuery，因此您可以使用$.ajax()繁琐的XMLHttpRequest.
  • 添加了$.trim(allText)删除任何前导或尾随空格的调用。特别是，这将删除任何尾随换行符，因此如果最后一行末尾有换行符，则数组中不会有额外的空字符串。
  • 对 .使用稍微简单的正则表达式.split()。
  • 仅使用数组文字而不是new Array. 正如 nkron 指出的那样，同时拥有 thenew Array 和数组文字会给您提供比您想要的多一级的嵌套数组。并且数组文字几乎总是比new Array.
  • 重新排列pqGrid设置对象的设置。你这样做的方式没有任何问题（除了很长的行），只是在这里展示了另一种设置方式。
  • 清理了压痕和长线。
$(function() {
    $.ajax({
        url: "automaticlang_EN.ini",
        dataType: "text"
    }).done( function( allText ) {
        var allTextLines = $.trim(allText).split(/\r?\n/);
        var data = [ allTextLines ];

        $("#grid_array").pqGrid({
            width: 700,
            height: 700,
            title: "Translation  Grid",
            resizable: true,
            draggable: true,
            colModel: [
                {
                    title: "ID",
                    width: 100,
                    dataType: "string"
                }, {
                    title: "Translation",
                    width: 200,
                    dataType: "string"
                }
            ],
            dataModel: {
                data: data
            }
        });
    });
});
于 2013-10-08T07:43:39.483 回答