KendoUI:Grid控件的使用

Posted 2020-09-02 无懈可击

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