Kendo UI之ComboBox下拉列表 |
您所在的位置：网站首页 › combobox选项 › Kendo UI之ComboBox下拉列表 |
Kendo UI之ComboBox下拉列表
|
文章目录
前言ComboBox下拉列表ComboBox配置项🚂动画 animation🚃自动绑定数据 autoBind🚄上级关联 cascadeForm🚅数据源 dataSource🚆文本字段 dataTextField🚇值字段 dataValueField🚈延时显示时间 delay🚉是否可用 enable🚊过滤规则 filter🚝过滤规则忽略大小写 ignoreCase🚞下拉列表高度 height🚋下拉列表第一个自动高亮 highlightFirst🚌最小长度minLength🚍占位符 placeholder🚎自动填充 suggest🚐模板template🚑绑定原始值 valuePrimitive🚒默认索引值 index🚓默认文本 text🚔设置值 value
ComboBox其它操作数据源操作 dataSource选项集 options列表集 list列表 ul输入框 input
前言
本文转载自http://www.scscms.com/html/article/20131029-combobox.html 在原文基础上做了部分修改。 ComboBox下拉列表ComboBox下拉列表是AutoComplete自动补齐和DropDownList 下拉框的综合体，它即可以下拉选择，也可以输入后自动匹配。下面是一个代码完整的示例： Kendo UI combobox View Order Details Categories: Products: Orders: View Order $(document).ready(function () { // 分类的本地数据源 var categoryData = [ { CategoryName: "水果", CategoryID: 1 }, { CategoryName: "蔬菜", CategoryID: 2 }, { CategoryName: "电子产品", CategoryID: 3 } ]; var categoryDs = new kendo.data.DataSource({ data: categoryData }); // 分类下拉框初始化 var categories = $("#categories").kendoComboBox({ filter: "contains", placeholder: "Select category...", dataTextField: "CategoryName", dataValueField: "CategoryID", dataSource: categoryDs }).data("kendoComboBox"); // 产品的本地数据源 var productData = [ { ProductName: "苹果", ProductID: 1, CategoryID: 1 }, { ProductName: "香蕉", ProductID: 2, CategoryID: 1 }, { ProductName: "西红柿", ProductID: 3, CategoryID: 2 }, { ProductName: "菠菜", ProductID: 4, CategoryID: 2 }, { ProductName: "手机", ProductID: 5, CategoryID: 3 }, { ProductName: "电脑", ProductID: 6, CategoryID: 3 } ]; var productDs = new kendo.data.DataSource({ data: productData }); // 产品下拉框初始化 var products = $("#products").kendoComboBox({ autoBind: false, cascadeFrom: "categories", filter: "contains", placeholder: "Select product...", dataTextField: "ProductName", dataValueField: "ProductID", dataSource: productDs }).data("kendoComboBox"); // 订单本地数据源 var orderData = [ { ShipCity: "北京", OrderID: 1, ProductID: 1 }, { ShipCity: "上海", OrderID: 2, ProductID: 1 }, { ShipCity: "西安", OrderID: 3, ProductID: 2 }, { ShipCity: "天津", OrderID: 4, ProductID: 2 }, { ShipCity: "广州", OrderID: 5, ProductID: 3 }, { ShipCity: "新疆", OrderID: 6, ProductID: 3 }, { ShipCity: "太原", OrderID: 7, ProductID: 4 }, { ShipCity: "内蒙", OrderID: 8, ProductID: 4 }, { ShipCity: "青岛", OrderID: 9, ProductID: 5 }, { ShipCity: "广西", OrderID: 10, ProductID: 5 }, { ShipCity: "甘肃", OrderID: 11, ProductID: 6 }, { ShipCity: "四川", OrderID: 12, ProductID: 6 } ]; var orderDs = new kendo.data.DataSource({ data: orderData }); // 订单下拉框初始化 var orders = $("#orders").kendoComboBox({ autoBind: false, cascadeFrom: "products", filter: "contains", placeholder: "Select order...", dataTextField: "ShipCity", dataValueField: "OrderID", dataSource: orderDs }).data("kendoComboBox"); $("#get").click(function () { var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }", productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }", orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }"; alert("Order details:\n" + categoryInfo + productInfo + orderInfo); }); }); 运行效果如下图所示： ComboBox的配置项有： 🚂动画 animation🚃自动绑定数据 autoBind🚄上级关联 cascadeForm🚅数据源 dataSource🚆文本字段 dataTextField🚇值字段 dataValueField🚈延时显示时间 delay🚉是否可用 enable🚊过滤规则 filter🚝过滤规则忽略大小写 ignoreCase🚞下拉列表高度 height🚋下拉列表第一个自动高亮 highlightFirst🚌最小长度minLength🚍占位符 placeholder🚎自动填充 suggest🚐模板template🚑绑定原始值 valuePrimitive🚒默认索引值 index🚓默认文本 Text🚔设置值 value 🚂动画 animation$("#combobox").kendoComboBox({ animation: { close: { effects: "fadeOut zoom:out", // 持续时间，单位毫秒 duration: 300 }, open: { effects: "fadeIn zoom:in", duration: 300 } } }); 🚃自动绑定数据 autoBind$("#combobox").kendoComboBox({ autoBind: false }); 🚄上级关联 cascadeForm$("#parent").kendoComboBox({ dataTextField: "parentName", dataValueField: "parentId", dataSource: [ { parentName: "Parent1", parentId: 1 }, { parentName: "Parent2", parentId: 2 } ] }); $("#child").kendoComboBox({ cascadeFrom: "parent",//关联id=parent 的下拉框 dataTextField: "childName", dataValueField: "childId", dataSource: [ { childName: "Child1", childId: 1, parentId: 1 }, { childName: "Child2", childId: 2, parentId: 2 }, { childName: "Child3", childId: 3, parentId: 1 }, { childName: "Child4", childId: 4, parentId: 2 } ] }); 🚅数据源 dataSourcedata: ["One", "Two"] } }); //kendo的数据源 var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } }); $("#id").kendoComboBox({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" }); 🚆文本字段 dataTextFieldName: "Parent1", Id: 1 }, { Name: "Parent2", Id: 2 } ], dataTextField: "Name", dataValueField: "Id" }); 🚈延时显示时间 delay$("#combobox").kendoComboBox({ delay: 500 }); 🚉是否可用 enable$("#combobox").kendoComboBox({ enable: false }); 🚊过滤规则 filter$("#combobox").kendoComboBox({ filter: "contains" }); 🚝过滤规则忽略大小写 ignoreCase$("#combobox").kendoComboBox({ ignoreCase: false }); 🚞下拉列表高度 height$("#combobox").kendoComboBox({ height: 500 }); 🚋下拉列表第一个自动高亮 highlightFirst$("#combobox").kendoComboBox({ highlightFirst: false }); 🚌最小长度minLength$("#combobox").kendoComboBox({ minLength: 3 }); 🚍占位符 placeholder$("#combobox").kendoComboBox({ placeholder: "Enter value ..." }); 🚎自动填充 suggest$("#combobox").kendoComboBox({ suggest: true }); 🚐模板template
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
template: kendo.template($("#template").html())
});
$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
template: ' Kendo UI combobox 提交 【动态展示】 comboBox.options.valuePrimitive = true表示使用简单的value，false表示使用复杂形式的value viewModel.v = 每次点击提交，即可查看请求参数： $("#combobox").kendoComboBox({ // 这里的true和false要手动改 valuePrimitive: false, dataTextField: "name", dataValueField: "id" }); var comboBox = $("#combobox").data("kendoComboBox"); console.log("comboBox =>"); console.log(comboBox); var viewModel = kendo.observable({ v: null, req: null, btn: function () { this.set("req", $("#myform").serialize()); console.log("viewModel.v =>"); console.log(viewModel.v); }, primitive: comboBox.options.valuePrimitive, products: [{ id: 1, name: "Coffee" }, { id: 2, name: "Tea" }, { id: 3, name: "Juice" } ] }); kendo.bind($("#combobox"), viewModel); kendo.bind($("span"), viewModel); kendo.bind($("#form_btn"), viewModel); 运行效果如下图所示： var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }]; $("#combobox").kendoComboBox({ dataTextField: "text", dataValueField: "value", dataSource: items, index: 1//默认选中{ text: "Item 2", value: "2" } }); 🚓默认文本 text$("#combobox").kendoComboBox({ autoBind: false, text: "Chai" }); 🚔设置值 value$("#combobox").kendoComboBox({ dataSource: ["Item1", "Item2"], value: "Item1" }); ComboBox其它操作 数据源操作 dataSource 通过它可操作数据项。代码片断如下： $("#combobox").kendoComboBox({ dataSource: [ { name: "Apples" }, { name: "Oranges" } ], dataTextField: "name", dataValueField: "name" }); var combobox = $("#combobox").data("kendoComboBox"); combobox.dataSource.add({ name: "Appricot" }); combobox.search("A"); 选项集 options获取选项集对象。代码片断如下： $("#combobox").kendoComboBox(); var combobox = $("#combobox").data("kendoComboBox"); var options = combobox.options; 列表集 list获取下拉列表jquery对象。代码片断如下： $("#combobox").kendoComboBox(); var combobox = $("#combobox").data("kendoComboBox"); var list = combobox.list; 列表 ul获取下拉列表父框架ul的jquery对象。代码片断如下： $("#combobox").kendoComboBox(); var combobox = $("#combobox").data("kendoComboBox"); var ul = combobox.ul; 输入框 input获取下拉列框inputl的jquery对象。代码片断如下： $("#combobox").kendoComboBox(); var combobox = $("#combobox").data("kendoComboBox"); var input = combobox.input; |
#: name #'
});
【本文地址】
今日新闻 |
推荐新闻 |