我需要在Button Click上弹出一个Kendo Grid.在按钮上单击服务器返回DataTable,其中包含动态列(即1到n个列).单击按钮,我使用jQuery ajax调用获取DataTable.但是我无法绑定那些数据.
如何解决此问题
如何解决此问题
解决方法
试试这样,
脚本
<script type="text/javascript"> $(function () { schmebind(); }); function schmebind() { var schemaModel = {}; var type; var IsEditable = false; var dateColumnArray = []; $.each(JaiminField,function (index,da) { type = (da.type == undefined || da.type == 'number' || da.type == 'date') ? 'string' : da.type; schemaModel[da.field] = { type: type,editable: false }; if (da.type == 'date') { dateColumnArray.push(da.field); } }); var schemaModelNew = kendo.data.Model.define({ id: "$id",fields: schemaModel,nullable: true }); var knownOutagesDataSource = new kendo.data.DataSource({ data: Jaimin,pageSize: 10,batch: true,schema: { model: schemaModelNew } }); CreateGrid("#DynamicGrid",knownOutagesDataSource,dateColumnArray,null,null) } function CreateGrid(targetId,data,columnModel,detailTemplate,detailInit) { $(targetId).kendoGrid({ dataSource: data,selectable: "row",detailTemplate: detailTemplate,detailInit: detailInit,columns: columnModel,filterable: false,sortable: true,dataBound: function (e) { if (e.sender._data.length == 0) { var mgs,col; mgs = "No results found for"; col = 9; var contentDiv = this.wrapper.children(".k-grid-content"),dataTable = contentDiv.children("table"); if (!dataTable.find("tr").length) { dataTable.children("tbody").append("<tr><td colspan='" + col + "'><div style='color:red;width:500px'>" + mgs + "</div></td></tr>"); if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { dataTable.width(this.wrapper.children(".k-grid-header").find("table").width()); contentDiv.scrollLeft(1); } } } },pageable: { prevIoUsNext: true,numeric: false,messages: { empty: "No data" } },navigatable: true,scrollable: true,resizable: true }); } </script>
视图
<div id="DynamicGrid"> </div>
Json文件
var Jaimin = [ { $id: "3",ActiveFlag: "1",CreatedBy: "Admin",TriageTypeId: 3,TriageTypeKey: "DATAUSAGE_PROVISIONING",TriageTypeName: "Data usage Provisioning",TriageTypeOrder: 3 },{ $id: "4",TriageTypeId: 4,TriageTypeName: "Device Issues",TriageTypeOrder: 4 },{ $id: "5",TriageTypeId: 5,TriageTypeName: "Known Outages",TriageTypeOrder: 5 },{ $id: "6",TriageTypeId: 6,TriageTypeName: "Coverage",TriageTypeOrder: 6 },{ $id: "7",TriageTypeId: 7,TriageTypeName: "Known Issues",TriageTypeOrder: 7 },{ $id: "8",TriageTypeId: 8,TriageTypeName: "SIVR",TriageTypeOrder: 8 },{ $id: "9",TriageTypeId: 9,TriageTypeName: "Grand Central - Device",TriageTypeOrder: 9 },{ $id: "10",TriageTypeId: 10,TriageTypeName: "Grand Central - Coverage",TriageTypeOrder: 10 },{ $id: "11",TriageTypeId: 11,TriageTypeName: "Grand Central - Account",TriageTypeOrder: 11 },{ $id: "12",ActiveFlag: "0",TriageTypeId: 12,TriageTypeName: "Network Type",TriageTypeOrder: 12 },{ $id: "13",TriageTypeId: 13,TriageTypeName: "Known outages",TriageTypeOrder: 13 },{ $id: "14",TriageTypeId: 14,TriageTypeName: "Local Site Issues",TriageTypeOrder: 14 },{ $id: "15",TriageTypeId: 15,TriageTypeName: "PrevIoUs Complaints",TriageTypeOrder: 15 },{ $id: "16",TriageTypeId: 16,TriageTypeName: "IMEI blocked",TriageTypeOrder: 16 },{ $id: "17",TriageTypeId: 17,TriageTypeName: "High Speed Data Throttled",TriageTypeOrder: 17 },{ $id: "18",TriageTypeId: 18,TriageTypeName: "Tethering / Hotspot Blocked",TriageTypeOrder: 18 },{ $id: "19",TriageTypeId: 19,TriageTypeName: "Retrieving on-device diagnostics",TriageTypeOrder: 19 },{ $id: "20",TriageTypeId: 20,TriageTypeName: "Retrieving Device Settings",TriageTypeOrder: 20 },{ $id: "21",TriageTypeId: 21,TriageTypeName: "Scanning Applications",TriageTypeOrder: 21 },{ $id: "22",TriageTypeId: 22,TriageTypeName: "Checking Software Version",TriageTypeOrder: 22}] var JaiminField = [ { field: "$id",type: "int" },{ field: "ActiveFlag",{ field: "CreatedBy",type: "string" },{ field: "TriageTypeId",{ field: "TriageTypeKey",{ field: "TriageTypeName",{ field: "TriageTypeOrder",type: "number" } ]
演示:http://jsbin.com/honavive/1
如果您有任何疑虑,请告诉我.