EasyUI データグリッド エディタの実装の概要 combogrid search box_javascript スキル

まず、combogrid に対する datagrid エディタ拡張が必要です。これは他の人によって実装されました。

$.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);
}
}
});

次に、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>

ツールバー経由でバインド: "#Marketer_ID_Member_bar"

次のステップでは、他の場所で combogrid を適用する方法に従います。具体的な検索メソッド sy.memberInfo.userSearch_Member は次のとおりです。

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

しかし、エディターには要素を検索するための明確な ID がありません。この時点で、私の最初の反応は、ID を自分で追加することでした。そこで、エディターに属性「id」を追加しようとしましたが、追加されませんでした。仕事。

次に、コンボグリッドが読み込まれるときに、Marketer_ID_Member_bar を通じてその親を検索し (これはコンボグリッドのツールバーであり、コンボグリッドはそれを通じて見つかるはずです)、ID を割り当てます。は成功しましたが、Marketer_ID_Member_bar 親はコンボグリッドではないため、失敗しました。

このとき、他の場所で combogrid の使用法を調べてみようと思い、最終的に $('#txtInputID').combogrid({}); を通じて入力を combogrid に変換すると、このクラスがinput は easyui-validatebox combogrid-f combo-f validatebox-text になります。比較すると、エディターが使用するときのこの列の入力ボックスのスタイルは datagrid-editable-input combogrid-f であることがわかります。コンボ-f、

これは実際の所有者でなければなりません。ID を設定するのも不便なので、スタイル セレクターを使用します。そのため、最終的な sy.memberInfo.userSearch_Member メソッドは次のようになります。

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

これも開発中に少し調べましたが解決しなかったので、エディタを使用せずにポップアップボックスから編集するという別の回避方法があるため無視しました。なので、あまり心配する必要はありません。今日少し時間があったので、もう一度調べてみたところ、最終的に有効な解決策を見つけました。

上記の内容は、EasyUI データグリッド エディターの combogrid 検索ボックスの実装についての簡単な紹介です。皆様のお役に立てれば幸いです。

EasyUI で combogrid を使用する方法

ComboGrid の使用法とパラメーターの構成

1. Class="「easyui-combogrid」を導入する必要があります。これは、input 要素または select 要素に適用する必要があります

2. data-options でパラメータ設定を行う必要があります

3. 属性パラメータの設定:

loadMsg: リモートデータ、表示情報をロードします

idField: select

で送信された値を選択します

textField: select

で選択された値を表示します

モード: DataGrid のデータ テキストをロードする方法を定義します。 「リモート」モードに設定されている場合、新しいデータを取得するために「q」という名前の http リクエスト パラメーターを使用してサーバーに送信されるユーザーのタイプ

フィルター: データがロードされると、「モード」が「ローカル」に設定されます。ローカル データ ソースを選択し、true を返して行を選択する方法

4.方法

options(): 選択オブジェクトを返します

grid(): 選択された dataGrid オブジェクトを返します

setValues(values): 要素値の配列を設定します

setValue(value): コンポーネントの値を設定します

clear(): コンポーネントの値をクリアします