JavaScript - xml 데이터를 사용하여 Kendo Ui Grid 생성

Question

xml 페이지를 표시하는 데 XSLT를 사용하고 있습니다. 가치의 선택 = "ClinicalDocument/컴포넌트/형 구조체/구성 요소 [3]/섹션/텍스트/테이블/TBODY"

< XSL : 나는 XML 파일의 데이터를 얻기 위해 다음의 활용 이 후>

/ , I는 변환 데이터를 정리하고 할 수있는 다음과 같은 자바 스크립트가 :

-----------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에 열의 제목으로 표시됩니다.

검도 그리드 용 데이터 소스를 설정하기 전까지는 모두 작동합니다.

제목 : 그리드의 열 특성에서 작업 할 때, I는 다음과 같이 변경했다 gridArray이 완료되면

를 .head [0], 표제 첫로 변경 배열의 값.

검도 그리드에서 열을 생성하는 방법은 무엇입니까? 모든 값을 반복하고 그리드로 전송되는 날짜가 배열의 객체라는 것을 확인하면서 거기에서 객체를 만드는 방법이 있습니까? .

var에에는 myGrid = $ ("# 그리드") kendoGrid ({열 : [{ 제목 : temporaryArray [0

은 내가 기본적으로 원하는 것은 repitition없이이 일을 할 무언가이다 ]
분야 : finalArray [0] .values}, { 제목 : temporaryArray [1]
분야 : finalArray [1] .values}, { 제목 : temporaryArray [2]
분야 : finalArray [ 2]. 값}, { 제목 : 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"); 

, 데이터는 데이터 그리드에 표시된다.