kendo UI gridview绑定下拉框示例

最新推荐文章于 2019-12-13 13:40:08 发布
最新推荐文章于 2019-12-13 13:40:08 发布
阅读量8.2k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxl743p/article/details/39027365
版权

注意：读取时若想下拉框正确显示，必须返回的是key,value值的对象，针对下拉框取值为空的情况，切记要设置上  optionLabel: "请选择"，此项，否则可能取不到值


<asp:Content ID="HeaderContent" ContentPlaceHolderID="head" runat="Server">

    <title></title>
    <link href="../css/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="../css/normal.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../JS/kendo/kendo.web.min.js"></script>
    <style type="text/css">
        ul, li
        {
            margin: 0px 5px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var pageUrl = window.location.href;
            var pageName = pageUrl.split("/");
            if (pageName[3].toLowerCase() == "sysmanage") {
                $('#sysmanage').css({ "background-image": "url(../images/current-bg.gif)", "background-repeat": "repeat-x", "background-position": "top left", "color": "#ffffff" });
            }
        });
    </script>
    <script type="text/x-kendo-template" id="template">
        <div class="buildingTab">
            <ul>
                <li class="k-state-active">
                   建筑物信息
                </li>
            </ul>
        <div>
            <div class="buildingGrid"></div>
        </div>
    </script>
    <script type="text/javascript">

        var sellectedCityID;
        var sellectedBuildingFuncID;
        var sellectedSerialNumber;

        var categories;
        var categoriesFunc;
        var partData; //是甲方还是乙方

        $(document).ready(function () {

            partData = [
                        { IsAOrBWay: "甲方", IsAOrBWayValue: "A" },
                        { IsAOrBWay: "乙方", IsAOrBWayValue: "B" }
                    ];
            bindBuildingFunc();
            Bind();

            $("#btnSelect").click(function () {
                $("#noteGrid").empty();
                Bind();
            });

            $.ajax({
                type: "POST",
                url: "UKeyApplyHasReview.aspx/LoadCityArea",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    categories = jQuery.parseJSON(msg.d);
                }
            });

            $.ajax({
                type: "POST",
                url: "UKeyApplyHasReview.aspx/LoadBuildFunc",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    categoriesFunc = jQuery.parseJSON(msg.d);
                }
            });

            function Bind() {

                var element = $("#noteGrid").kendoGrid({
                    dataSource: {
                        transport: {
                            dataType: "json",
                            read: {
                                type: "POST",
                                url: "UKeyApplyHasReview.aspx/LoadNodeListInfo",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json"
                            },
                            update: {
                                type: "POST",
                                url: "UKeyApplyHasReview.aspx/updateNode",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json"
                            },
                            destroy: {
                                type: "POST",
                                url: "UKeyApplyHasReview.aspx/deleteNode",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                complete: function (e) {
                                    $("#noteGrid").data("kendoGrid").dataSource.read();
                                }
                            },
                            create: {
                                type: "POST",
                                url: "UKeyApplyHasReview.aspx/createNode",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                complete: function (e) {
                                    $("#noteGrid").data("kendoGrid").dataSource.read();
                                }
                            },
                            parameterMap: function (options, operation) {

                                if (operation == "read") {
                                    return "{buildCode:'" + $('#txtBuildCode').val() + "',buildName:'" + $('#txtBuildName').val() + "',nodeId:'" + $('#txtNodeID').val() + "',city:'" + $('#<%=cityname.ClientID %>').val() + "',buildingFuncName:'" + $('#funcname').val() + "',ManufacturerName:'" + $('#<%=applyunit.ClientID %>').val() + "',ISReceive:'" + $('#ddlReceive').val() + "',pageSize:'" + options.pageSize + "',pageIndex:'" + options.page + "'}";
                                }
                                if (operation == "update") {
                                    return "{State:'" + options.State +
                                    "',ManufacturersName:'" + options.ManufacturersName +
                                    "',Remark:'" + options.Remark +
                                    "',BuildAddress:'" + options.BuildAddress +
                                    "',Owners:'" + options.Owners +
                                    "',BuildArea:'" + options.BuildArea +
                                    "',MailAddress:'" + options.MailAddress +
                                    "',consignee:'" + options.consignee +
                                    "',ContactWay:'" + options.ContactWay +
                                     "',IsAOrBInfo:'" + options.IsAOrBInfo.IsAOrBWayValue +
                                    "',NodeID:'" + options.NID +
                                    "'}";
                                }
                                if (operation == "destroy") {
                                    return "{NodeID:'" + options.NID +
                                    "'}";
                                }
                                if (operation == "create") {
                                    return "{BuildingFunc:'" + options.BuildingFuncInfo +
                                    "',NodeName:'" + options.NodeName +
                                    "',BuildAddress:'" + options.BuildAddress +
                                    "',Owners:'" + options.Owners +
                                    "',BuildArea:'" + options.BuildArea +
                                    "',MailAddress:'" + options.MailAddress +
                                    "',consignee:'" + options.consignee +
                                    "',ContactWay:'" + options.ContactWay +
                                     "',IsAOrBInfo:'" + options.IsAOrBInfo +
                                    "',CityID:'" + options.areainfo +
                                    "',State:'" + options.State +
                                    "',ManufacturerName:'" + options.ManufacturersName +
                                      "',Remark:'" + options.Remark +
                                    "'}";
                                }
                            }
                        },
                        pageSize: 13,
                        serverPaging: true,
                        schema: {
                            model: {
                                fields: {
                                    NID: { type: "int", editable: false, nullable: true },
                                    NodeID: { type: "string", editable: false, nullable: true },
                                    NodeName: { type: "string", validation: { required: true} },
                                    areainfo: {},
                                    BuildingFuncInfo: {},
                                    State: { type: "boolean" },
                                    ManufacturersName: { type: "string", validation: { required: true} },
                                    BuildAddress: { type: "string", validation: { required: true} },
                                    Owners: { type: "string", validation: { required: true} },
                                    BuildArea: { type: "float", validation: { required: true} },
                                    MailAddress: { type: "string", validation: { required: true} },
                                    consignee: { type: "string", validation: { required: true} },
                                    ContactWay: { type: "string", validation: { required: true} },
                                    IsAOrBInfo: {},
                                    CreateTime: { editable: false, type: "date" },
                                    Remark: { type: "string" }
                                },
                                id: "NID"
                            },
                            data: "DataList",
                            total: "Count",
                            parse: function (data) {
                                return jQuery.parseJSON(data.d);
                            }
                        }
                    },
                    pageable: true,
                    detailTemplate: kendo.template($("#template").html()),
                    detailInit: detailInits,
                    scrollable: false,

                    columns: [
                    {
                        field: "NID",
                        width: 60,
                        title: "编号"
                    },
                    {
                        field: "NodeID",
                        title: "节点编号"
                    },
                    {
                        field: "NodeName",
                        title: "节点名称",
                        width: 100
                    },
                    {
                        field: "areainfo",
                        title: "所属地市",
                        width: 100,
                        editor: function (container, options) {
                            // create a KendoUI AutoComplete widget as column editor
                            $('<input name="CityName" data-text-field="CityName" data-value-field="CityID" data-bind="value:' + options.field + '"  required="required"/>')
                                .appendTo(container)
                                .kendoComboBox({
                                    dataTextField: "CityName",
                                    dataValueField: "CityID",
                                    dataSource: categories,
                                    filter: "contains",
                                    suggest: true,
                                    optionLabel: "请选择"
                                });
                            $('$<span class="k-invalid-msg" data-for="CityName"></span>').appendTo(container);
                        },
                        template: "#=areainfo.CityName#"
                    },
                    {
                        field: "BuildingFuncInfo",
                        title: "建筑功能",
                        width: 100,
                        editor: function (container, options) {
                            $('<input name="BuildingFuncName" data-text-field="BuildingFuncName" data-value-field="BuildingFunc" data-bind="value:' + options.field + '" required="required"/>')
                                .appendTo(container)
                                .kendoDropDownList({
                                    dataTextField: "BuildingFuncName",
                                    dataValueField: "BuildingFunc",
                                    dataSource: categoriesFunc,
                                    filter: "contains",
                                    suggest: true,
                                    optionLabel: "请选择"
                                });
                            $('$<span class="k-invalid-msg" data-for="BuildingFuncName"></span>').appendTo(container);
                        },
                        template: "#=BuildingFuncInfo.BuildingFuncName#"
                    },
                    {
                        field: "State",
                        template: "#= State ? '是' : '否'#",
                        title: "是否领取"
                    },
                    {
                        field: "ManufacturersName",
                        title: "厂家名称",
                        width: 100
                    },
                     {
                         field: "BuildAddress",
                         title: "建筑地址",
                         width: 100
                     },
                      {
                          field: "Owners",
                          title: "业主",
                          width: 100
                      },
                       {
                           field: "BuildArea",
                           title: "建筑面积",
                           width: 100
                       },
                        {
                            field: "MailAddress",
                            title: "邮寄地址",
                            width: 100
                        },
                         {
                             field: "consignee",
                             title: "收件人",
                             width: 100
                         },
                          {
                              field: "ContactWay",
                              title: "联系方式",
                              width: 80
                          },
                           {
                                field: "IsAOrBInfo",
                               title: "甲方或乙方",
                               width: 80,
                               editor: function (container, options) {
                                   $('<input name="IsAOrBWay" data-text-field="IsAOrBWay" data-value-field="IsAOrBWayValue" data-bind="value:' + options.field + '" required="required"/>')
                                .appendTo(container)
                                .kendoDropDownList({
                                    dataTextField: "IsAOrBWay",
                                    dataValueField: "IsAOrBWayValue",
                                    dataSource: partData,
                                    filter: "contains",
                                    suggest: true,
                                    optionLabel: "请选择"
                                });
                                   $('$<span class="k-invalid-msg" data-for="IsAOrBWay"></span>').appendTo(container);
                               },
                               template: "#=IsAOrBInfo.IsAOrBWay#"

                           },


                    {
                        field: "CreateTime",
                        title: "制作时间",
                        format: "{0:yyyy-MM-dd HH:mm}",
                        width: 100
                    },
                    {
                        field: "Remark",
                        title: "备注",
                        width: 10
                    }

//                    {
//                        title: "&nbsp;", width: "100px",
//                        command: [{ name: "edit", text: "修改" }, { name: "destroy", text: "删除"}],
//                        hidden:true

//                    },

                ],
//                    toolbar: [{ name: "create", text: "添加"}],
//                    editable: "inline"
                });

                var grid = $("#noteGrid").data("kendoGrid");

            }

            function bindBuildingFunc() {
                $.ajax({
                    type: "POST",
                    url: "UKeyApplyHasReview.aspx/LoadBuildFunc2",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#ddlBuildingFunc").kendoDropDownList({
                            dataTextField: "BuildingFuncName",
                            dataValueField: "BuildingFunc",
                            dataSource: jQuery.parseJSON(msg.d),
                            index: 0,
                            change: function () {
                                $("#funcname").val(this.value());
                            }
                        });
                    }
                });
            }
        });




        function detailInits(e) {

            var detailRow = e.detailRow;

            sellectedNodeID = e.data.NID;
            sellectedBuildingFunc = e.data.BuildingFuncInfo.BuildingFunc; //选择的建筑类型
            sellectedCityID = e.data.areainfo.CityID; //选择的城市
            //            sellectedAorB = e.data.IsAOrBInfo.IsAOrBWayValue; //选择的甲方还是乙方

            detailRow.find(".buildingTab").kendoTabStrip({
                animation: {
                    open: { effects: "fadeIn" }
                }
            });

            var buildingGrid = detailRow.find(".buildingGrid").kendoGrid({
                dataSource: {
                    transport: {
                        dataType: "json",
                        read: {
                            type: "POST",
                            url: "UKeyApplyHasReview.aspx/LoadBuildingList",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        update: {
                            type: "POST",
                            url: "UKeyApplyHasReview.aspx/updateBuilding",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        destroy: {
                            type: "POST",
                            url: "UKeyApplyHasReview.aspx/deleteBuilding",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        },
                        create: {
                            type: "POST",
                            url: "UKeyApplyHasReview.aspx/createBuilding",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            complete: function (e) {
                                $(".buildingGrid").data("kendoGrid").dataSource.read();
                            }
                        },
                        parameterMap: function (options, operation) {
                            if (operation == "read") {
                                return "{sellectedNodeID:'" + sellectedNodeID +
                                "'}";
                            }
                            if (operation == "update") {
                                return "{CityID:'" + sellectedCityID +
                                "',BuildingFunc:'" + sellectedBuildingFunc +
                                "',SerialNumber:'" + options.SerialNumber +
                                "',BuildingName:'" + options.BuildingName +
                                "'}";
                            }
                            if (operation == "destroy") {
                                return "{CityID:'" + sellectedCityID +
                                "',BuildingFunc:'" + sellectedBuildingFunc +
                                "',SerialNumber:'" + options.SerialNumber +
                                "'}";
                            }
                            if (operation == "create") {
                                return "{BuildingName:'" + options.BuildingName +
                                "',BuildingFunc:'" + sellectedBuildingFunc +
                                "',CityID:'" + sellectedCityID +
                                "',NodeID:'" + sellectedNodeID +
                                "'}";
                            }
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                BID: { type: "int", editable: false, nullable: true },
                                BuildingID: { type: "string", editable: false, nullable: true },
                                BuildingName: { type: "string", validation: { required: true} }
                            },
                            id: "BID"
                        },
                        data: "DataList",
                        total: "Count",
                        parse: function (data) {
                            return jQuery.parseJSON(data.d);
                        }
                    }
                },

                scrollable: false,
                columns: [
                   { field: "BID", title: "编号", width: 50 },
                   { field: "BuildingID", title: "建筑编号", width: 50 },
                   { field: "BuildingName", title: "建筑名称", width: 50 }
//                   { command: [{ name: "edit", text: "修改" }, { name: "destroy", text: "删除"}], title: "&nbsp;", width: "210px" }
                ],
//                toolbar: [{ name: "create", text: "添加"}],
                editable: "inline"
            });
        }
    </script>
    <style type="text/css">
        .employee-details ul
        {
            list-style: none;
            font-style: italic;
            margin-bottom: 20px;
        }
        
        .employee-details label
        {
            width: 90px;
            font-style: normal;
            font-weight: bold;
        }
    </style>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="Server">
    <%--<div class="nav_title">
        <a href="../Home/Default.aspx"><font color="#0088CC">首页</font></a> >> Ukey管理 </div>--%>
    <div class="ContentMain">
        <div style="width: 1155px; margin: 10px auto;">
            <div>
                <table cellpadding="0" cellspacing="0" border="0" style="width: 80%; margin: 0px auto;">
                    <tr>
                        <td>
                            节点编号：
                        </td>
                        <td>
                            <input type="text" id="txtNodeID" name="txtNodeID" />
                        </td>
                        <td>
                            是否领取
                        </td>
                        <td>
                            <select id="ddlReceive" name="ddlReceive" style="width: 50px">
                                <option value="">全部</option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </td>
                        <td>
                            建筑功能：
                        </td>
                        <td>
                            <select id="ddlBuildingFunc" name="ddlBuildingFunc">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            建筑编码：
                        </td>
                        <td>
                            <input type="text" id="txtBuildCode" name="txtBuildCode" />
                        </td>
                        <td>
                            建筑名称：
                        </td>
                        <td>
                            <input type="text" id="txtBuildName" name="txtBuildName" />
                        </td>
                        <td>
                            <input type="button" id="btnSelect" value="查询" />
                        </td>
                        <td>
                            <asp:Button ID="btnExportExcel" runat="server" Text="导出Excel" OnClick="btnExportExcel_Click" />
                        </td>
                    </tr>
                </table>
            </div>
            <div id="example" class="k-content">
                <div id="noteGrid" style="width: 1155px; margin: 10px auto">
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="funcname" /><!--建筑功能-->
    <input type="hidden" id="cityname" runat="server" />
    <!--所属地市-->
    <input type="hidden" id="applyunit" runat="server" />
    <!--厂家-->
</asp:Content>

侠仪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
KendoUI速查手册--中文
01-23
KendoUI速查手册--中文
Kendo UI Grid示例下载
05-09
Kendo UI的响应式HTML5 Grid组件是完全开箱即用的。Kendo UI Grid为开发者提供了100多种丰富的网格功能，从基本的筛选、排序，到高级的编页、分层数据分组等等。毫不夸张的说，Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实，下面我为大家整理了它的功能特点及在线Demo，以及示例下载大全，欢迎大家试用体验。
kendo ui 示例
07-21
kendo ui 示例，包含各个控件的使用，API，样式文件 kendo ui 示例，包含各个控件的使用，API，样式文件
Kendo UI常见问题
首先你要动手
05-30 1280
1.必输提示错行问题现象: 这种错行问题原因如下:name="programHeaderId"  缺少了name属性,导致提示div无法与其关联.2.Grid第一次进来不查询
Kendo UI Grid 用法详细整理
yzh的博客
12-12 2万+
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，用的更加灵活，加油吧。 知识无极限，与你来相见，欢迎点赞支持！...
KendoUI Row绑定下拉菜单.note有很多类似的地方
火麒马
12-13 228
KendoUI Row绑定下拉菜单.note有很多类似的地方 1、 下面这个是对下拉的时间选择器的触发，只要选择的值改变就触发 <input id="txt_orderDate" data-bind="value: conditionModel.orderDate" /> //只要时间选择器的值有编号就触发change $("#txt_orderDate").kendoDate...
Kendo UI:Grid中单元格为下拉框/时间控件等
sun
11-27 6162
问题 Grid中如何自定义单元格input框的类型，如下拉框，时间控件等？ 解决方案 通过editor选项设置，如下拉框类型（以ComboBox为例） { field: "pageLayoutTemplateId", title: "布局模板*", width: 100,
kendo UI 中实现在grid中实现刷新特定项值的功能
zmjmvp的专栏
06-09 3340
kendo UI 中实现在grid中实现刷新特定项值的功能今天遇到一个需求，在使用kendo ui的系统中在grid行程的表格中通过改变一个项的值同时刷新另一个项的值 听说使用angulas或者vue双项绑定很容易实现？ 但是本人不是专业前端，所以不是很了解， 最后通过kendo ui的api实现的，使用kendo ui 的朋友可以参考下，线上代码 <div id="grid"></div> <sc
kendoComboBox的使用
等花开一起压花路
05-28 4000
&lt;div style="margin-left:60px;"&gt; @Html.TextBoxFor(m =&gt; m.yes, new { @class = "k-textbox" }) &lt;/div&gt;&lt;script&gt; $(document).ready(function () { $("#yes").kendoComboBox({
Kendo UI框架grid的Excel导出功能改进js代码
08-26
Kendo UI框架提供了强大的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据是原始值 ...
Kendo UI for Vue.docx
04-18
帮助文档将指导你为Vue使用Kendo UI本机组件的一种方法是使用NPM和WebPack从头开始创建一个新项目
KendoUI treeList popup 里添加下拉框 DropdownList 只向服务器传ID
蜂蜂的专栏
07-14 1575
基本用法参考官网例子:   http://demos.telerik.com/kendo-ui/grid/editing-custom    发现官网例子有一点不满足我想要的，我类里面 只保存了其他类的ID (暂且叫 BID吧),   下拉框里 需要同时显示，ID 和Text。但是用官网例子以后，新增和修改保存，一直报错，我看到 向后台穿的变成  BID[ID], BID[Text]  这种形式
Kendo-UI学习 数据表格grid属性说明（一）
CNOYG的博客
08-07 1万+
kendoUI-Grid属性说明： allowCopy： Boolean | Object 是否启用表格复制，该属性默认为false,标识禁用复制功能。设置为true时，可以使用鼠标选中需要的表格数据进行复制。 altRowTemplate：String | function 是否启用自定义表格行级样式模版，可以自定义需要显示的表格样式。 autoBind: Boolean 是否启用自动绑定...
KendoUI之Grid的问题详解
热门推荐
再烦，也别忘微笑；再急，也要注意语气；再苦，也别忘坚持。
10-24 2万+
KendoUI之Grid的问题详解 KendoUI之Grid的问题详解 1.kendoLov带出的值出现 null和undefined 2.Grid不可编辑时，设置行背景颜色 3.设置Grid某列的Title样式和列内数据样式 4.修改某个字段之后 点击保存按钮没有任何效果 5.检查Grid行中是否还有数据没有保存 6.检查Grid选中的数据是否有脏数据 7.Grid保存之后自动刷新数据...
kendoUI系列教程之DropDownList下拉菜单
飞鸟的博客
05-25 1万+
DropDownList其实就是select，只有下拉选择。可以把现有的select或者input渲染成下拉菜单：原码打印关于&lt;input id="color" value="1" /&gt;  &lt;select id="size"&gt;      &lt;option&gt;S - 6 3/4"&lt;/option&gt;      &lt;optio
KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
天道酬勤
12-17 9113
1. 应用需求    在权限系统开发中除了以上数据表关系的设计之外，比较麻烦的地方是级联模块在页面的展示，由于设计中最多是控制到三级，因此三级级联模块的展示、编辑等页面操作是需要解决的问题，这里采用KendoUi中的KendoDropDownList来实现，它可以轻松的实现我们想要实现的效果。基本效果图如下： 如上图的关系为：通用支撑子系统（一级）包含：系统管理、用户管理、日志管理（二
利用matlab对am，dsb，ssb，ask，fsk，bpsk信号进行正交调制解调仿真
最新发布
04-18
利用matlab对am，dsb，ssb，ask，fsk，bpsk信号进行正交调制解调仿真，并在不同信噪比条件下对其数字信号进行了误码率的计算。.rar
kendoui下拉框怎么使用
05-05
Kendo UI提供了多种下拉框（ComboBox）控件，包括单选下拉框、多选下拉框、自动完成下拉框等。这里以单选下拉框为例，介绍下使用方法： 1. 引入Kendo UI相关的CSS和JS文件： ```html <link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script> ``` 2. 创建下拉框控件： ```html <select id="dropdownlist"></select> ``` ```javascript $(document).ready(function(){ $("#dropdownlist").kendoDropDownList({ dataTextField: "text", dataValueField: "value", dataSource: [ { text: "Option 1", value: "1" }, { text: "Option 2", value: "2" }, { text: "Option 3", value: "3" } ] }); }); ``` 3. 样式设置： Kendo UI提供了多种主题样式，可以通过添加不同的CSS文件来切换不同的主题。同时，也可以通过设置控件的CSS类名来自定义样式： ```html <select id="dropdownlist" class="my-dropdown"></select> ``` ```css .my-dropdown { width: 200px; height: 30px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; } ``` 以上就是Kendo UI下拉框的基本使用方法。更多的配置选项可以参考Kendo UI的官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值