kendo UI gridview绑定下拉框示例

最新推荐文章于 2020-04-03 00:09:48 发布
最新推荐文章于 2020-04-03 00:09:48 发布
阅读量8.3k 收藏 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>

侠仪
关注
专栏目录
Kendo UI:Grid中单元格为下拉框/时间控件等
sun
11-27 6251
问题 Grid中如何自定义单元格input框的类型，如下拉框，时间控件等？ 解决方案 通过editor选项设置，如下拉框类型（以ComboBox为例） { field: "pageLayoutTemplateId", title: "布局模板*", width: 100,
KendoUI Row绑定下拉菜单.note有很多类似的地方
火麒马
12-13 265
KendoUI Row绑定下拉菜单.note有很多类似的地方 1、 下面这个是对下拉的时间选择器的触发，只要选择的值改变就触发 <input id="txt_orderDate" data-bind="value: conditionModel.orderDate" /> //只要时间选择器的值有编号就触发change $("#txt_orderDate").kendoDate...
KendoUI Row绑定下拉菜单
weixin_30466421的博客
07-27 165
$("#SalleGrid").kendoGrid({ dataSource: { transport: { read: { dateType: 'application/json', url: '/SalesTicket/Sing...
Telerik Kendo UI 那点事【3】GridView MVVM前后台联动服务端分页、分组、过滤（查询）、排序
蓝星极盾
09-25 1万+
中文化之后，我们开始具体使用kendo ui组件。经常开发系统的我，通常从最常用的控件用起，那就是表格控件GridView！现在的软件系统基本上就是标签框、文本框、选择框、树、表格堆砌而成。因此接触任何一种UI组件的时候，我通常都最为关注GridView，表格控件。小小的表格控件，做的好，能够给前端呈现和使用带来很好的感受的同时，还能够大幅度降低开发的工作量。 Kendo UI在这方面让我十分满
kendoUI下拉框
Chenzhangjing66的博客
05-22 5271
kendoUI下拉框之固定值选项： 在$("#demo_grid").kendoGrid的columns中设置属性“isEnable”是固定值为“Yes”/“No”的下拉列表:     { field: "isEnable",      /*title: "",此处标题设置国际化*/ title: "isEnable",     attributes: {style: "font-si
Kendo UI Grid 用法详细整理
热门推荐
yzh的博客
12-12 3万+
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，用的更加灵活，加油吧。 知识无极限，与你来相见，欢迎点赞支持！...
Kendo UI for jQuery 2023.1.117 (Win)
04-12
完整的组件集合使公司名称为Telerik DevCraft，并且与HTML5相关的组件的名称为Kendo UI供应时间。 还有，Telerik Platform标题，即与移动设备行业有关的常规组件。该模块化平台将一系列丰富的UI工具与强大的云服务...
kendo ui 示例
07-21
在"Kendo UI 示例"这个压缩包中，我们可以找到关于如何使用Kendo UI的各种资源。 1. **控件的使用**：Kendo UI 提供了多种控件，如 Grid、Calendar、DropdownList、DatePicker、TimePicker、TreeView、Pager 等。...
KendoUI速查手册--中文
01-23
Kendo UI 针对 ASP.NET MVC 和 AngularJS 提供了特定的绑定和指令，使得在这些平台上使用 Kendo UI 更加顺畅。 五、主题与自定义样式 Kendo UI 提供了几种预设的主题，如 Bootstrap、Metro、Flat 等，同时也支持...
kendoui.for.jquery.2018.3.911.commercial
09-19
安装后，开发者可以获得完整的文档、示例代码和调试工具，以便于在项目中快速集成和调试Kendo UI组件。 总的来说，Kendo UI for jQuery 2018 R3为.NET开发者提供了一站式的前端解决方案，集成了丰富的组件、数据...
Kendo Grid复选框实现多选
Nemo的笔记本
04-12 6637
Kendo Grid多选框实现：多选，选中行变色，再次点击取消变色和选中如下图：首先是绑定多选框的代码：.ClientTemplate(@"&lt;input type='checkbox' value='#=PRODUCT_ID#' name = 'checkBox' onclick='SelectProduct();' /&gt;").Width(40););同时绑定点击事件.Even...
KendoUI Grid 增删改查功能 前台+后台
℡メ㏑╭ァ小凯
04-03 663
自己做记录的 效果图 核心后台：查询+分页用，其他的返回常规做就行了 分页代码 /// <returns></returns> @RequestMapping(value="/ajaxxmJbxxList",produces = "application/json;charset=UTF-8") @ResponseBody public String ...
Kendo-UI学习 数据表格grid属性说明（一）
CNOYG的博客
08-07 1万+
kendoUI-Grid属性说明： allowCopy： Boolean | Object 是否启用表格复制，该属性默认为false,标识禁用复制功能。设置为true时，可以使用鼠标选中需要的表格数据进行复制。 altRowTemplate：String | function 是否启用自定义表格行级样式模版，可以自定义需要显示的表格样式。 autoBind: Boolean 是否启用自动绑定...
KendoUI框架的多种下拉进行触发
火麒马
12-13 507
1、 下面这个是对下拉的时间选择器的触发，只要选择的值改变就触发 <input id="txt_orderDate" data-bind="value: conditionModel.orderDate" /> //只要时间选择器的日期有改动就触发change $("#txt_orderDate").kendoDatePicker({ value...
KendoUI 在线编辑多级联动
℡メ㏑╭ァ小凯
03-19 744
以下代码是7级联动效果 代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib pr...
KendoUI Grid使用中，在列宽超出屏幕无数据下显示滚动条
CNOYG的博客
05-14 3758
KendoUI Grid使用中，在列宽超出屏幕无数据下显示滚动条 kendoGrid 在使用中显示的列比较多，在这种情况下，设置column属性width如： { title: "序号", filterable: false, width: "50px", at...
Kendo UI常见问题
首先你要动手
05-30 1315
1.必输提示错行问题现象: 这种错行问题原因如下:name="programHeaderId"  缺少了name属性,导致提示div无法与其关联.2.Grid第一次进来不查询
kendo grid dropdownlist 联动 cascading
weixin_30700977的博客
02-01 240
之前是无法联动的 后来将html页面中的 //$('<input required data-text-field="CompanyName" data-value-field="CompanyId" data-bind="value:' + options.field + '" />') 修改成 var input = $('...
KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
天道酬勤
12-17 9234
1. 应用需求    在权限系统开发中除了以上数据表关系的设计之外，比较麻烦的地方是级联模块在页面的展示，由于设计中最多是控制到三级，因此三级级联模块的展示、编辑等页面操作是需要解决的问题，这里采用KendoUi中的KendoDropDownList来实现，它可以轻松的实现我们想要实现的效果。基本效果图如下： 如上图的关系为：通用支撑子系统（一级）包含：系统管理、用户管理、日志管理（二
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、付费专栏及课程。

余额充值