Using jquery easyui's drop-down list combobox has a problem, the items of the drop-down list are
read from the database, and then I want to add an item to the dynamically generated item: "<option value=''>=all=</option >".
But how to add unsuccessfully.
First tried adding the drop-down list directly with jquery:
$('#selUnin').combobox({
url: _callback_url + '&action=getUnin',
valueField: 'id',
textField: 'text'
}
});
$("#selUnin").append("<option value=''>=all=</option>");
It doesn't work, then after thinking about it, it will be added after the data is loaded successfully, just in the corresponding method
Tried it again, but it still doesn't work:
$('#selUnin').combobox({
url: _callback_url + '&action=getUnin',
valueField: 'id',
textField: 'text',
$("#selUnin").append("<option value=''>=all=</option>");
}
});
I have also checked the Internet for a long time, but have not been able to find a solution. After learning :
Because the drop-down list combobox of jQuery easyui is simulated by DIV (in fact, it should be thought of when you look at its style).
Solution: The
steps are as follows:
1. An empty drop-down box
<select id="customCombobox">
</select>
2. Add a child item to the drop-down box (this time it can be the data read from the background)
$("#customCombobox") .append("<option value='1'>Java</option>");
3. Convert the drop-down box to Combobox in EASYUI
$("#customCombobox").combobox({});
Just fill in the data and then To convert then there will be no problem!
Another method:
<input id="comCc" value="0" class="easyui-combobox" data-options="required:true,editable:false,valueField:'
$.setAreabox('comCc', "/Report/test/test");//Initial pin area drop-down box
})
======================= ========================================== I am the dividing line ===== ==================================== The
upgraded version
encountered a problem in this project, in easyui-combobox Load properties of objects in json data. The json returned by the background contains an object, and I want to call the properties in the object. The json returned by the background is as follows:
{
"rows": [
{
"chances": [],
"name": "system administrator",
"password ": "admin",
"status": 1,
"userId": 1,
"userName": "admin"
},
{
"chances": [],
"name": "Manager Yu",
"password": "123456 ",
"status": 1,
"
"password": "123456",
"status": 1,
"userId": 3,
"userName": "haominghui"
},
{
"chances": [],
"name": "Manager Wu",
"password": "123456",
"status": 1,
"userId": 4,
"userName": "wumingliang"
}
],
"total": 4
} The
json contains total and rows, and below the rows is what I want to display in the combobox value, the API stipulates that the following format must be used:
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3 ,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
As a rule, I would set the valueField property like json.rows.userId, and the result is obviously not good, but this is not unexpected, it is just out of the mentality of trying. The question now is how to get this json object, and only use the attribute name userId, name when calling.
In fact, it's very easy to solve, let's look at the api example first:
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text' }
);
How to solve it:
var url = "${pageContext.request.contextPath}/user_findUlist.action";
$.getJSON(url, function(json) {
$('#cc').combobox({
data : json.rows,
valueField:'userId',
textField:'name'
});
});
The combobox must load the json data in the format specified by the api. The json here is nested in layers, so I must not believe it, then we can change the way of thinking. Call the getJSON method provided by Jquery, get my json, and initialize the combobox so that the specified data attribute is: json. rows, OK, it's that simple! ! !
Look, the data is obtained from easyui-combobox to load the properties
of objects in json
appendix:
When we initialize the combobox object with class, it will automatically block its own html >> select >> onChange event.
Sometimes we don't want users to fill in the value of the combobox by themselves, but instead choose a fixed value. The solution: add the editable attribute to the combobox and set it to false.
Use Cases:
Create drop-down list boxes through three methods: <select> element, <input> tag, and Javascript.
1. Create a drop-down list box with a predefined structure through the <select> element.
<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. Create a drop-down list box through the <input> tag.
<input id=”cc” class=”easyui-combobox” name=”dept”
data-options=”valueField:’id’,textField:’text’,url:’get_data.php'” />
3. Create a drop-down list box using Javascript.
<input id=”cc” name=”dept” value=”aa”>
$(‘#cc’).combobox({
url:’combobox_data.json’,
valueField:’id’,
textField:’text’
});
Create 2 dropdown list boxes with dependencies.
code show as below:
<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 data formatting example:
[{
“id”:1,
“text”:”text1″
},{
“id”:2,
“text”:”text2″
},{
“id”:3,
“text”:”text3″,
“selected”:true
},{
“id”:4,
“text”:”text4″
},{
“id”:5,
“text”:”text5″
}]
Attributes:
The properties of the drop-down list box are extended from combo (custom drop-down box). The new properties of the drop-down list box are as follows:
attribute name attribute value type description| valueField | string | The underlying data value name is bound to the drop-down list box. | |
| textField | string | The underlying data field name is bound to the drop-down list box. | |
| groupField | string | Specify the field name of the grouping (Translator's Note: The field of the grouping is determined by the data source) . (This property is available since version 1.3.4) | |
| groupFormatter | function(group) | Returns the grouped header text formatted to display grouped items (this property is available since version 1.3.4) Code example:
$('#cc').combobox({
groupFormatter: function(group){
return '<span style="color:red">' + group
+ '</span>';
}
}); |
|
| mode | string | Defines how to read the list data when the text changes. When set to 'remote', the dropdown list box will load data from the server. When set to "remote" mode, user input will be sent to the HTTP request parameter named 'q' to the server to retrieve new data. | |
| url | string | Load remote list data via URL. | |
| method | string | HTTP method to retrieve data (POST/GET). | |
| data | array | The data list is loaded. Code example:
<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 | Defines how to filter local data when 'mode' is set to 'local', the function has 2 parameters: q: the text entered by the user. row: List row data. Returns true to allow rows to be displayed. Code example:
$('#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 | 取消选择指定项。 |