검도 UI 그리드 - 동적으로 열 만들기

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 어레이 및 데이터 소스는 실제로 사용자의 선택에 따라, DB에서 온다. 따라서 열 이름을 하드 코딩 할 수 없습니다. 다양한 옵션 (열 템플릿, foreach 루프를 사용하여 모델을 구축하는 등)을 시도했지만 하나 또는 다른 문제에 직면했습니다. 누군가 제발 나를 도와 줄 수 있습니까?

미리 감사드립니다.

감사

Neelima

Answer 1

트라이이 :

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 \t :columns 
 
    }); 
 
} 
 

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

 

 

 

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

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