EasyUi の Combogrid は、リモート data_javascript スキルのページングと動的検索を実装します

jquery easyui の Combogrid は非常に特殊で、コンボとグリッドを組み合わせたもので、編集可能なテキスト ボックスとドロップダウン データ グリッド パネルを組み合わせて、ユーザーが現在の入力をすばやく見つけて選択できるようにします。文字はデータと一致します。データ量が多い場合、コンボグリッドにはページング機能が必要です。 EasyUi に Combogrid を導入して、リモート データのページングと動的検索を実装しましょう。

$('#mallid').combogrid({ 
panelWidth:500, 
idField:'mallid', //ID字段 
textField:'mallname', //显示的字段 
url:"../global/datagrid.aspx?act=malllist", 
fitColumns: true, 
striped: true, 
editable:true, 
pagination : true,//是否分页 
rownumbers:true,//序号 
collapsible:false,//是否可折叠的 
fit: true,//自动大小 
pageSize: 10,//每页显示的记录条数，默认为10 
pageList: [10],//可以设置每页记录条数的列表 
method:'post', 
columns:[[ 
{field:'mallname',title:'商城名称',width:150,sortable:true}, 
{field:'url',title:'网址',width:150} 
]], 
keyHandler: { 
up: function() {}, 
down: function() {}, 
enter: function() {}, 
query: function(q) { 
//动态搜索 
$('#mallid').combogrid("grid").datagrid("reload", { 'keyword': q }); 
$('#mallid').combogrid("setValue", q); 
} 
} 
}); 

最近、プロジェクトに取り組むときに jquery easyui を使用しましたが、提供されている公式デモは単純すぎて、関連するサンプルのない関数が多かったです。インターネット上には情報がほとんどないので、デモは自分で書くしかありません。ここに簡単に記録しておきます。

1.easyUi コンボツリーはツリー ノードの動的読み込みを実装します

2.easyUi combogrid はリモート データのページングと動的検索を実装します

いくつか知識を追加させてください:

1. ComboGrid 共通属性パラメータの設定

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

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

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

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

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

2. ComboGrid の共通メソッド

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

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

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

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

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