KendoUI系列：MultiSelect

libingql發表於2014-06-09
UI

　　1、基本使用

　　1>、建立Input

<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<input class="city" />
<script type="text/javascript">
    $(function () {
        $(".city").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "北京", value: "1" },
                { text: "上海", value: "2" },
                { text: "深圳", value: "3" },
                { text: "廈門", value: "4" }
            ]
        });
    });
</script>

　　效果預覽：

　　獲取選中項Value：

var city = $("#city").data("kendoMultiSelect");
city.value();

　　設定載入完成後選中項：

<script type="text/javascript">
    $(function () {
        $("#city").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "北京", value: "1" },
                { text: "上海", value: "2" },
                { text: "深圳", value: "3" },
                { text: "廈門", value: "4" }
            ],
            value: [
                { text: "廈門", value: "4" },
                { text: "深圳", value: "3" }
            ]
        });
    });
</script>
<script type="text/javascript">
    $(function () {
        var dataSource = new kendo.data.DataSource({
            data: [{
                text: "北京",
                value: "1"
            }, {
                text: "上海",
                value: "2"
            }, {
                text: "深圳",
                value: "3"
            }, {
                text: "廈門",
                value: "4"
            }]
        });

        $("#city").kendoMultiSelect({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: dataSource,
            value: [
                { text: "廈門", value: "4" },
                { text: "深圳", value: "3" }
            ]
        });
    });
</script>

　　2>、建立select

<select id="city" multiple="multiple" data-placeholder="Select Cities...">
    <option>北京</option>
    <option selected>上海</option>
    <option>深圳</option>
    <option selected>廈門</option>
</select>
<script type="text/javascript">
    $(function () {
        $("#city").kendoMultiSelect();
    });
</script>

　　2、載入遠端資料

<input id="city" />
<script type="text/javascript">
    $(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Province/GetProvinceList",
                    dataType: "json"
                }
            }
        });

        $("#city").kendoMultiSelect({
            placeholder: "Select Cities...",
            dataTextField: "ProvinceName",
            dataValueField: "ProvinceID",
            autoBind: false,
            dataSource: dataSource
        });
    });
</script>
}

　　3、參考資料

　　http://demos.telerik.com/kendo-ui/multiselect/index

相關文章