@section Scripts
{
<style>
body { font-size: 9pt; }
#dvGrid { width: 500px; }
span.hi-lite { color: red; }
#dvGrid th.k-header { text-align: center; }
</style>
<script>
$(function () {
//建立資料來源物件
var dataSrc = new kendo.data.DataSource({
transport: {
read: {
//以下其實就是$.ajax的參數
type: "POST",
url: "/Home/Grid",
dataType: "json",
data: {
//額外傳至後方的參數
keywd: function () {
return $("#tKeyword").val();
}
}
}
},
schema: {
//取出資料陣列
data: function (d) { return d.data; },
//取出資料總筆數(計算頁數用)
total: function (d) { return d.total; }
},
pageSize: 10,
serverPaging: true,
serverSorting: true
});
//JSON日期轉換
var dateRegExp = /^\/Date\((.*?)\)\/$/;
window.toDate = function (value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}
$("#dvGrid").kendoGrid({
dataSource: dataSrc,
columns: [
{ field: "UserNo", title: "會員編號" },
{ field: "UserName", title: "會員名稱",
template: '#= "<span class=\\"u-name\\">" + UserName + "</span>" #'
},
{ field: "RegDate", title: "加入日期",
template: '#= kendo.toString(toDate(RegDate), "yyyy/MM/dd")#'
},
{ field: "Points", title: "累積點數" },
],
sortable: true,
pageable: true,
dataBound: function () {
//AJAX資料Bind完成後觸發
var kw = $("#tKeyword").val();
//若有設關鍵字，做Highlight處理
if (kw.length > 0) {
var re = new RegExp(kw, "g");
$(".u-name").each(function () {
var $td = $(this);
$td.html($td.text()
.replace(re, "<span class='hi-lite'>$&</span>"));
});
}
}
});
//按下查詢鈕
$("#bQuery").click(function () {
//要求資料來源重新讀取(並指定切至第一頁)
dataSrc.read({ page: 1, skip: 0 });
//Grid重新顯示資料
$("#dvGrid").data("kendoGrid").refresh();
});
});
</script>
}
<div style="padding: 10px;">
關鍵字:
<input id="tKeyword" /><input type="button" value="查詢" id="bQuery" />
</div>
<div id="dvGrid">
</div>