KendoUI:Grid控件的使用

<div id=”grid”></div>

<script th:inline=”javascript”>
$(function(){

$(‘#grid‘) .kendoGrid({
dataSource : dataSource, //数据源加载
pageable : { //分页信息选项设置
input : true,
numeric : false,
refresh: true,
pageSizes: true,
buttonCount: 5
},
sortable : true, //可排序
height : 430, //表格高度设置
toolbar : [ //工具条,可使用模板自定义
{
name : "create",
text : "添加"
},
{
template :
kendo.template($("#pageStyleSkinTemplAddTemplate").html())
},
{
template :
kendo.template($("#pageStyleSkinQueryTemplate").html())
}
],
columns : [ //表格列设置
{
field: "fileName", //dataSource中与data对应的域(field)的名称
title: "风格名称", //表头名称
width: 200 //列宽
},
{
field: "updaterId",
title: "更新人",
width: 100
},
{
field: "updateTime",
title: "上传时间",
width: 200,
format: "{0: yyyy-MM-dd HH:mm:ss}" //格式化时间
},
{
command : [ //对行数据的操作
{
text:"编辑", //名称
click: editFunction //自定义点击事件
},
{
text:"下载",
click: loadFunction
},
{
name : "destroy", //调用dataSource中的删除方法
text : "删除"
}
],
title : "操作", //表头名称
width : "250px" //列宽
}
],
editable :
{
mode : "popup", //弹出窗口的编辑模式(行内编辑:”inline”)
},
messages : //分页条部分显示中文信息的设置
{
display : "Showing {0}-{1} from {2} data items",
empty : "No data"
}

});

});
</script>

时间: 2024-07-28 16:47:13

KendoUI:Grid控件的使用的相关文章

扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的炫目的Windows.Web.WPF和Silverlight控件,相信很多人在使用它们.我们现在的项目就在使用Infragistics的Windows Form控件集.虽然这些控件功能强大,也不可能满足你所有的需求,尤其是那些比较苛刻的最终用户的需求.比如,我们最近就接收到这样一个变态的需求:让所以

DevExpress Grid控件经典常用功能代码收集

随着DevExpress 控件包越来越多的被中国用户使用,由于是英文版本,看英文版使用说明非常困难,慧都控件网在DevExpress 控件包使用方面有多年的研究,慧都控件网会不断的把DevExpress 使用经验分享给大家.»更多DevExpress开发资源与帮助文档 下面是我们平时收集最常用的DevExpress Winform 4个代码片段,比较常用,希望对广大DEV用户有帮助. 一 .GridControl的删除操作 private void rILinkEditInfoDel_Click

FineUI Grid控件高度自适应

引言 页面里使用f:Grid控件,添加分页功能,然后高度填充整个页面. 如何使用 使用FineUI 控件的每个页面都有一个f:PageManager控件,它包含属性:AutoSizePanelID,设置需要填充的控件ID,从它的demo可以看出,正常情况下需要再放置一个容器Panel,就可以使整个页面填充. <f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="ResultS

FineUI Grid控件右键菜单的实现

FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对于Grid控件来说,我这里只简单说明两种实现.即在表格的数据行上右键单击时弹出的菜单,以及在空白位置右键单击时弹出的菜单. 时间有限,废话不多说了,先看两个效果图.(实现环境 FineUI4.1.6,.NET 4.0因为需要指定控件的ID) 1. 数据行右键菜单 2. 空白处右键菜单 实现方法: s

fine ui grid控件添加行号

grid控件的列中添加如下代码<f:RowNumberField EnablePagingNumber="true" TextAlign="Center" /> 原文地址:https://www.cnblogs.com/wangjp-1233/p/10124727.html

Kendo Grid控件中将枚举值转为枚举名显示

我们在开发过程中经常会遇到需要将枚举值转换成名称进行显示的情况.如下我们有这样一个数据源对象: var users = [ {id: 1, name: "similar1", status: 1}, {id: 2, name: "similar2", status: 2} ]; 其中字段 status 代表的是用户的状态, 1 代表 “可用”, 2 代表 “禁用”.我们使用 kendo grid 常规配置如下: columns: [ { field: "i

[转]Ext Grid控件的配置与方法

http://www.blogjava.net/wangdetian168/archive/2011/04/12/348651.html 1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设

UWP 使用Telerik Grid控件

还是老规矩,看一下最终效果. 数据是从SQLite中读取,然后绑定到DataGrid中显示的. 先看一下XAML <grid:RadDataGrid Grid.Row="1" x:Name="radDataGrid" Background="Transparent" BorderThickness="1" GridLinesThickness="1" UserEditMode="Inline

dev设置子窗体的初始位置,grid控件表头的属性设置

当在父窗体上弹出子窗体时,一般设置子窗体的初始位置是居中, //在需要展示子窗体的父窗体上写这段,注意必须设置在show方法之前Form2 f2 = new Form2(); f2.MdiParent = this; f2.StartPosition = FormStartPosition.CenterScreen; //CenterScreen相对于屏幕居中,CenterParent是相对于父窗体居中 f2.Show(); DEV中Grid禁用表头的右键菜单,设置属性如下图: DEV中Grid