在使用easyul的时候,发现输入框内容及不容易获取与设置,用jQuery的方式大部分失效。依稀记得好像是因为easyul会在原页面的基础上,生成了一些新的独有样式,并且暂时覆盖掉使用了easyul的标签块。  具体我也忘记了,反正知道有这么会事就可以啦,

--输入框

$("#xx").textbox('setValue','value');  //设置输入框的值

$('#xx').textbox('textbox').attr('readonly',true);  //设置输入框为禁用

--下拉框相关

$("#xx").combobox({disabled: true});      //设置下拉款为禁用

$("#xx").combobox('setValue',xlid);  //设置下拉款的默认值  xlid是你下拉款的id属性

$("#xx").combobox('getValue');      //获取下拉款id值

$("#xx").combobox('getText');      //获取下拉款name值

EasyUI Combobox 组合框

扩展自 $.fn.combo.defaults。通过 $.fn.combobox.defaults 重写默认的 defaults。

组合框(combobox)显示一个可编辑的文本框和下拉列表,用户可以从下拉列表中选择一个或多个值。用户可以直接输入文本到列表的顶部,或者从列表中选择一个或多个现成的值。

依赖

  • combo

用法

从带有预定义结构的 <select> 元素创建组合框(combobox)。

  1. <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
  2. <option value="aa">aitem1</option>
  3. <option>bitem2</option>
  4. <option>bitem3</option>
  5. <option>ditem4</option>
  6. <option>eitem5</option>
  7. </select>

从 <input> 标记创建组合框(combobox)。

  1. <input id="cc" class="easyui-combobox" name="dept"
  2. data-options="valueField:'id',textField:'text',url:'get_data.php'">

使用 javascript 创建组合框(combobox)。

  1. <input id="cc" name="dept" value="aa">
  1. $('#cc').combobox({
  2. url:'combobox_data.json',
  3. valueField:'id',
  4. textField:'text'
  5. });

创建两个依赖的组合框(combobox)。

  1. <input id="cc1" class="easyui-combobox" data-options="
  2. valueField: 'id',
  3. textField: 'text',
  4. url: 'get_data1.php',
  5. onSelect: function(rec){
  6. var url = 'get_data2.php?id='+rec.id;
  7. $('#cc2').combobox('reload', url);
  8. }">
  9. <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'">

json 数据格式的示例:

  1. [{
  2. "id":1,
  3. "text":"text1"
  4. },{
  5. "id":2,
  6. "text":"text2"
  7. },{
  8. "id":3,
  9. "text":"text3",
  10. "selected":true
  11. },{
  12. "id":4,
  13. "text":"text4"
  14. },{
  15. "id":5,
  16. "text":"text5"
  17. }]

属性

该属性扩展自组合(combo),下面是为组合框(combobox)添加的属性。

名称 类型 描述 默认值
valueField string 绑定到该组合框(ComboBox)的 value 上的基础数据的名称。 value
textField string 绑定到该组合框(ComboBox)的 text 上的基础数据的名称。 text
groupField string 指示要被分组的字段。该属性自版本 1.3.4 起可用。 null
groupFormatter function(group) 返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
代码实例:
  1. $('#cc').combobox({
  2. groupFormatter: function(group){
  3. return '<span style="color:red">' + group + '</span>';
  4. }
  5. });
 
mode string 定义在文本改变时如何加载列表数据。如果组合框(combobox)从服务器加载就设置为 'remote'。当设置为 'remote' 模式时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。 local
url string 从远程加载列表数据的 URL 。 null
method string 用来检索数据的 http 方法。 post
data array 被加载的列表数据。
代码实例:
  1. <input class="easyui-combobox" data-options="
  2. valueField: 'label',
  3. textField: 'value',
  4. data: [{
  5. label: 'java',
  6. value: 'Java'
  7. },{
  8. label: 'perl',
  9. value: 'Perl'
  10. },{
  11. label: 'ruby',
  12. value: 'Ruby'
  13. }]" />
null
filter function 定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数:
q:用户输入的文本。
row:列表中的行数据。
返回 true 则允许显示该行。

代码实例:

  1. $('#cc').combobox({
  2. filter: function(q, row){
  3. var opts = $(this).combobox('options');
  4. return row[opts.textField].indexOf(q) == 0;
  5. }
  6. });
 
formatter function 定义如何呈现行。该函数有一个参数:row。
代码实例:
  1. $('#cc').combobox({
  2. formatter: function(row){
  3. var opts = $(this).combobox('options');
  4. return row[opts.textField];
  5. }
  6. });
 
loader function(param,success,error) 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
param:要传到远程服务器的参数对象。
success(data):当获取数据成功时将被调用的回调函数。
error():当获取数据失败时将被调用的回调函数。
json loader
loadFilter function(data) 返回要显示的过滤数据。该属性自版本 1.3.3 起可用。  

事件

该事件扩展自组合(combo),下面是为组合框(combobox)添加的事件。

名称 参数 描述
onBeforeLoad param 在请求加载数据之前触发,返回 false 则取消加载动作。
代码实例:
  1. // change the http request parameters before load data from server
  2. $('#cc').combobox({
  3. onBeforeLoad: function(param){
  4. param.id = 2;
  5. param.language = 'js';
  6. }
  7. });
onLoadSuccess none 当远程数据加载成功时触发。
onLoadError none 当远程数据加载失败时触发。
onSelect record 当用户选择一个列表项时触发。
onUnselect record 当用户取消选择一个列表项时触发。

方法

该方法扩展自组合(combo),下面是为组合框(combobox)添加或重写的方法。

名称 参数 描述
options none 返回选项(options)对象。
getData none 返回加载的数据。
loadData data 加载本地列表数据。
reload url 请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。
代码实例:
  1. $('#cc').combobox('reload'); // reload list data using old URL
  2. $('#cc').combobox('reload','get_data.php'); // reload list data using new URL
setValues values 设置组合框(combobox)值的数组。
代码实例:
  1. $('#cc').combobox('setValues', ['001','002']);
setValue value 设置组合框(combobox)的值。
代码实例:
  1. $('#cc').combobox('setValue', '001');
clear none 清除组合框(combobox)的值。
select value 选择指定的选项。
unselect value 取消选择指定的选项。

easyui textbox 设置只读不可编辑状态的更多相关文章

  1. easyui textbox combobox 设置只读不可编辑状态

    输入框 textbox $("#xx").textbox('setValue','value');  //设置输入框的值 $('#xx').textbox('textbox').a ...

  2. winform的Textbox设置只读之后ForeColor无效的解决方法

    winform的Textbox设置只读之后ForeColor无效. 通过以下方法就可以解决: 设置为只读之后,把BackColor改一下,然后运行一下窗口,再设置ForeColor就没问题了. tbT ...

  3. winform的Textbox设置只读之后使用ForeColor更改颜色

    winform的Textbox设置只读之后设置ForeColor更改颜色无效.这是 TextBox 默认的行为. 解决方法:设置为只读之后,修改控件的BackColor,再设置ForeColor就可以 ...

  4. Easyui 设置datagrid 进入编辑状态,保存结束编辑

    在datagrid中如何实现让一行进入编辑状态,修改数据后,保存信息呢? //点击列表变成文本框,进入可编辑状态 $(function () { var doc = $(document), tabl ...

  5. asp.Net2.0中TextBox设置只读后后台获取不到值的解决方法

    http://www.cnblogs.com/yxyht/archive/2013/03/02/2939883.html   ASP.NET中TextBox控件设置ReadOnly="tru ...

  6. Java中如何设置表格处于不可编辑状态

    代码片段如下: 这样的话就可以将表格设置为不可编辑状态

  7. jqgrid 批量启动所有行为可编辑状态

    有时,为操作方便,需要将jqgrid表格设置为一直处于编辑状态,用户只需要在对应的编辑区填写自己信息,不再频繁的去触发行编辑和保存. 参考代码如下: //$gridCase为传入jqgrid对象 fu ...

  8. easyui 在编辑状态下,动态修改其他列值。

    首先是自定义了一个方法uodateColumn更新列值 /** *自定义的修改列值方法 */ $.extend($.fn.datagrid.methods, { updateColumn: funct ...

  9. EasyUI datebox 设置不可编辑后再次修改为可编辑失效的解决

    工作中遇到的问题,折腾了好久: 如下图: 需求:当状态发生改变后,如果状态是未核实 ,  核实人 核实时间 核实结果 核实说明  均为不可编辑状态 具体js代码如下: //状态改变    $('#js ...

随机推荐

  1. bootstrap-table 父子表入门篇

    官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#多语言 一.引入js.css <!-- 引入bootstrap ...

  2. web打印详解

    在B/S模式开发中,打印是个很大的困扰.无论是采用页面直接输出或者引用WORD.DLL也好,都有不足之处. 目前最好的办法就是采用第三方控件,网上流传的打印控件有很多.总结了下推荐几个给大家: 一.首 ...

  3. CodeForces 620E:New Year Tree(dfs序+线段树)

    E. New Year Treetime limit per test3 secondsmemory limit per test256 megabytesinputstandard inputout ...

  4. [转载]linux内核中的HZ介绍

    时钟中断由系统定时硬件以周期性的间隔产生,这个间隔由内核根据 HZ 值来设定,HZ 是一个体系依赖的值,在 <Linux/param.h>中定义或该文件包含的某个子平台相关文件中.作为通用 ...

  5. Zookeeper学习(八):Zookeeper的数据发布与订阅模式

     http://blog.csdn.net/ZuoAnYinXiang/article/category/6104448 1.发布订阅的基本概念        1.发布订阅模式可以看成一对多的关系:多 ...

  6. HTTP-Runoob:HTTP简介

    ylbtech-HTTP-Runoob:HTTP简介 1.返回顶部 1. HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网 ...

  7. java集合类(2)

    java集合的主要分为三种类型:JAVA集合位于 java.util包 Set(集) List(列表) Map(映射) arrays函数, equals():比较两个array是否相等. fill() ...

  8. 第一章 深入Web请求过程(待续)

    B/S网络架构概述 如何发起一个请求 HTTP解析 DNS域名解析 CDN工作机制

  9. svn 撤销修改

    1,更新到最新版本 不知道是哪个文件的问题时,可以svn log查看日志,基本上可以通过哪一次提交修改了哪一个文件推算出 是哪个文件的问题. 若知道是哪个文件的问题,直接svn log 文件名 大致确 ...

  10. python 三元表达式、列表推导式、生成器表达式

    一 三元表达式.列表推导式.生成器表达式 一 三元表达式 name=input('姓名>>: ') res='mm' if name == 'hahah' else 'NB' print( ...