zoukankan      html  css  js  c++  java
  • 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",
                         240
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                         150
                    }]
                });
            });
        </script>
    </div>
    
    <style type="text/css">
        .customer-photo {
            display: inline-block;
             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>
  • 相关阅读:
    U盘备份工具
    改进的窗口置顶工具
    有关DLL中封装的MDI子窗体出现TFont错误的解释
    QQ风格程序的编写
    改进的自动按键工具
    万能Update语句
    在DLL中封装的VCL窗体Tab键响应的问题
    自动按键工具
    灵活控制SVN服务
    在DLL动态链接库中封装VCL的MDI子窗体
  • 原文地址:https://www.cnblogs.com/baota/p/8983213.html
Copyright © 2011-2022 走看看