JavaScript - 使用xml生成Kendo Ui Grid數據

Question

我一直在使用XSLT來顯示我的xml頁面。我利用下列以獲得從XML文件中的數據的：

<的xsl：值的- 選擇= 「ClinicalDocument /組件/ structuredBody /成分[3] /部分/文本/表/ TBODY」/ >

在此之後，我有以下的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 
    }); 

這可能是一個迂迴的方法，但我仍然對這種編碼方法不熟悉。 當前，所有數據都在一列中顯示，其中最後一個值在我的temporaryArray中作爲列的標題。

一切工作，直到我嘗試設置Kendo網格的數據源。在格列屬性工作時，我提出了以下變化：

標題：gridArray [0]。頭

這樣做時，將標題改爲第一數組中的值。

我想知道的是如何在Kendo網格中生成列根據標題？有沒有辦法循環所有的值，並從那裏創建對象，看到發送到網格的日期是數組中的對象？

我基本上想要的東西，使這項工作，沒有repitition：

VAR myGrid = $（ 「＃電網」）kendoGrid（{列：[{ 標題：temporaryArray [0 ]，
字段：finalArray [0] .values}，{ 標題：temporaryArray [1]，
字段：finalArray [1] .values}，{ 標題：temporaryArray [2]，
字段：finalArray [ 2] .values}，{ title：te mporaryArray [3]，
字段：finalArray [3] .values}，{ 標題：temporaryArray [4]，
字段：finalArray [4] .values}] ）};

任何幫助表示感謝，謝謝！

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