ปลั๊กอิน jQuery รูปแบบ EasyUI - Combobox กล่องคำสั่งผสม
ปลั๊กอิน jQuery EasyUI ยื่นออกมาจาก $ .fn.combo.defaults โดย $ .fn.combobox.defaults แทนที่ค่าเริ่มต้นเริ่มต้น
กล่องคำสั่งผสม (ComboBox) แสดงกล่องข้อความและรายการแบบหล่นลงสามารถแก้ไขผู้ใช้สามารถเลือกหนึ่งหรือมากกว่าค่าจากรายการแบบหล่นลง ผู้ใช้สามารถป้อนข้อความโดยตรงในด้านบนของรายการหรือเลือกอย่างใดอย่างหนึ่งหรือค่าที่มีอยู่มากขึ้นจากรายการ
วางใจ
- วงดนตรีผสม
การใช้
สร้างกล่องคำสั่งผสมจากองค์ประกอบ <select> มีโครงสร้างที่กำหนดไว้ล่วงหน้า (ComboBox)
<เลือก id = "CC" class = "easyui-ComboBox" ชื่อ = "ฝ่าย" style = "width: 200px;">
<value option = "AA"> aitem1 </ option>
<option> bitem2 </ option>
<option> bitem3 </ option>
<option> ditem4 </ option>
<option> eitem5 </ option>
</ เลือก>
จาก <input> แท็กสร้างกล่องคำสั่งผสม (ComboBox)
<input id = "CC" class = "easyui-ComboBox" ชื่อ = "ฝ่าย"
ข้อมูลตัวเลือก = "valueField: 'ID' TextField: 'ข้อความ' URL: 'get_data.php'">
ใช้ JavaScript ในการสร้างกล่องคำสั่งผสม (ComboBox)
<input id = "CC" ชื่อ = "ฝ่าย" value = "AA">
$ ( '# สำเนา). Combobox ({
URL: 'combobox_data.json'
valueField: 'ID'
TextField: 'ข้อความ'
});
สร้างสองกล่องคำสั่งผสมขึ้น (ComboBox)
<input id = "CC1" class = "easyui-ComboBox" data-ตัวเลือก = "
valueField: 'ID'
TextField: 'ข้อความ'
URL: 'get_data1.php'
onSelect: ฟังก์ชั่น (บันทึก) {
var url = + rec.id 'ID get_data2.php =';
. $ ( '# CC2') ComboBox ( 'โหลด' URL);
} ">
<input id = "CC2" class = "easyui-ComboBox" data-ตัวเลือก = "valueField: 'ID' TextField: 'ข้อความ'">
JSON ตัวอย่างรูปแบบข้อมูล:
[{
"id": 1,
"ข้อความ": "Text1"
}, {
"id": 2,
"ข้อความ": "Text2"
}, {
"id": 3,
"ข้อความ": "Text3"
"ที่เลือก": จริง
}, {
"id": 4,
"ข้อความ": "text4"
}, {
"id": 5
"ข้อความ": "text5"
}]
คุณสมบัติ
สถานที่ยื่นออกมาจากการรวมกัน (คำสั่งผสม) ต่อไปนี้เป็นกล่องคำสั่งผสม (ComboBox) เพิ่มคุณสมบัติ
| 名称 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| valueField | string | 绑定到该组合框（ComboBox）的 value 上的基础数据的名称。 | value |
| textField | string | 绑定到该组合框（ComboBox）的 text 上的基础数据的名称。 | text |
| groupField | string | 指示要被分组的字段。该属性自版本 1.3.4 起可用。 | null |
| groupFormatter | function(group) | 返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。 代码实例：
$('#cc').combobox({
groupFormatter: function(group){
return '<span style="color:red">' + group + '</span>';
}
});
|
|
| mode | string | 定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。 | local |
| url | string | 从远程加载列表数据的 URL 。 | null |
| method | string | 用来检索数据的 http 方法。 | post |
| 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'
}]" />
|
null |
| filter | function | 定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数： q：用户输入的文本。 row：列表中的行数据。 返回 true 则允许显示该行。 代码实例：
$('#cc').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
}
});
|
|
| formatter | function | 定义如何呈现行。该函数有一个参数：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()：当获取数据失败时将被调用的回调函数。 |
json loader |
| loadFilter | function(data) | 返回要显示的过滤数据。该属性自版本 1.3.3 起可用。 |
เหตุการณ์
เหตุการณ์ที่เกิดขึ้นจากการขยายการรวมกัน (คำสั่งผสม) ต่อไปนี้เป็นกล่องคำสั่งผสม (ComboBox) เพื่อเพิ่มเหตุการณ์
| 名称 | 参数 | 描述 |
|---|---|---|
| onBeforeLoad | param | 在请求加载数据之前触发，返回 false 则取消加载动作。 代码实例：
// change the http request parameters before load data from server
$('#cc').combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = 'js';
}
});
|
| onLoadSuccess | none | 当远程数据加载成功时触发。 |
| onLoadError | none | 当远程数据加载失败时触发。 |
| onSelect | record | 当用户选择一个列表项时触发。 |
| onUnselect | record | 当用户取消选择一个列表项时触发。 |
ทาง
วิธีการที่เพิ่มขึ้นจากการรวมกัน (คำสั่งผสม) ต่อไปนี้เป็นกล่องคำสั่งผสม (ComboBox) เพื่อเพิ่มหรือแทนที่วิธีการ
| 名称 | 参数 | 描述 |
|---|---|---|
| options | none | 返回选项（options）对象。 |
| getData | none | 返回加载的数据。 |
| loadData | data | 加载本地列表数据。 |
| reload | url | 请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。 代码实例：
$('#cc').combobox('reload'); // reload list data using old URL
$('#cc').combobox('reload','get_data.php'); // reload list data using new URL
|
| setValues | values | 设置组合框（combobox）值的数组。 代码实例：
$('#cc').combobox('setValues', ['001','002']);
|
| setValue | value | 设置组合框（combobox）的值。 代码实例：
$('#cc').combobox('setValue', '001');
|
| clear | none | 清除组合框（combobox）的值。 |
| select | value | 选择指定的选项。 |
| unselect | value | 取消选择指定的选项。 |
ปลั๊กอิน jQuery EasyUI