Latest web development tutorials
×

jQuery EasyUI kuliah

jQuery EasyUI kuliah jQuery EasyUI pengantar singkat

jEasyUI aplikasi

jEasyUI Membuat CRUD Aplikasi jEasyUI Membuat data grid CRUD jEasyUI formulir aplikasi CRUD jEasyUI Buat pembaca RSS

jEasyUI Drag dan Drop

jEasyUI tarik dasar dan penurunan jEasyUI Buat penurunan keranjang belanja jEasyUI Buat kurikulum sekolah

jEasyUI Menu dan tombol

jEasyUI Membuat menu sederhana jEasyUI Membuat tombol link jEasyUI Membuat tombol menu jEasyUI Buat tombol perpecahan

jEasyUI tata ruang

jEasyUI Membuat layout perbatasan jEasyUI Membuat layout yang kompleks jEasyUI Buat panel lipat jEasyUI Buat tab jEasyUI Dinamis menambahkan tab jEasyUI Tambahkan tab AutoPlay jEasyUI Buat XP Style di panel sebelah kiri

jEasyUI Data Grid

jEasyUI Dikonversi ke HTML jaringan data tabel jEasyUI Mendapatkan baris data yang dipilih jEasyUI Tambahkan Bertanya jEasyUI Tambahkan toolbar jEasyUI Membuat toolbar yang kompleks jEasyUI Pengaturan kolom freeze jEasyUI Dinamis Perubahan kolom jEasyUI Format Kolom jEasyUI Mengatur semacam itu jEasyUI Pemesanan kustom jEasyUI Buat kombinasi kolom jEasyUI Tambahkan kotak centang jEasyUI kustom Pager jEasyUI Aktifkan editing inline jEasyUI Editor diperpanjang jEasyUI operasi kolom jEasyUI sel gabungan jEasyUI Buat Custom View jEasyUI Buat Ringkasan footer jEasyUI Ketentuan yang ditetapkan baris warna latar belakang jEasyUI Membuat kotak properti jEasyUI garis diperluas Tampilkan Detail jEasyUI Buat Pembagian jEasyUI Menampilkan data besar jEasyUI Menambahkan komponen halaman

jEasyUI jendela

jEasyUI Membuat jendela yang sederhana jEasyUI Kustom Jendela Toolbars jEasyUI Jendela dan Layout jEasyUI Buat dialog jEasyUI Sesuaikan kotak dialog

jEasyUI menu pohon

jEasyUI Gunakan tag untuk membuat menu pohon jEasyUI Buat menu pohon asynchronous jEasyUI Menambahkan menu pohon simpul jEasyUI Membuat menu pohon dengan kotak centang jEasyUI Drag dan drop kontrol menu pohon jEasyUI Beban menu tree node orangtua / anak jEasyUI Membuat pohon grid yang didasarkan jEasyUI Buat mesh pohon kompleks jEasyUI Dinamis dimuat jaringan pohon jEasyUI Menambahkan tab Grid pohon jEasyUI Lazy loading pohon jaringan simpul

jEasyUI bentuk

jEasyUI Menyerahkan formulir untuk membuat asynchronous jEasyUI bentuk Authentication jEasyUI Membuat kotak pohon drop-down jEasyUI Format kotak drop-down jEasyUI Filter data grid drop-down

jEasyUI Reference manual

jQuery EasyUI widget jQuery EasyUI penyebaran

jQuery EasyUI bentuk Plugin - combo box Combobox

jQuery EasyUI Plugin jQuery EasyUI Plugin

Diperpanjang dari $ .fn.combo.defaults. Dengan $ .fn.combobox.defaults menimpa default default.

combo box (kotak kombo) menampilkan kotak teks dan daftar drop-down dapat diedit, pengguna dapat memilih salah satu atau lebih nilai dari daftar drop-down. Pengguna dapat memasukkan teks langsung ke bagian atas daftar, atau pilih satu atau lebih nilai yang ada dari daftar.

mengandalkan

  • combo

pemakaian

Membuat kotak combo dari <pilih> elemen dengan struktur yang telah ditetapkan (combobox).

<Pilih id = "cc" class = "easyui-combobox" name = "dept" style = "width: 200px;">
    <Value Option = "aa"> aitem1 </ option>
    <Pilihan> bitem2 </ option>
    <Pilihan> bitem3 </ option>
    <Pilihan> ditem4 </ option>
    <Pilihan> eitem5 </ option>
</ Pilih>

Dari <input> tag membuat kotak combo (combobox).

<Input id = "cc" class = "easyui-combobox" name = "dept"
    Data-opsi = "valueField: 'id', textField: 'teks', url: 'get_data.php'">

Gunakan javascript untuk membuat kotak combo (combobox).

<Input id = "cc" name = "dept" value = "aa">
$ ( '# Cc'). Combobox ({
    url: 'combobox_data.json',
    valueField: 'id',
    textField: 'teks'
});

Buat dua tergantung combo kotak (combobox).

<Input id = "cc1" class = "easyui-combobox" Data-opsi = "
    valueField: 'id',
    textField: 'teks',
    url: 'get_data1.php',
    onselect: function (rec) {
    var url = + rec.id 'get_data2.php id =?';
    . $ ( '# CC2') combobox ( 'ulang', url);
    } ">
<Input id = "cc2" class = "easyui-combobox" Data-opsi = "valueField: 'id', textField: 'teks'">

json format data contoh:

[{
    "Id": 1,
    "Teks": "text1"
}, {
    "Id": 2,
    "Teks": "text2"
}, {
    "Id": 3,
    "Teks": "text3",
    "Dipilih": true
}, {
    "Id": 4,
    "Teks": "text4"
}, {
    "Id": 5,
    "Teks": "text5"
}]

milik

Properti membentang dari kombinasi (combo), berikut ini adalah combo box (kotak kombo) menambahkan properti.

名称 类型 描述 默认值
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 起可用。

peristiwa

Acara diperluas dari kombinasi (combo), berikut adalah kotak combo (combobox) untuk menambahkan acara.

名称 参数 描述
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 当用户取消选择一个列表项时触发。

cara

Metode memperpanjang dari kombinasi (combo), berikut adalah kotak combo (combobox) untuk menambah atau mengganti metode.

名称 参数 描述
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 Plugin jQuery EasyUI Plugin