码迷,mamicode.com
首页 > 其他好文 > 详细

KendoUI:Grid控件的使用

时间:2017-03-02 22:05:15      阅读:511      评论:0      收藏:0      [点我收藏+]

标签:tool   表格   ogr   message   text   skin   add   upd   for   

<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>

KendoUI:Grid控件的使用

标签:tool   表格   ogr   message   text   skin   add   upd   for   

原文地址:http://www.cnblogs.com/914556495wxkj/p/6492593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!