JavaScript-使用xml数据生成Kendo Ui网格

Question

我一直在使用XSLT来显示我的xml页面。我利用以下方法从xml文件中获取数据：

在此之后，我有以下javascript来清理数据并进行转换：

-----------Get Content for Grids----------

  //Split Content into array
  var purposeArray = document.getElementById('purposeOfVisit').innerHTML.split("\n");
  var activeProblemArray = document.getElementById('activeProblems').innerHTML.split("\n");


  //------------  Remove All Unwanted Values-----------\\*/
  var newDataString ="";
  for( var k = 0; k < purposeArray.length; k++ )
  {
      newDataString += purposeArray[k] + "__";
  }
  newDataString = newDataString.replace(/  /g,"");
  newDataString = newDataString.replace(/__________/g,"__-__");
  var newDataArray = newDataString.split("__");

  //------------- Save Values in final Array -------------\\*/
  var semiFinalArray = new Array();
  for( var x=0; x < newDataArray.length; x++)
  {
      if(newDataArray[x].length != 0)
      {
          semiFinalArray.push(newDataArray[x]);
      }
  }
  var finalArray = new Array();
  var counter = 0;
  //------------  Find Number of Columns in row   ------------\\*/
  var numberOfRows = document.getElementById('numberOfRows').innerHTML;
  var numberOfColumns = document.getElementById('numberOfColumns').innerHTML;
  var columnsPerRow = parseInt(numberOfColumns) / parseInt(numberOfRows);

  //------------------------------Testing ------------------------------//
  var dataNamePre = "dataValue";

  var temporaryArray = new Array();
  var dataName;

      //-----------   Generate Grid Values    -----------//
  for( var b=0 ; b < semiFinalArray.length ; b = b + columnsPerRow)
  {
      var problemComment = "";
      counter = 0;
      var obj;

      for( var a=0 ; a < columnsPerRow ; a++)
      {
          dataName = dataNamePre + counter.toString() + "";
  //-------Generate Grid Titles------//
          temporaryArray.push("Title " + (counter+1));

          var key = "key"+a;

          obj = { values : semiFinalArray[b+a] };

          var problemComment = "";
          finalArray.push(obj); 

          counter++;
      }
  }
  //---------------------Generate GridArray---------------------------//

  var gridArray = [];
  var gridArrayHead = new Array();
  counter = 0;
  var objectValue = new Array();

  for( var x = 0; x < finalArray.length; x++ )
  {
      objectValue = { head:temporaryArray[x], values: finalArray[x].values }
      gridArray.push(objectValue);
  }

  var provFacilities = [];

  for( var x = 0; x < finalArray.length; x++ )
  {
      provFacilities[x] = 
      {
          head:temporaryArray[x], values: finalArray[x].values
      }
  }

  //alert(gridArray);
  $("#grid").kendoGrid(
  {
      columns: 
      [{
          title:gridArray.head,  
          template:'#= values #'
      }],
      dataSource: {
          data:finalArray,
          pageSize:10
      },
      scrollable:false,
      pageable:true
  });

这可能是一种迂回的方法，但我对这种编码方法还是比较陌生的。目前，所有数据都显示在一列中，临时数组中的最后一个值作为该列的标题。

在我尝试为剑道网格设置数据源之前，一切都正常。在网格中使用columns属性时，我做了以下更改：

标题：gridArray[0]。头

完成此操作后，标题将更改为数组中的第一个值。

我想知道的是如何根据标题在剑道网格中生成列？有没有办法循环所有的值并从那里创建对象，看到发送到网格的日期是数组中的对象？

我基本上想要的是让它工作起来，而不需要重复：

var myGrid = $("#rid"）. kendGrid（{列：[{title：暂时数组[0]，
字段： finalArray[0].值}，{title：暂时数组[1]，
字段： finalArray[1].值}，{title：暂时数组[2]，
字段： finalArray[2].值}，{title： timearyArray[3]，
字段： finalArray[3].值}，{title： timearyArray[4]，
字段： finalArray[4].值 } ] )};

任何帮助赞赏，谢谢！

Answer 1

已使用以下编码修复此问题：

var arrayData = [];

for( var x = 0; x < semiFinalArray.length; x=x+5 )
{
    var tempArr = new Array();

    for( var y = 0; y < 5; y++ )
    {
        var num = x + y;
        tempArr.push(semiFinalArray[num]);
    }
    arrayData.push(tempArr);
}

var dataTitles = [];
for( var x = 0; x < titleArray.length; x++ )
{
    var head = "";
    head = titleArray[x];
    head = head.replace(/ /g,"");
    dataTitles.push(head);
}


var counter = 0;
var columnDefs = [];
for (var i = 0; i < columnsPerRow.length; i++) 
{
    if (counter == (columnsPerRow - 1)) 
    {
        counter = 0;
    }
    columnDefs.push({ field: dataTitles[counter], template: arrayData[i].values });
    counter++;
}
// Create final version of grid array
var gridArray = [];
for (var i = 0; i < arrayData.length; i++) 
{
    var data = {};
    for (var j = 0; j < dataTitles.length; j++) 
    {
        data[dataTitles[j]] = arrayData[i][j];
    }
    gridArray.push(data);
}
// Now, create the grid using columnDefs as argument
$("#grid").kendoGrid(
{
    dataSource: 
    {
        data: gridArray,
        pageSize: 10
    },
    columns: columnDefs,
    scrollable: false,
    pageable: true
}).data("kendoGrid");

这样，数据就会显示在DataGrid中。