Kendo UI MultiSelect, 連搜尋的功能都有，方便又好用~~

有時候我們會遇到一個需求，某個選項是可以複選的，並且希望還要附帶可以搜尋的功能，如果要手刻的話…實在是個大工程，今天要介紹一下Kendo UI的MultiSelect元件，輕鬆的就可以做到這件事囉~~
官網說明

1. 首先一樣要加加入Kendo UI的css和js，就不額外說明了

2.  加入tag
<select id="PeopleCC" name="PeopleCC" multiple="multiple" ></select>

3. 加入js

$("#PeopleTO").kendoMultiSelect({
                placeholder: "Select employee...",
                dataTextField: "Display",
                dataValueField: "Id",
                autoBind: false,
                filter: 'contains',
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            url: "/Alarm/GetMutiSelect",
                        }
                    }
                }
                //value: [
                //    { ProductName: "Chang", ProductID: 2 },
                //    { ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 }
                //]
            });

如果是一到這個頁面，就要自動進行Binding的話autoBind要記得改成true，例如在要編輯資料時，需要預設從db取出上次選擇的資料，這時如果沒有將autoBind改為true的話，MultiSelect會一直沒有資料可以選擇，因為MultiSelect是當第一次使用者點了它之後，才去做binding的動作，如果裡面已經有填資料進去，就不會binding囉

filter: 'contains'，這個選項就是開啟搜尋的功能
value: 如果需要預設值，就可以在value裡設定

使用方法非常簡單，到目前為止小艾差不說試了4、5種Kendo UI的元件了，用法上大同小異，就是設好datasource，然後指給tag就對了

Kendo UI Grid 全AJAX的CRUD功能範例

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 - 日本求職軌跡

FB粉絲團

Trails會慢慢的提供一些有用的資訊給想到日本去工作的朋友，只要簡單的註冊會員後就可以免費看文章，找工作囉~~目前日本企業職缺正在募集中，會陸陸續續更新上來！