Grid有許多的套件都有提供，今天小艾要介紹一套，Kendo UI的Grid使用方式，先附上官網
Kendo UI
1. 首先套用css和javascript
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
2. 加入html
<div id="example">
<div id="grid"></div>
</div>
3. 接下來都是javascript的處理了
設定dataSource
var dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "/PeopleData/PeopleList",
dataType: "json",
contentType: "application/json"
},
update: {
type: "POST",
url: "/PeopleData/Edit",
dataType: "json",
contentType: "application/json"
},
destroy: {
type: "POST",
url: "/PeopleData/Delete",
dataType: "json",
contentType: "application/json"
},
create: {
type: "POST",
url: "/PeopleData/Create",
dataType: "json",
contentType: "application/json"
},
parameterMap: function (data, operation) {
if (operation === "read") {
return JSON.stringify({ skip: data.skip, take: data.take });
}
else if ((operation === "update" || operation === "create") && data) {
return JSON.stringify({ peopleData: data });
}
else if (operation === "destroy" && data.PeopleID) {
return JSON.stringify({ personId: data.PeopleID });
}
return data;
}
},
//batch: true,
schema: {
//取出資料陣列
data: function (d) { return d.PeopleDataList; },
//取出資料總筆數(計算頁數用)
total: function (d) { return d.Count; },
model: {
id: "PeopleID",
fields: {
PeopleID: { editable: false, nullable: true },
CN: { validation: { required: true } },
Depart: { defaultValue: { DepartID: 0, DepartName: "Please wait" } },
Pasd: { validation: { required: true } },
Name: { validation: { required: true } },
Mail: { type: "email", validation: { required: true } },
}
}
},
pageSize: 10,
serverPaging: true,
serverSorting: true
});
transport裡的read,update,destroy,create分別對應到讀取，修改，新增，刪除的動作。
parameterMap裡偵對不同的指令，把值傳入後端做處理。
schema設定grid顯示對應的資料，還可以加上vaildation的設定
設定好Datasource後，就要準備把資料塞給kendo ui grid了
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"Name",
{ field: "CN", title: "CN" },
{ field: "Depart", title: "Depart", width: "180px", editor: departDropDownEditor, template: "#=Depart.DepartName#" },
{ field: "Pasd", title: "Pasd" },
{ field: "Mail", title: "Mail" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
值得注意的是，Depart以DropDownList的方式呈現，所以需要設定departDropDownEditor，到後端去取得Depart List的資料
PS. 下面的 $('input 應該是 $('<input，不過blogger會顯示成text…所以就把 < 拿掉了，複製code時別忘了加回去哦！
function departDropDownEditor(container, options) {
$('input data-bind="value:' + options.field + '" data-text-field="DepartName" data-value-field="DepartID" required="" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "json",
transport: {
read: {
type: "POST",
url: "/PeopleData/GetDepartList",
dataType: "json",
contentType: "application/json"
},
}
}
});
}
departDropDownEditor去後端取出資料後，把name和id bind給list就大功告成囉！！簡單明瞭，出來的效果也不錯，完全不需要導頁，全AJAX就搞定CRUD功能。
附上範例程式：
請點我
最後推薦個新創日本求職網站
Trails會慢慢的提供一些有用的資訊給想到日本去工作的朋友，只要簡單的註冊會員後就可以免費看文章，找工作囉~~目前日本企業職缺正在募集中，會陸陸續續更新上來！
