jquery – 如何在运行时将Kendo Grid与System.Data.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

如果您有任何疑虑,请告诉我.