Pengenalan kepada pelaksanaan EasyUI datagrid editor combogrid search box_javascript kemahiran

Mula-mula kita memerlukan sambungan editor datagrid kepada combogrid, yang telah dilaksanakan oleh orang lain:

$.extend($.fn.datagrid.defaults.editors, {
combogrid: {
init: function (container, options) {
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
input.combogrid(options);
return input;
},
destroy: function (target) {
$(target).combogrid('destroy');
},
getValue: function (target) {
return $(target).combogrid('getValue');
},
setValue: function (target, value) {
$(target).combogrid('setValue', value);
},
resize: function (target, width) {
$(target).combogrid('resize', width);
}
}
});

Kemudian tulis kotak carian di dalam div

<div id="Marketer_ID_Member_bar">
<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="text-align: right; padding-right: 15px">
<input id="userName_Member" placeholder="姓名/用户名" style="width: 100px; border: 0;" />
<input type="button" value="查询" onclick="sy.memberInfo.userSearch_Member();" />
</td>
</tr>
</table>
</div>

Ikat melalui bar alat: "#Marketer_ID_Member_bar"

Langkah seterusnya ialah mengikut cara kami menggunakan combogrid di tempat lain Kaedah carian khusus sy.memberInfo.userSearch_Member adalah seperti berikut:

$('#Marketer_ID_Member').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('#Marketer_ID_Member').combogrid('grid').datagrid('reload');

Walau bagaimanapun, tiada ID yang jelas dalam editor untuk mencari elemen Pada masa ini, reaksi pertama saya adalah untuk menambah ID sendiri, jadi saya cuba menambah atribut "id" pada editor, tetapi tidak. kerja.

Seterusnya, cuba cari induknya melalui Marketer_ID_Member_bar apabila combogrid dimuatkan (ideanya ialah bar alat bagi combogrid, dan combogrid harus ditemui melaluinya) dan tetapkan id tersebut berjaya, tetapi Marketer_ID_Member_bar Induk bukan combogrid, gagal.

Pada masa ini saya terfikir untuk melihat penggunaan combogrid di tempat lain, dan akhirnya mendapati bahawa jika saya menukar input kepada combogrid melalui $('#txtInputID').combogrid({});, kelas ini input akan menjadi Ia menjadi easyui-validatebox combogrid-f combo-f validatebox-text Melalui perbandingan, didapati bahawa apabila editor menggunakannya, gaya kotak input lajur ini ialah: datagrid-editable-input combogrid-f. kombo-f,

Ini sepatutnya menjadi pemilik sebenar Ia juga menyusahkan untuk menetapkan id, jadi kami menggunakan pemilih gaya, jadi kaedah terakhir sy.memberInfo.userSearch_Member kelihatan seperti ini:

$('.combogrid-f').combogrid('grid').datagrid('options').queryParams.Name = $("#userName_Member").val();
$('.combogrid-f').combogrid('grid').datagrid('reload');

Ia juga agak berliku-liku saya membuat sedikit kajian semasa pembangunan dan tidak menyelesaikannya, jadi saya mengabaikannya kerana ada cara lain untuk mengelakkannya, iaitu tidak menggunakan editor dan mengedit melalui kotak pop timbul. , jadi tidak perlu terlalu risau Setelah mempunyai sedikit masa lapang hari ini, saya melihat sekali lagi dan akhirnya menemui penyelesaian yang berkesan.

Kandungan di atas adalah pengenalan ringkas kepada pelaksanaan kotak carian combogrid editor datagrid EasyUI Saya harap ia akan membantu semua orang!

Cara menggunakan combogrid dalam EasyUI

Penggunaan ComboGrid dan konfigurasi parameter

1. Class=" "easyui-combogrid" perlu diperkenalkan, yang mesti digunakan dalam input atau pilih elemen

2. Tetapan parameter perlu ditetapkan dalam pilihan data

3. Konfigurasi parameter atribut:

loadMsg: Muatkan data jauh, maklumat yang dipaparkan

idField: Pilih nilai yang diserahkan dalam pilih

Medan teks: Nilai paparan dipilih dalam pilihan

mod: Tentukan cara memuatkan teks data DataGrid. Apabila ditetapkan kepada mod "'jauh'", jenis pengguna yang akan dihantar ke pelayan dengan parameter permintaan http bernama 'q' untuk mendapatkan data baharu

penapis: Apabila data dimuatkan, "mod" ditetapkan kepada "setempat", cara memilih sumber data setempat dan mengembalikan benar untuk memilih baris

4. Kaedah

pilihan(): Kembalikan objek pilihan

grid(): Mengembalikan objek dataGrid yang dipilih

setValues(values): Tetapkan tatasusunan nilai elemen

setValue(value): Tetapkan nilai komponen

clear(): kosongkan nilai komponen