easyui下拉列表框

编程语言 2018-05-11 23:00:00 阅读次数: 1

使用jquery easyui的下拉列表combobox碰上问题，下拉列表的项都是从
数据库读出来的，然后我想在动态生成的项中添加一项："<option value=''>=全部=</option>"。
但怎么也添加不成功。

首先试了直接用jquery对该下拉列表进行添加操作：
$('#selUnin').combobox({

        url: _callback_url + '&action=getUnin',

        valueField: 'id',

        textField: 'text'           

       }

    });

 

$("#selUnin").append("<option value=''>=全部=</option>");

没作用，然后想了想得在数据加载成功后就行追加，就在对应的方法里
又尝试了下，还是没作用：

$('#selUnin').combobox({

        url: _callback_url + '&action=getUnin',

        valueField: 'id',

        textField: 'text',

        onLoadSuccess: function(param) {

            $("#selUnin").append("<option value=''>=全部=</option>");           

        }

    });


在网上也查了很久，一直没能找到方法解决.经过学习得知:

因为jQuery easyui的下拉列表combobox是用DIV模拟的（其实看看它的样式就应该想到）。

解决办法:

步骤如下:
1、一个空下拉框
<select id="customCombobox"> 
</select>

2、为下拉框添加子项(这时候可以是后台读过来的数据)
$("#customCombobox").append("<option value='1'>Java</option>");

3、将下拉框转化为EASYUI中的Combobox
$("#customCombobox").combobox({});

只要填充好数据再去转化那就一定不会出问题!


另外一种方法:

<input id="comCc" value="0" class="easyui-combobox" data-options="required:true,editable:false,valueField:'id',textField:'text',width:80" />

 $(function () {
            $.setAreabox('comCc', "/Report/test/test");//初始销区下拉框
 })

================================================================我是分割线========================================

升级版


这次做项目遇到了一个问题，在easyui-combobox加载json数据中对象的属性。后台返回的json中包含一个对象，而我想调用对象中的属性，后台返回的json如下：

{
"rows": [
{
"chances": [],
"name": "系统管理员",
"password": "admin",
"status": 1,
"userId": 1,
"userName": "admin"
},
{
"chances": [],
"name": "于经理",
"password": "123456",
"status": 1,
"userId": 2,
"userName": "yulibin"
},
{
"chances": [],
"name": "郝经理",
"password": "123456",
"status": 1,
"userId": 3,
"userName": "haominghui"
},
{
"chances": [],
"name": "吴经理",
"password": "123456",
"status": 1,
"userId": 4,
"userName": "wumingliang"
}
],
"total": 4
}

json中包含total和rows，而rows下面才是我要显示在combobox的值，API规定必须用下面格式的json：

[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]

按着常规讲我会像json.rows.userId 这样设置valueField属性，结果明显不行，但这并不出乎我的意料，就是出于尝试的心态。现在的问题是如何获得这个json的对象，并且调用时只用属性名userId,name。
其实，很简单就解决了，还是先看api示例：

$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});

看我是怎么解决的：

var url = "${pageContext.request.contextPath}/user_findUlist.action";
$.getJSON(url, function(json) {
$('#cc').combobox({
data : json.rows,
valueField:'userId',
textField:'name'
});
});

combobox必须按着api指定格式加载json数据，我这里的json是层层嵌套的，所以肯定不信了，那我们可以换个思路。调用Jquery提供的getJSON方法，获取到我json，在初始化combobox使指定data属性为：json.rows，OK，就这么简单！！！看，数据取到了
easyui-combobox加载json中对象的属性

easyui-combobox加载json中对象的属性

附录：

    当我们用class初始化combobox对象后,他会自动把本身html >> select >> onChange的事件屏蔽掉。
    有时候我们并不希望用户自己填写combobox的值，取而代之的是选择固定的值，解决办法：给combobox添加editable属性 并设置为false。
   
   

使用案例：

通过<select>元素、<input>标签、Javascript三种方法来创建下拉列表框。

1、通过<select>元素创建一个预定义结构的下拉列表框。

<select id=”cc” class=”easyui-combobox” name=”dept” style=”width:200px;”>
<option value=”aa”>aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>

2、通过<input>标签创建下拉列表框。

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

3、使用Javascript创建下拉列表框。

<input id=”cc” name=”dept” value=”aa”>

$(‘#cc’).combobox({
url:’combobox_data.json’,
valueField:’id’,
textField:’text’
});

创建2个有依赖关系的下拉列表框。

代码如下：

<input id=”cc1″ class=”easyui-combobox” data-options=”
valueField: ‘id’,
textField: ‘text’,
url: ‘get_data1.php’,
onSelect: function(rec){
var url = ‘get_data2.php?id=’+rec.id;
$(‘#cc2′).combobox(‘reload’, url);
}” />
<input id=”cc2″ class=”easyui-combobox” data-options=”valueField:’id’,textField:’text'” />

JSON数据格式化例子：

[{
“id”:1,
“text”:”text1″
},{
“id”:2,
“text”:”text2″
},{
“id”:3,
“text”:”text3″,
“selected”:true
},{
“id”:4,
“text”:”text4″
},{
“id”:5,
“text”:”text5″
}]

属性：

下拉列表框属性扩展自combo(自定义下拉框)，下拉列表框新增的属性如下：

属性名   属性值类型 描述  
valueField string       基础数据值名称绑定到该下拉列表框。  
textField string     基础数据字段名称绑定到该下拉列表框。  
groupField string 指定分组的字段名称（译者注：分组的字段由数据源决定）。（该属性自1.3.4版开始可用）  
groupFormatter function(group) 返回格式化后的分组标题文本，以显示分组项（该属性自1.3.4版开始可用）
代码示例： 
$('#cc').combobox({
groupFormatter: function(group){
return '<span style="color:red">' + group
 + '</span>';
}
});


  
mode string 定义了当文本改变时如何读取列表数据。设置为’remote’时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送至名为’q’的HTTP请求参数到服务器检索新数据。  
url string 通过URL加载远程列表数据。  
method string HTTP方法检索数据(POST / GET)。  
data array 数据列表加载。代码示例： 
<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
		},{
			label: 'perl',
			value: 'Perl'
		},{
			label: 'ruby',
			value: 'Ruby'
		}]" />
 
filter function 定义当’mode’设置为’local’时如何过滤本地数据，函数有2个参数：
q：用户输入的文本。
row：列表行数据。
返回true的时候允许行显示。代码示例： 
$('#cc').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
	}
});
 
formatter function 定义如何渲染行。该函数接受1个参数：row。代码示例： 
$('#cc').combobox({
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
}
});
 
loader function(param,success,error) 定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数：
param：传递到远程服务器的参数对象。
success(data)：在检索数据成功的时候调用该回调函数。
error()：在检索数据失败的时候调用该回调函数。		  
loadFilter function(data) 返回过滤后的数据并显示。（该属性自1.3.3版开始可用）

事件：

下拉列表框事件继承自combo(自定义下拉框)，下拉列表框新增的事件如下：

事件名 事件参数 描述
onBeforeLoad param 在请求加载数据之前触发，返回false取消该加载动作。代码示例： 
// 在加载服务器数据之前改变http请求参数的值
$('#cc').combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
	}
});
onLoadSuccess none 在加载远程数据成功的时候触发。
onLoadError none 在加载远程数据失败的时候触发。
onSelect record 在用户选择列表项的时候触发。
onUnselect record 在用户取消选择列表项的时候触发。

方法：

下拉列表框扩展自combo(自定义下拉框)，下拉列表框新增或重写的方法如下：

方法名 方法参数 描述
options none 返回属性对象。
getData none 返回加载数据。
loadData data 读取本地列表数据。
reload url 请求远程列表数据。通过’url’参数重写原始URL值。代码示例： 
$('#cc').combobox('reload');      // 使用旧的URL重新载入列表数据
$('#cc').combobox('reload','get_data.php');  // 使用新的URL重新载入列表数据
setValues values 设置下拉列表框值数组。代码示例： 
$('#cc').combobox('setValues', ['001','002']);
setValue value 设置下拉列表框的值。代码示例： 
$('#cc').combobox('setValue', '001');
clear none 清除下拉列表框的值。
select value 选择指定项。
unselect value 取消选择指定项。

猜你喜欢

转载自zhyp29.iteye.com/blog/2356946
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022