Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/asp.net/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 标题和内容的剑道网格Json数据_Jquery_Asp.net_Kendo Ui_Kendo Grid_Kendo Asp.net Mvc - Fatal编程技术网

Jquery 标题和内容的剑道网格Json数据

Jquery 标题和内容的剑道网格Json数据,jquery,asp.net,kendo-ui,kendo-grid,kendo-asp.net-mvc,Jquery,Asp.net,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,我正在从事Asp.NETMVC5项目,需要使用KendoGridJQuery更改表 目前,我正在从Api控制器返回数据,如下所示: [ headers:{{ "label": "Name", "id": "name", "isfixed": true, "width": "

我正在从事Asp.NETMVC5项目,需要使用KendoGridJQuery更改表

目前,我正在从Api控制器返回数据,如下所示:

[
headers:{{
            "label": "Name",
            "id": "name",
            "isfixed": true,
            "width": "200px"
        },
        {
            "width": "200px",
            "isfixed": false,
            "id": "city",
            "label": "City"
        },
        },
rows:{
        {name:"Joe",city:"Berlin"},
        {name:"Doe",city:"London"},
        ...
        }
]
[
  { name: "Joe", City: "Berlin" },
  { name: "Doe", City: "Londo" }
]
剑道似乎不喜欢这种格式。只有当我像这样发送JSON时,它才起作用:

[
headers:{{
            "label": "Name",
            "id": "name",
            "isfixed": true,
            "width": "200px"
        },
        {
            "width": "200px",
            "isfixed": false,
            "id": "city",
            "label": "City"
        },
        },
rows:{
        {name:"Joe",city:"Berlin"},
        {name:"Doe",city:"London"},
        ...
        }
]
[
  { name: "Joe", City: "Berlin" },
  { name: "Doe", City: "Londo" }
]
问题:
当我需要不同表的动态列和数据时,我是否可以使用第一种类型的数据创建剑道网格?

这里详细介绍了如何实现这一点:

完成此任务的代码:


    <div id="grid" style="width:1000px;"></div>

    <script>
      var isDateField =[];
      $.ajax({
        url: "https://www.mocky.io/v2/5835e736110000020e0c003c",
        dataType: "jsonp",
        success: function(result) {
          generateGrid(result);
        }
      });

      function generateGrid(response) {
        var model = generateModel(response);
        var columns = generateColumns(response);

        var grid = $("#grid").kendoGrid({
          dataSource: {
            transport:{
              read:  function(options){
                options.success(response.data);
              }
            },
            pageSize: 5,
            schema: {
              model: model
            }
          },
          columns: columns,
          pageable: true,
          editable:true
        });
      }

      function generateColumns(response){
        var columnNames = response["columns"];
        return columnNames.map(function(name){
          return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
        })
      }

      function generateModel(response) {

        var sampleDataItem = response["data"][0];

        var model = {};
        var fields = {};
        for (var property in sampleDataItem) {
          if(property.indexOf("ID") !== -1){
            model["id"] = property;
          }
          var propType = typeof sampleDataItem[property];

          if (propType === "number" ) {
            fields[property] = {
              type: "number",
              validation: {
                required: true
              }
            };
            if(model.id === property){
              fields[property].editable = false;
              fields[property].validation.required = false;
            }
          } else if (propType === "boolean") {
            fields[property] = {
              type: "boolean"
            };
          } else if (propType === "string") {
            var parsedDate = kendo.parseDate(sampleDataItem[property]);
            if (parsedDate) {
              fields[property] = {
                type: "date",
                validation: {
                  required: true
                }
              };
              isDateField[property] = true;
            } else {
              fields[property] = {
                validation: {
                  required: true
                }
              };
            }
          } else {
            fields[property] = {
              validation: {
                required: true
              }
            };
          }
        }

        model.fields = fields;

        return model;
      }
    </script>

var isDateField=[];
$.ajax({
url:“https://www.mocky.io/v2/5835e736110000020e0c003c",
数据类型:“jsonp”,
成功:功能(结果){
generateGrid(结果);
}
});
函数生成器ID(响应){
var模型=生成模型(响应);
变量列=生成列(响应);
var grid=$(“#grid”).kendoGrid({
数据源:{
运输:{
阅读:功能(选项){
选项。成功(响应。数据);
}
},
页面大小:5,
模式:{
型号:型号
}
},
列:列,
pageable:对,
可编辑:真
});
}
函数generateColumns(响应){
var columnNames=响应[“columns”];
返回columnNames.map(函数(名称){
返回{field:name,格式:(isDateField[name]?“{0:D}”:“)};
})
}
函数generateModel(响应){
var sampleDataItem=响应[“数据”][0];
var模型={};
变量字段={};
for(sampleDataItem中的var属性){
if(property.indexOf(“ID”)!=-1){
模型[“id”]=属性;
}
var propType=sampleDataItem[属性]的类型;
如果(propType==“数字”){
字段[属性]={
键入:“数字”,
验证:{
必填项:true
}
};
if(model.id==属性){
字段[属性]。可编辑=false;
字段[属性].validation.required=false;
}
}else if(propType==“布尔”){
字段[属性]={
类型:“布尔”
};
}else if(propType==“字符串”){
var parsedDate=kendo.parseDate(sampleDataItem[property]);
if(parsedDate){
字段[属性]={
键入:“日期”,
验证:{
必填项:true
}
};
isDateField[属性]=真;
}否则{
字段[属性]={
验证:{
必填项:true
}
};
}
}否则{
字段[属性]={
验证:{
必填项:true
}
};
}
}
model.fields=字段;
收益模型;
}