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

Posted 2023-05-07

【中文标题】JavaScript - 使用 xml 数据生成 Kendo Ui 网格

【英文标题】：JavaScript - Generate Kendo Ui Grid using xml Data

【发布时间】：2013-03-23 18:30:39

【问题描述】：

我一直在使用 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
  );

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

在我尝试为 Kendo Grid 设置 DataSource 之前，一切正常。在网格中的 columns 属性中工作时，我进行了以下更改：

title:gridArray[0].head

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

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

我基本上想要的是完成这项工作，而无需重复：

var myGrid = $("#grid").kendoGrid( columns: [ 标题：临时数组[0]， 字段：finalArray[0].values ， 标题：临时数组[1]， 字段：finalArray[1].values ， 标题：临时数组[2]， 字段：finalArray[2].values ， 标题：临时数组[3]， 字段：finalArray[3].values ， 标题：临时数组[4]， 字段：finalArray[4].values ] );

任何帮助表示赞赏，谢谢！

【参考方案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 中。