Kendo ui 剑道UI网格列重新排序_Kendo Ui_Telerik_Kendo Grid_Kendo Asp.net Mvc

Kendo ui 剑道UI网格列重新排序

kendo-ui telerik

Kendo ui 剑道UI网格列重新排序,kendo-ui,telerik,kendo-grid,kendo-asp.net-mvc,Kendo Ui,Telerik,Kendo Grid,Kendo Asp.net Mvc,如何在单击按钮时为列切换剑道网格的可重排序属性？我试过了但它不起作用查看演示站点。这和重新排列列的示例相同。它会帮助你的请尝试以下代码片段 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://cdn.kendost

如何在单击按钮时为列切换剑道网格的可重排序属性？我试过了

但它不起作用

查看演示站点。这和重新排列列的示例相同。它会帮助你的

请尝试以下代码片段

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="grid"></div>
    index<input type="text" id="txtIndex" value="0" />
    <br />
    column name
    <input type="text" id="txtColName" value="ID" />
    <br />
    <input type="button" value="reorder" onclick="reordercolumn()" />
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                ShipCountry: { type: "string" },
                                ShipCity: { type: "string" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShippedDate: { type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                sortable: true,
                reorderable: true,
                resizable: true,
                pageable: true,
                columns: [
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        width: 120,
                        format: "{0:MM/dd/yyyy}"
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country"
                    },
                    {
                        field: "ShipCity",
                        title: "Ship City"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name"
                    },
                    {
                        field: "ShippedDate",
                        title: "Shipped Date",
                        format: "{0:MM/dd/yyyy}",
                        width: 200
                    },
                    {
                        field: "OrderID",
                        title: "ID",
                        width: 80
                    }
                ]
            });
        });

        function reordercolumn() {
            var grid = $("#grid").data("kendoGrid");
            var columnindex = 0;

            for (var i = 0; i < $("#grid").data("kendoGrid").columns.length; i++) {
                var col = $("#grid").data("kendoGrid").columns[i];
                if (col.title == $("#txtColName").val().trim()) {
                    columnindex = i;
                }
            }

            grid.reorderColumn($("#txtIndex").val().trim(), grid.columns[columnindex]);
        }
    </script>
</body>
</html>


无标题
指数


列名


$（文档）.ready（函数（）{
$（“#网格”）.kendoGrid({
数据源：{
类型：“odata”，
运输：{
阅读：“http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
模式：{
型号：{
字段：{
OrderID:{type:“number”}，
ShipCountry:{type:“string”}，
ShipCity:{type:“string”}，
船名：{type:“string”}，
OrderDate:{type:“date”}，
ShippedDate:{type:“date”}
}
}
},
页面大小：15
},
身高：550，
可排序：是的，
可重定额：对，
可调整大小：正确，
pageable:对，
栏目：[
{
字段：“订单日期”，
标题：“订单日期”，
宽度：120，
格式：“{0:MM/dd/yyyy}”
},
{
字段：“ShipCountry”，
标题：“船舶国”
},
{
字段：“ShipCity”，
标题：“船舶城”
},
{
字段：“ShipName”，
标题：“船名”
},
{
字段：“ShippedDate”，
标题：“装运日期”，
格式：“{0:MM/dd/yyyy}”，
宽度：200
},
{
字段：“订单ID”，
标题：“身份证”，
宽度：80
}
]
});
});
函数reordercolumn（）{
var grid=$（“#grid”）.data（“kendoGrid”）；
风险价值指数=0；
对于（var i=0；i<$（“#网格”）.data（“kendoGrid”）.columns.length；i++）{
var col=$（“#网格”）.data（“kendoGrid”）.columns[i]；
if（col.title==$（“#txtColName”）.val（）.trim（））{
柱状指数=i；
}
}
grid.reorderColumn（$（“#txtIndex”）.val（）.trim（），grid.columns[columnindex]）；
}

如果有任何问题，请告诉我

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="grid"></div>
    index<input type="text" id="txtIndex" value="0" />
    <br />
    column name
    <input type="text" id="txtColName" value="ID" />
    <br />
    <input type="button" value="reorder" onclick="reordercolumn()" />
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                ShipCountry: { type: "string" },
                                ShipCity: { type: "string" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShippedDate: { type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                sortable: true,
                reorderable: true,
                resizable: true,
                pageable: true,
                columns: [
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        width: 120,
                        format: "{0:MM/dd/yyyy}"
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country"
                    },
                    {
                        field: "ShipCity",
                        title: "Ship City"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name"
                    },
                    {
                        field: "ShippedDate",
                        title: "Shipped Date",
                        format: "{0:MM/dd/yyyy}",
                        width: 200
                    },
                    {
                        field: "OrderID",
                        title: "ID",
                        width: 80
                    }
                ]
            });
        });

        function reordercolumn() {
            var grid = $("#grid").data("kendoGrid");
            var columnindex = 0;

            for (var i = 0; i < $("#grid").data("kendoGrid").columns.length; i++) {
                var col = $("#grid").data("kendoGrid").columns[i];
                if (col.title == $("#txtColName").val().trim()) {
                    columnindex = i;
                }
            }

            grid.reorderColumn($("#txtIndex").val().trim(), grid.columns[columnindex]);
        }
    </script>
</body>
</html>