JavaScript — создание сетки пользовательского интерфейса кендо с использованием данных xml

Я использую XSLT для отображения моей xml-страницы. Я использую следующее, чтобы получить данные из файла xml:

‹ xsl:value-of select="ClinicalDocument/component/structuredBody/component[3]/section/text/table/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
  });

Это может быть окольный метод, но я все еще новичок в этом методе кодирования. В настоящее время все данные представлены в одном столбце с последним значением в моем временном массиве в качестве заголовка столбца.

Все работает, пока я не пытаюсь установить DataSource для Kendo Grid. При работе со свойством столбцов в сетке я сделал следующее изменение:

title:gridArray[0].head

Когда это будет сделано, заголовок изменится на первое значение в массиве.

Что я хочу знать, так это то, как я могу создавать столбцы в сетке кендо в соответствии с заголовком? Есть ли способ перебрать все значения и создать оттуда объекты, видя, что дата, отправляемая в сетку, является объектами в массиве?

В основном я хочу, чтобы это работало без повторения:

var myGrid = $("#grid").kendoGrid( { столбцы: [ { title: временный массив [0],
поле: finalArray [0]. значения }, { title: временный массив [1],
поле : finalArray[1].values ​​}, {название: временныймассив[2],
поле: finalArray[2].values ​​}, {название: временныймассив[3],
поле: finalArray[3].values ​​} , { название: временный массив [4],
поле: окончательный массив [4]. значения } ] )};

Любая помощь приветствуется, спасибо!


javascript xml kendo-grid xslt
person Phillip-juan    schedule 02.04.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Эта проблема была устранена с помощью следующей кодировки:

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.

person Phillip-juan    schedule 03.04.2013