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(默认："\t")

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:  },
    { name: "John Doe", age:  }
  ]
});
</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-----------------------------------------------------------------------------------------------------

KendoUi 学习笔记(二) Grid的更多相关文章

WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意例如(HISTORY.md Web 组件更新历史 ...
amazeui学习笔记二（进阶开发1）--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用二.项目结构structure ...
AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
[Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
Java IO学习笔记二
Java IO学习笔记二流的概念在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

随机推荐

在linux 上安装ansible
ansible 在线安装:yum install -y epel-releaseyum install -y ansible离线安装:rpm wget https://releases.ansible ...
SAM宏观生态学空间分析帮助文档
宏观生态学分析软件帮助文档: 引言: 该软件是由布鲁塞尔..大学开发,目的是提供一个综合的空间分析计算平台,主要针对的是宏观生态学数据.该软件可以从网站...上自由获取,该软件的主要特征以及发表在20 ...
Web API学习笔记（Python实现）
参考指南: Web API入门指南 http://www.cnblogs.com/guyun/p/4589115.html 用Python写一个简单的Web框架 http://www.cnblogs. ...
python 学习笔记 4 ----> dive into python 3
解析列表解析.字典解析.集合解析浏览本地文件系统的模块: 1 os 2 os.path 3 glob os模块:获取(和修改)本地目录.文件进程.环境变量等信息 os.path模块:包含了操作路径 ...
android -------- 沉浸式状态栏和沉浸式导航栏（ImmersionBar）
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,包括状态栏字体颜色,适用于Activity.Fragment.DialogFragment.Dialog,并且适配刘海屏,适配软键盘弹出等问题 ...
Android屏幕适配框架-(今日头条终极适配方案)
在Android开发中,屏幕适配是一个非常头痛的问题,因而为了去进行屏幕适配,作为程序员,是呕心沥血,历经磨难,哈哈我们之前做屏幕适配一般都会用到一下两种方式: 第一种就是宽高限定符适配,什么是宽高 ...
ROM、RAM、CPU、CACHE、FLASH的区别
内存一般采用半导体存储单元,包括随机存储器(RAM),只读存储器(ROM),以及高速缓存(CACHE).只不过因为RAM是其中最重要的存储器,所以通常所说的内存即指电脑系统中的RAM. RAM要求每时 ...
Vue 知识整理—01-基础
一:Vue是什么? Vue是一个JS框架. Vue.js是一套构建用户界面的渐进式框架. 库和框架的区别: ☞库:提供一些 API 工具函数,体现了封装的思想,需要我们主动调用: ☞框架:提供一套完整 ...
CDI Features(EL(SPEL),Decorator,Interceptor,Producer)
一.EL(SPEL) EL 1.概述:EL是JSP内置的表达式语言,用以访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作.EL在得到某个数据时,会自动进行数据类型 ...
.net core 发送邮件
var message = new MimeMessage(); //发送方 message.From.Add(new MailboxAddress(&qu ...

KendoUi 学习笔记(二) Grid

KendoUi 学习笔记(二) Grid的更多相关文章

随机推荐

热门专题