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

在使用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)添加的属性。

名称类型描述默认值
valueFieldstring绑定到该组合框(ComboBox)的 value 上的基础数据的名称。value
textFieldstring绑定到该组合框(ComboBox)的 text 上的基础数据的名称。text
groupFieldstring指示要被分组的字段。该属性自版本 1.3.4 起可用。null
groupFormatterfunction(group)返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。
代码实例:
  1. $('#cc').combobox({
  2. groupFormatter: function(group){
  3. return '<span style="color:red">' + group + '</span>';
  4. }
  5. });
 
modestring定义在文本改变时如何加载列表数据。如果组合框(combobox)从服务器加载就设置为 'remote'。当设置为 'remote' 模式时,用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器,以获取新的数据。local
urlstring从远程加载列表数据的 URL 。null
methodstring用来检索数据的 http 方法。post
dataarray被加载的列表数据。
代码实例:
  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
filterfunction定义当 '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. });
 
formatterfunction定义如何呈现行。该函数有一个参数:row。
代码实例:
  1. $('#cc').combobox({
  2. formatter: function(row){
  3. var opts = $(this).combobox('options');
  4. return row[opts.textField];
  5. }
  6. });
 
loaderfunction(param,success,error)定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
param:要传到远程服务器的参数对象。
success(data):当获取数据成功时将被调用的回调函数。
error():当获取数据失败时将被调用的回调函数。
json loader
loadFilterfunction(data)返回要显示的过滤数据。该属性自版本 1.3.3 起可用。 

事件

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

名称参数描述
onBeforeLoadparam在请求加载数据之前触发,返回 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. });
onLoadSuccessnone当远程数据加载成功时触发。
onLoadErrornone当远程数据加载失败时触发。
onSelectrecord当用户选择一个列表项时触发。
onUnselectrecord当用户取消选择一个列表项时触发。

方法

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

名称参数描述
optionsnone返回选项(options)对象。
getDatanone返回加载的数据。
loadDatadata加载本地列表数据。
reloadurl请求远程的列表数据。传 '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
setValuesvalues设置组合框(combobox)值的数组。
代码实例:
  1. $('#cc').combobox('setValues', ['001','002']);
setValuevalue设置组合框(combobox)的值。
代码实例:
  1. $('#cc').combobox('setValue', '001');
clearnone清除组合框(combobox)的值。
selectvalue选择指定的选项。
unselectvalue取消选择指定的选项。

转载于:https://www.cnblogs.com/lacey/p/7118105.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值