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>