jQueryのEasyUIフォームプラグイン - Combogrid複合グリッド

頼ります

• コンボ
• データグリッド

使用法

複合グリッドを作成する（combogrid）

1は、タグから複合グリッド（combogrid）を作成します。

<選択のid = "CC"クラス= "easyui-combogrid「名前=" DEPT "スタイル="幅：250ピクセル; "
    データ・オプション= "
    panelWidth：450、
    値： '006'、
    idField：「コード」、
    テキストフィールド：「名前」、
    URL： 'datagrid_data.json」、
    列：[[
    {フィールド： 'コード'、タイトル： 'コード'、幅：60}、
    {フィールド：「名前」、タイトル：「名前」、幅：100}、
    {フィールド： 'addrに」、タイトル：「住所」、幅：120}、
    {フィールド：「COL4」、タイトル：「Col41」、幅：100}
    ]]
    "> </選択>

2は、Javascriptの使用は、既存の<select>または<入力>から要素を作成します。

<入力のid = "CC"名前= "DEPT"値= "01">

    $（ '＃のC-C'）。Combogrid（{
    panelWidth：450、
    値： '006'、
    idField：「コード」、
    テキストフィールド：「名前」、
    URL： 'datagrid_data.json」、
    列：[[
    {フィールド： 'コード'、タイトル： 'コード'、幅：60}、
    {フィールド：「名前」、タイトル：「名前」、幅：100}、
    {フィールド： 'addrに」、タイトル：「住所」、幅：120}、
    {フィールド：「COL4」、タイトル：「Col41」、幅：100}
    ]]
    }）;

オートコンプリート機能

複合グリッド（combogridが）そのオートコンプリート機能を言及してみましょう。 ドロップダウンデータグリッドは、ユーザーの入力に基づいて、可能な結果を​​表示します。

$（ '＃のC-C'）。Combogrid（{
    遅延：500、
    モード：「リモート」、
    URL： 'get_data.php」、
    idField：「ID」、
    テキストフィールド：「名前」、
    列：[[
		{フィールド： 'コード'、タイトル： 'コード'、幅：120、ソート可能：真}、
		{フィールド：「名前」、タイトル：「名前」、幅：400、ソート可能：真}
    ]]
}）;

サーバー側では、「Q」パラメータが最初に取得する必要があります。 ユーザーがデータベースを照会してから、ブラウザにJSON形式のSQLの結果を返すことができます。

get_data.php：

$ Q = ISSET（$ _ POST [ 'Q']）$ _POST [ 'Q']： ''; //リクエストパラメータ？
//クエリのデータベースとJSON結果データを返します
$ルピー=するmysql_query（ "項目からどこ名 '$ Qは％'のような選択*"）;
エコーjson_encode（...）;

プロパティ

プロパティは、組み合わせ（コンボ）から延び、およびデータグリッド（DataGridが）、以下のグリッド（combogrid）の組み合わせプロパティを追加です。

$('#cc').combogrid({
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

イベント

組み合わせ（コンボ）から拡大したイベント、およびデータグリッド（データグリッド）。

ウェイ

方法は以下のグリッド（combogrid）の組み合わせ追加したり、メソッドをオーバーライドで、組み合わせ（コンボ）から延びています。

var g = $('#cc').combogrid('grid');	// get datagrid object
var r = g.datagrid('getSelected');	// get the selected row
alert(r.name);

$('#cc').combogrid('setValues', ['001','007']);

$('#cc').combogrid('setValue', '002');