Kendo UI Grid - 动态构建列

Question

我有一个包含列名列表的数组，需要在网格中显示。因此，在初始化网格时，我需要遍历数据源中的每一列 - 如果该列存在于数组中，那么我需要显示它。

例如，

var ColumnNames = ["col1","col3"];
var dataSource = [ {
                    "col1": "a", 
                    "col2": "1", 
                    "col3": "11",
                    "col4": "1111"
                  }, 
                  {
                   "col1": "b", 
                   "col2": "2", 
                   "col3": "22",
                   "col4": "2222"
                  }, 
                  {
                    "col1": "c", 
                    "col2": "3", 
                    "col3": "33",
                    "col4": "3333"
                  },
                .....]

网格应仅显示数组中的列。在这里，如下所示：

col1    col3
---------------
a        11
b        22
c        33
.......

ColumnNames Array和dataSource实际上来自DB，基于用户选择。所以，我不能硬编码列名。我尝试了各种选项（使用列模板，构建模型的foreach循环等），但面临一个或另一个问题。有人可以帮我解决这个问题吗？

提前致谢！

此致

Neelima

Answer 1

Tri This：

＆＃13;

＆＃13;

var ColumnNames = ["col1","col3"];
var dataSource = [ {
                    "col1": "a", 
                    "col2": "1", 
                    "col3": "11",
                    "col4": "1111"
                  }, 
                  {
                   "col1": "b", 
                   "col2": "2", 
                   "col3": "22",
                   "col4": "2222"
                  }, 
                  {
                    "col1": "c", 
                    "col2": "3", 
                    "col3": "33",
                    "col4": "3333"
                  }]

$(document).ready(function(){
    createGrid();
})
function createGrid(){
  var columns =  generateColumns(dataSource);
  $("#grid").kendoGrid({   
      dataSource : dataSource,
      columns 	:columns
  });
}

function generateColumns(_dataSource){
  if(_dataSource.length > 0) {
  	 return Object.keys(_dataSource[0]);
  } 
}




$("#btnUpdate").click(function(){
	var grid = $("#grid").data("kendoGrid");
	grid.destroy();
	$("#grid").empty();
	dataSource = [ {
                    "col1": "a", 
                    "col2": "1", 
                    "col4": "1111"
                  }, 
                  {
                   "col1": "b", 
                   "col2": "2", 
                   "col4": "2222"
                  }, 
                  {
                    "col1": "c", 
                    "col2": "3", 
                    "col4": "3333"
                  }];
	createGrid();
                  
})

＆＃13;

<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css" rel="stylesheet"/>
<link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

<div id = "grid">
</div>
<button id="btnUpdate">update</button>

＆＃13;

＆＃13;

＆＃13;