zoukankan      html  css  js  c++  java
  • KendoUi 学习笔记(二) Grid

    Kendo.ui.Grid

    Kendo Ui Grid控件,继承至Widget。

    一、构造

          allowCopy    Boolen|Object  (默认:false)

         当他设置true,用户就可以选中行点击复制,可以复制进入excel和记事本。

        设置Object可以设置高级Copy,比如复制后通过分隔符隔开。    

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
        selectable: "multiple cell",
        allowCopy: true,
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ]
    });
    </script>

      例子—   

     allowCopy.delimeter  String|Object(默认:" ")

        delimeter是同一行,项与项之间的分隔符。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
        selectable: "multiple cell",
        allowCopy: {
            delimeter: ",",
        },
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ]
    });
    </script>

        altRowTemplate   String|Function

        呈现行的模板。默认不同行之间通过<tr>

        通过这个属性,可以自定义展示模板。支持kendo.template(html)和纯html。

        例子:指定交互行模板通过Funtion    

    <div id="grid"></div>
    <script id="alt-template" type="text/x-kendo-template">
        <tr data-uid="#= uid #">
            <td colspan="2">
                <strong>#: name #</strong>
                <strong>#: age #</strong>
            </td>
        </tr>
    </script>
    <script>
    $("#grid").kendoGrid({
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      altRowTemplate: kendo.template($("#alt-template").html())
    });
    </script>

     例子:指定交互行模板通过String

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ],
      altRowTemplate: '<tr data-uid="#= uid #"><td colspan="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'
    });
    </script>

        autoBind  Boolean(default:true)

        当他设置成false,Grid在初始化的时候将不绑定,必须调用read()方法才能被绑定。

        个人理解:这样就完全将数据和展示分离开。

    <div id="grid"></div>
    <script>
    var dataSource = new kendo.data.DataSource({
      data: [ { name: "Jane Doe" }, { name: "John Doe" }]
    });
    $("#grid").kendoGrid({
      autoBind: false,
      dataSource: dataSource
    });
    dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
    </script>

         columnResizeHandleWidth  Number(default:3)

         定义每次句柄处理的宽度。让人更容易调整宽度。

          存在疑问:未启用

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
        columnResizeHandleWidth: 6
    });
    </script>

          columns  Array

          列配置模型。一个array对象或者string。javascript对象解释一个列配置。String指定绑定列名绑定的列。grid会根据列配置创建列。

          dataSource    Object|Array|kendo.data.DataSource

          dataSource是用于展示table rows。一个javascript对象要符合source config配置的对象,也可以是一个javascript array或者一个已经存在的kendo,data.DataSource 实例。

          当datasource 配置是一个javascript 对象或者一个kendo.data.DataSourece实例,使用它的value配合datasource  配置。

          当datasource配置是一个kendo.data.DataSource 实例。

        例子—指定Grid  Columns  通过 string array

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: ["name", "age"], // two columns bound to the "name" and "age" fields
      dataSource: [ { name: "Jane", age: 31 }, { name: "John", age: 33 }]
    });
    </script>

     例子-指定grid列配置通过Object array

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [{
        field: "name",// create a column bound to the "name" field
        title: "Name" // set its title to "Name"
      }, {
        field: "age",// create a column bound to the "age" field
        title: "Age" // set its title to "Age"
      }],
      dataSource: [ { name: "Jane", age: 30 }, { name: "John", age: 33 }]
    });
    </script>

     columnMenu   Boolean | Object(default:false)

     当设置成true,通过点击列投的图标Grid将显示列菜单。列菜单允许用户控制显示或者关闭列,过滤和排序(当过滤和排序被允许)。默认情况列菜单不被允许。

     通过设置一个Javascript 对象来设置column menu的配置。

     例子—启用Column Menu

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

    columnMenu的配置#Start-------------------------------------------------------------------------------------------------------------------------------------

    columnMenu.columns  Boolean(default:true)

    当设置成true,column menu 允许用户选择列显示隐藏。默认column menu 允许列选择。

    例子—不允许列选择

    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        columns: false
      },
      sortable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });

    columnMenu.filterable  Boolean(default:true)

    当它设置成true,列菜单允许用户过滤grid。当grid的配置filterable。

    columnMenu.filterable的属性一定要再grid的filterable为true的前提才有用。

     例子—使得列过滤器无效

    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        filterable: false
      },
      filterable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });

    columnMenu.sortable  

    当设置为true,允许用户通过grid列进行排序。默认情况下当grid的sortable为true时就可以设置。

    例子—让column menu 排序不可用。

    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        sortable: false
      },
      sortable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });

    columnMenu.message  -Object

    这个text message 显示在列菜单。使用自定义或本地,列菜单消息。

    这个主要自定义列菜单的提示文字。

    message是一个对象,里面包括columns,filter,sortAscending,sortDescending

    例子—自定义列菜单消息

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          columns: "Choose columns",
          filter: "Apply filter",
          sortAscending: "Sort (asc)",
          sortDescending: "Sort (desc)"
        }
      },
      sortable: true,
      filterable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

     columnMenu.messages.columns String(默认:“Columns”) 默认值是根据语言包,如果是中文是"列"

    这个代表列菜单中列控制的菜单显示文字。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          columns: "Choose columns"
        }
      },
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

    columnMenu.message.filter  String(default:"Filter")   使用中文语言包后为“过滤”

    这个代表列菜单中过滤菜单项的菜单文字。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          filter: "Apply filter",
        }
      },
      filterable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

    columnMenu.messages.sortAscending  String(默认:“Sort Ascending”) 使用中文语言包后为“升序”

    这个代表列菜单中升序菜单项的菜单文字。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          sortAscending: "Sort (asc)",
        }
      },
      sortable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

    columnMenu.message.sortDescending  String(默认:“Sort Descending”) 使用中文语言包后为“降序”

    列菜单的降序菜单的显示文字。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          sortDescending: "Sort (desc)",
        }
      },
      sortable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

    columnMenu.message.settings  String(默认:“Column Setting”)

    这个是菜单头部的显示文字(仅在移动模式下可用)。

    mobile:'phone'模式下可用。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          settings: "Column Options",
        }
      },
      mobile: "phone",
      sortable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

    columnMenu.message.done   String(default:“Done”)

    菜单头部文字显示(仅在移动模式可用)

    mobile:'phone'模式下可用。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      columnMenu: {
        messages: {
          done: "Ok",
        }
      },
      mobile: "phone",
      sortable: true,
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

     columnMenu.messages.lock   String(default:“Lock”)

     列菜单锁定列菜单的显示文字。

    存在问题:等把column配置中的locked和lockable两个配置完成以后,再回头来确定

    columnMenu.messages.unlock  String(默认:“Unlock”)

    存在问题:等把column配置中的locked和lockable两个配置完成以后,再回头来确定

    columnMenu的配置#End---------------------------------------------------------------------------------------------------------------------------------------

    dataSource   Object|Array|kendo.data.DataSource

    数据源部件用于显示table rows。Javascript对象表示一个有效的数据源的配置,也可以是一个Javascript数组或者一个kendo.data.DataSource实例。

    当dataSource配置是一个javascript 对象或者array 对象,这些都会被隐式的初始化成kendo.data.DataSource 实例。

    当dataSource配置本身就是kendo.data.DataSource实例就直接使用,不会被初始化。

    例子—javascript object的数据源

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: {
        data: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
        ]
      }
    });
    </script>

    例子—javascript array的数据源

    作者备注:给的例子与javascript object的数据源没有区别

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ]
    });
    </script>

     例子—已存在的kendo.data.DataSource对象

    作者备注:

    1、DataSource支持jsonp跨域

    2、grid如果不配置column,会默认根据dataSource自动生成column配置。

    <div id="grid"></div>
    <script>
    var dataSource = new kendo.data.DataSource({
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/products",
          dataType: "jsonp"
        }
      },
      pageSize: 10
    });
    $("#grid").kendoGrid({
      dataSource: dataSource,
      pageable: true
    });
    </script>

     detailTemplate   String|Funtion

    模板展示详情行。检查详情模板通过在线demo。

    作者备注:

    1、detailTemplate相当于可以将列展开展示详情。

    注:deatilTemplate内容不能比主列宽,除非详细模板支持滚动。

    例子—Function Template

    <script id="detail-template" type="text/x-kendo-template">
      <div>
        Name: #: name #
      </div>
      <div>
        Age: #: age #
      </div>
    </script>
    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      detailTemplate: kendo.template($("#detail-template").html())
    });
    </script>

     例子—指定string 详情模板

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
    });
    </script>

    editable   Boolean|Object(default:false)

    当设置成true,用户可以编辑绑定的数据。默认是不允许编辑。

    可以设置一个字符串(“inline”,"incell"或者“popup”)用于指定编辑模式。默认编辑模式“incell”。

    incell:列单独编辑。

    inline:行编辑,columns必须有"command:'edit'"

    popup:弹出编辑框,columns必须有"command:'edit'"

    可以设置一个javascript object 代表编辑配置。

    “inline”和“popup”编辑模式由“edit”列命令触发。因此columns必须含有“edit”命令。

    例子—可以编辑

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      editable: true
    });
    </script>

    例子—弹出编辑

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" },
        { command: "edit" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      editable: "popup"
    });
    </script>

     #editable 配置     start-----------------------------------------------------------------------------------------------------

    editable.confirmation  Boolean|String|Function(default:true)

    当设置成true,用户点击“destroy”命令按钮的时候,弹出确认对话框。

    String—能设置确定对话框的确认文字,比如“你确定删除吗?”。

    Function—方法被调用,return "你确定删除吗?",作为确认框的文字内容。

    例子—确认对话框不可用

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
       columns: [
         { field: "name" },
         { field: "age" },
         { command: "destroy" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ],
       editable: {
         confirmation: false
       }
    });
    </script>

    例子—设置删除按钮的确认框文字

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
       columns: [
         { field: "name" },
         { field: "age" },
         { command: "destroy" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ],
       editable: {
         confirmation: "Are you sure that you want to delete this record?"
       }
    });
    </script>

    例子—通过方法返回确认框文字

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
       columns: [
         { field: "name" },
         { field: "age" },
         { command: "destroy" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ],
       editable: {
         confirmation: function(e) {
             return  "Are you sure that you want to delete record for " + e.name + "?";
         }
       }
    });
    </script>

    editable.cancelDelete   String(默认:“Cancel”),如果引用了中文语言包 为“取消” 

    当confirmation被启用当用户点击“删除”,取消按钮的文字,当grid的mode:'phone'才有效

    例子—修改取消按钮,手机模式

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
       columns: [
         { field: "name" },
         { field: "age" },
         { command: "destroy" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ],
       mobile: "phone",
       editable: {
         confirmation: true,
         cancelDelete: "No"
       }
    });
    </script>

    editable.confirmDelete   String(default:‘Delete’)

    当confirmation被启用当用户点击“删除”,确认删除按钮的文字,当grid的mode:'phone'才有效

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
       columns: [
         { field: "name" },
         { field: "age" },
         { command: "destroy" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ],
       mobile: "phone",
       editable: {
         confirmation: true,
         confirmDelete: "Yes"
       }
    });
    </script>

    editable.createAt String(default:'top')

    新增一条数据插入的位置。top第一行;bottom最后一行。默认是在第一行。

    例子—Grid最后插入一条数据。

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      editable: {
        createAt: "bottom"
      },
      toolbar: ["create"]
    });
    </script>

     editable.mode  String(default:‘incell’)

    编辑模式。支持编辑模式"incell","inline"和“popup”。

    incell:单元格内编辑。

    inline:行内编辑。

    popup:弹窗

     “inline”和“popup”编辑模式通过column 命令 “edit”,因此一定需要 “edit” column.

    例子——"inline"编辑模式

    <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" },
        { command: "edit" }
      ],
      dataSource: {
        data: [
          { id: 1, name: "Jane Doe", age: 30 },
          { id: 2, name: "John Doe", age: 33 }
        ],
        schema: {
          model: { id: "id" }
        }
      },
      editable: {
        mode: "inline"
      }
    });
    </script>

    editable.template   String|Function

    弹出编辑的展示模板

    #editable 配置     end-----------------------------------------------------------------------------------------------------

  • 相关阅读:
    Javascript网页摇一摇
    移动端Web开发注意点
    Clappr——开源的Web视频播放器
    光看这图片就知道是大片--今天是五一劳动节尽管还是敲着代码(日常就是这样)然后想不出写什么了,也找不到好的素材,最后开心一下吧
    大放异彩的伪元素——可以做什么?(转)别人分享的文章,发现很不错,果断收藏了
    全屏滚动效果H5FullscreenPage.js
    今天我已无力吐槽了!写个没有营养的吐槽文。只是个人日记
    css的一些小技巧!页面视觉差!
    CSS3 transforms 3D翻开
    Javascript非构造函数的继承
  • 原文地址:https://www.cnblogs.com/cainiaoguoshi/p/7220780.html
Copyright © 2011-2022 走看看