kendo ui 好用的小部件--grid

Posted baota

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了kendo ui 好用的小部件--grid相关的知识,希望对你有一定的参考价值。

Kendo Ui Grid控件,继承至Widget。

https://demos.telerik.com/kendo-ui/grid/index  快速上手教程  下面的代码来自本教程

做表格时非常方便,具有非常强大的功能:

 <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {   //数据源
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,  //支持分组
                sortable: true,   //支持排序
                pageable: {   //分页配置
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5 
                },
                columns: [{ //列头   或称为表头    theader部分
                    template: "<div class=‘customer-photo‘" +   //模板功能
                    "style=‘background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);‘></div>" +
                    "<div class=‘customer-name‘>#: ContactName #</div>",  
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>
</div>

<style type="text/css">
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>

 

以上是关于kendo ui 好用的小部件--grid的主要内容,如果未能解决你的问题,请参考以下文章

如何在 kendo.ui.grid 中创建自定义 kendo.ui.Window 以进行编辑

Kendo Grid,隐藏了无用的额外列?

Kendo UI for jQuery数据管理使用教程:PDF导出

如何提高kendo ui grid在页面的渲染速度

Kendo UI Grid - 显示行号

封装扩展Kendo UI Grid