代码之家 › 专栏 › 技术社区 › prasad

如何使用JSON本地数据创建包含文本和下拉框的Kendo Grid

kendo-dropdown kendo-grid kendo-ui json

prasad · 技术社区 · 11 年前

我正在尝试创建Kendo Grid,它可以包含普通文本数据和组合框。我成功地将数据从JSON文件渲染到Kendo网格。我在下面发布了示例代码:

<div id="grid"></div>

<script>

$(document).ready(function() {
 var dsource=new kendo.data.DataSource({
   transport: {
     read: {
       url: "dataobj.json",
       dataType: "json"         
     }
   }     
 });
 $("#grid").kendoGrid({
   dataSource: dsource,
   columns: [
    { field: "patient", title: "Patient" },
    { field: "gender", title: "Gender" },
    { field: "dob", title: "DOB" },
    { field: "healthPlan", title: "Health Plan" },
    { field: "phone", title: "Phone Number" },
    { field: "pcp", title: "PCP" },
    { field: "status", title: "Overall Status" },
    { field: "patientID", title: "McK Patient ID" }

],
   height: 340,
   scrollable: true,
   sortable: true,
   pageable: true,
   editable: "inline"
 });

});    
</script>

_____________dataobj.json文件______________

[
   {"patient" : "Apple, Margaret", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Medicare", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 328239 },
   {"patient" : "Bregstrom, Glen", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Bruno, Alan", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Collier, Kasey", "gender" : "Female", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Edelson, Ted", "gender" : "Male", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Green, Lousie", "gender" : "Female", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly", "phone" : "(781) 555-0131", "pcp" : "Dr. Karen Johnson", "status" : "Red", "patientID" : 235353 },
   {"patient" : "Green, Sarah", "gender" : "Female", "dob" : "09/30/1945", "healthPlan" : "Elder Care Frail Elderly"}
]

现在我的要求是再插入一个名为“status”的列。在“状态”列的每一行中,我需要在下拉列表中显示两个选项Active和Block。我尝试了很多例子,但发现很难在网格中插入下拉列表。我需要Dropdownlist,它可以从json(在我的例子中是dataobj.json)文件中读取并更新json文件中的更改(选定的索引值)。请帮我用dropdownlist构建剑道网格。

谢谢普拉萨德

1 回复 | 直到 11 年前

Mohaideen Ismail 11 年前

可以使用模板渲染列

 var dsource=new kendo.data.DataSource({
   transport: {
     read: {
       url: "dataobj.json",
       dataType: "json"         
     }
   }     
 });
 $("#grid").kendoGrid({
   dataSource: dsource,
   columns: [
       {template: "<select><option>#= gender #</option><option>#= dob #</option></select>", title: "status"},
    { field: "patient", title: "Patient" },
    { field: "gender", title: "Gender" },
    { field: "dob", title: "DOB" },
    { field: "healthPlan", title: "Health Plan" },
    { field: "phone", title: "Phone Number" },
    { field: "pcp", title: "PCP" },
    { field: "status", title: "Overall Status" },
    { field: "patientID", title: "McK Patient ID"}


],
   height: 340,
   scrollable: true,
   sortable: true,
   pageable: true,
   editable: "inline"
 });

而不是性别和dob。您将使用json中的状态密钥。