Kendo-UI学习 数据表格grid属性说明(一)

kendoUI-Grid属性说明:

allowCopy: Boolean | Object 是否启用表格复制,该属性默认为false,标识禁用复制功能。设置为true时,可以使用鼠标选中需要的表格数据进行复制。

altRowTemplate:String | function 是否启用自定义表格行级样式模版,可以自定义需要显示的表格样式。

autoBind: Boolean 是否启用自动绑定数据,默认为true,设置为false时需要手动调用read()或者page()方法进行数据绑定。

columnResizeHandleWidth: Number 设置列可调整的宽度大小。

filterable:是否在表头启用筛选功能 这里写图片描述如图中显示的筛选图标,默认为false,禁用筛选功能。在设置为true的时候可以配置更多筛选设置。

columns: Array 表格列属性配置,在该配置中可以对显示的各列进行单独的配置,包括列的类型,模版显示,格式化,数据校验等。

         field:String 表格列对应的数据源中的列名,和对应的数据源绑定,显示对应的数据。

         title:String 表格头部显示的列名。

         width:Number 列的宽度。

         template: String | function 可以设置列的显示样式,也可以在该属性中过滤数据。

         attributes: Object 在属性可以为列添加class 和 style。

         editor: function 官方定义:提供一种方法来指定该列的自定义编辑UI。使用容器参数创建编辑UI。在使用过程中发现,在编辑数据时会根据该方法对数据进行分装。如该列为字典列,数据源与字典互相对应,该列在显示的时候应该显示字典而不是数据源数据,该方法可以解决这类问题。

         filterable:Boolean |Object 该配置可以将表级筛选进行关闭。

         command: String | Array 设置列的按钮。系统默认两种按钮 edit编辑,destroy删除,其他的按钮需要自定义生成。

columnMenu:Boolean | Object 默认为false; 这里写图片描述设置为true的时候表头上会显示列操作的菜单图标。如图,点击菜单按钮后会出现多个列操作,包括排序,和筛选及列的显示隐藏功能。

dataSource: Object | Array | kendo.data.DataSource 数据源,表格显示数据在这里设置。kendo.data.DataSource 为kendoUI数据源配置对象,该对象中可以配置表格的数据源各种操作后台请求路径,包括读取,添加,删除,更新等固定的方法,也可以定义自己的独有的列的操作方法。

editable: Boolean | Object 该属性可以定义列数据是否可以编辑。 默认为false,不可编辑。当设置为true时,可以通过内部属性来配置编辑模式,行内编辑,弹出层编辑 以及 列编辑。

height: Number 定义表格的高低。

resizable:Boolean 该属性默认为false,表示禁止拖动列,设置为true的时候,可以通过拖动列来改变列的宽度。

scrollable : Boolean| Object 是否出现滚动条,默认为false。

selectable :Boolean | String 选中表格的设置,默认false禁止选中,字符串‘row’表示可以选中一行,‘cell’ 表示可以选中一列,‘multiple, row’表示可以选中多行,‘multiple, cell’表示可以选中多列。

reorderable:Boolean 默认false禁止改变列的顺序。设置为true时可以拖动列来改变列的显示顺序。

pageable: Boolean | Object 分页属性配置,默认为false不起用分页,当设置为true时,则需要配置分页相关的属性。

 pageSize:Number 列表显示多少行。

           pageSizes:Boolean|Array 区别于上一个属性,此属性设置是否启用分页下拉工具,可以在前端动态控制分页数据。可以显示分页下拉框。或者可以自定义分页下拉数据。如:pageSizes: [2, 3, 4, "all"]。

           numeric:Boolean 是否显示分页页码图标。如图中红色线标识的页码,如果设置为false则不显示页码,如果设置为true 则显示页码。

          alwaysVisible:boolean 是否在列表数据没有达到分页时显示分页组件。默认为true显示,当设置为false时,如果列表数据小于分页设置数据–pageSize则不显示分页组件。

          input: boolean 是否显示跳转页码输入框。默认为false不显示,当设置为true时,显示跳转输入框,如图可以输入页码,敲击回车键,跳转到输入页面。

          previousNext:boolean 是否显示上一页、下一页、首页、尾页等图标。默认true显示。如果设置为false则不显示。

          refresh:boolean 是否显示刷新按钮,默认为false不显示。 如图中的刷新按钮,设置为true则显示刷新按钮。

          info: boolean 是否显示分页数据,默认为true显示,

          messages: Object 定义分页组件的消息提示格式及文本信息。例如列表数据请求为空,则配置empty:‘无数据’,当请求结束会弹出此消息。也可以对分页数据信息进行文本编辑,显示对于的文本信息。

rowTemplate : String |Function 可以自定义行的显示模版。如:
rowTemplate: '<tr data-uid="#= uid #"><td colspan="2"><strong>#: name #</strong><strong>#: age #</strong></td></tr>'。

sortable:boolean |Object 是否启用表头排序功能。默认为false禁用。当设置为true时,点击表头可以进行倒序及正序排列。这里写图片描述如图点击表头后会显示当前此列的排序图标。

toolbar :String | Array | Function 设置列表上方的按钮。可以在表格上方设置按钮及其他显示内容。这里写图片描述 如图可以定义按钮。和行级按钮有重复效用。

  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值