`
stworthy
  • 浏览: 525582 次
  • 来自: ...
社区版块
存档分类
最新评论

jquery-easyui中自定义下拉框列表项格式

阅读更多

下拉框的列表项一般为一行文本,但实际上可以是任何HTML,所以可以轻易地定义列表项的格式,做为例子,我们来显示带图标的列表项,效果图如下:

利用formatter函数可以做到这一点,代码如下:

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text',
    formatter:function(row){
        return '<img class="item-img" src="'+row.icon+'"/><div class="item-text">'+row.text+'</div>';
    }
});

原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:form4

 

分享到:
评论
2 楼 lgstarzkhl 2010-08-31  
这个应该挺好弄的吧
1 楼 joyfun 2010-08-25  
呵呵 之前已经用上了 主要是通过formatter 变换颜色和加URL

相关推荐

    jquery-easyui-1.3.3-api.rar

    《jQuery EasyUI 1.3.3 API详解》 jQuery EasyUI 是一款基于 jQuery 的前端框架,它提供了丰富的用户界面组件,使得开发者可以快速构建出美观且功能强大的Web应用。这个压缩包“jquery-easyui-1.3.3-api.rar”包含...

    jQuery+easyui中的combobox实现下拉框特效

    本篇文章将详细介绍如何在jQuery+EasyUI中使用Combobox实现下拉框特效。 首先,我们来看第一种实现方法。在HTML代码中,我们可以创建一个具有`easyui-combobox`类的`&lt;input&gt;`元素,并通过`data-options`属性设置其...

    jquery-easyui:里面源码由easyui官网下载http

    源码中处理了下拉列表的显示隐藏、选中项的同步等逻辑,开发者可以通过数据源绑定,实现动态加载选项。 四、自定义与扩展 源码阅读有助于理解组件的工作原理,进而实现自定义功能。开发者可以通过修改样式文件,...

    jquery_easyui_中文解析

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个框架将复杂的HTML、CSS和JavaScript代码封装成简单易用的API,使得开发者可以更专注于业务逻辑,而...

    jquery_easyui 很全面中文文档

    - **使用场景**: 用于选择列表中的项,同时允许用户手动输入。 ##### 2.12 Combotree 组合树形框 - **特点**: 结合了树形结构和下拉列表的功能。 - **使用场景**: 适用于需要从具有层级关系的选项中选择的场景。 #...

    李炎恢jQuery EasyUI讲义代码

    “第22章 Combo(自定义下拉框)组件”和“第33章 Combobox(下拉列表框)组件”是输入控件的重要补充,它们提供了一种更高效的选择数据方式。Combo可以自定义下拉内容,而Combobox则是预设选项的下拉框,常用于表单中的...

    第22章 Combo(自定义下拉框)组件1

    在本章的学习中,我们将深入理解EasyUI中的Combo(自定义下拉框)组件,这是一个在Web开发中常用于提供用户选择项的交互元素。Combo组件不仅提供了基本的下拉选项,还可以根据需求进行定制,比如添加图片、文本或者...

    easyUI和zTree的结合使用

    6. **交互整合**:将zTree与EasyUI的其他组件进行交互,例如,当用户选择某个节点时,可以在EasyUI的表格或下拉框中显示相关数据,或者在EasyUI的对话框中展示详细信息。 在提供的`JQuery zTree v2.6`和`jquery-...

    jquery easyui

    11. **easyui-combobox (组合下拉框)**:`easyui-combobox` 是一个带下拉列表的输入框,可以用来选择预定义的选项,同时允许用户输入自定义值。 12. **easyui-combotree (组合树形框)**:`easyui-combotree` 结合了...

    jQuery扁平化风格下拉框美化插件

    总的来说,FancySelect是一个为追求美观和用户体验的开发者量身打造的jQuery下拉框美化插件,其简洁的代码和丰富的自定义选项使得在实际项目中集成变得简单而高效。结合合理的HTML结构和CSS样式,开发者可以轻松打造...

    jquery easyui 详细说明文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个框架基于轻量级的 jQuery 库,通过扩展各种UI元素,为Web应用程序提供了丰富的交互性和视觉效果。...

    easyui中文帮助文档

    `easyui-combobox` 是一个组合输入框和下拉列表的组件,用户可以在输入框中输入文本,也可以从下拉列表中选择一个值。 12. **easyui-combotree (组合树形框)** `easyui-combotree` 将下拉列表扩展为树形结构,...

    select下拉滚动条

    jQuery EasyUI是一个基于jQuery的UI库,它提供了一系列预定义的组件,包括下拉列表。引入EasyUI库后,可以将`&lt;select&gt;`转换为更丰富的下拉列表组件,如combobox: ```html &lt;link rel="stylesheet" href="jquery-...

    easyui_开发文档,自己总结

    - 自定义格式:可以自定义下拉框中每个选项的显示样式。 11. **下拉表格组件** - 基本下拉表格:在下拉框中展示表格数据,用户可以筛选和选择。 - 为下拉表格赋初值:可以预先加载一些表格数据。 这些组件在...

    jQuery EasyUI v1.3.5官方API中文版

    在jQuery EasyUI v1.3.5的官方API中文版中,我们可以找到关于各个组件的详细说明和使用方法。以下是一些关键的知识点: 1. **基础组件**:jQuery EasyUI提供了如对话框(dialog)、面板(panel)、表单(form)、...

    easyui-1.4

    EasyUI 将常见的 UI 控件如表格、下拉框、按钮、对话框等进行了封装,大大减轻了开发者的工作负担,让他们可以专注于业务逻辑而不是界面实现。 在 EasyUI 1.4 版本中,主要包括以下几个核心知识点: 1. **jQuery ...

    jQuery插件

    jQuery插件是JavaScript库jQuery生态系统中的重要组成部分,它们极大地扩展了jQuery的核心功能,为开发者提供了丰富的用户界面组件和交互效果。这些插件通常由社区成员或公司开发,以满足特定的网页开发需求,如表格...

    easyui1.4中文文档

    EasyUI 是一个基于 jQuery 的轻量级前端框架,主要用于构建用户界面。它的1.4版本中文文档包含了关于如何使用EasyUI的各种详细信息,包括组件、API、示例和最佳实践。下面将对EasyUI 1.4的重要知识点进行详细介绍。 ...

    easyui api示例教程

    3. **ComboBox**:下拉框组件提供了下拉列表的选择功能,可与后台数据绑定。你可以设置 `url` 来异步加载选项,使用 `onChange` 事件处理选择变化,以及 `valueField` 和 `textField` 分别指定值和显示文本的字段。 ...

Global site tag (gtag.js) - Google Analytics