jQueryのEasyUIフォーム - 木のドロップダウンボックスを作成します(ComboTree)
ツリードロップダウンボックス(ComboTree)は、(コンボボックス)を持つツリーの下のドロップダウンボックス(木)です。 それは、リモートサーバーに送信することができ、フォームフィールドの使用として作用することができます。
このチュートリアルでは、名前、住所、都市フィールドを持つ登録フォームを作成します。 街のフィールドは、ユーザーがツリーパネル(木パネル)をドロップダウン、および特定の都市を選択できるドロップダウンボックスツリー(ComboTree)フィールドです。
フォームを作成します(フォーム)
<DIV ID = "DLG"クラス= "easyui-ダイアログ"スタイル= "幅:500pxなど;高さ:250ピクセル;パディング:10pxの30px;" タイトル=「登録」ボタン= "#のDLG-ボタン"> <H2>アカウント情報</ H2> <フォームID = "FF"メソッド= "ポスト"> <表> <TR> <TD>名前:</ TD> <TD>の<input type = "text"の名= "名前"スタイル= "幅:350px;" /> </ TD> </ TR> <TR> <TD>住所:</ TD> <TD>の<input type = "text"の名= "アドレス"スタイル= "幅:350px;" /> </ TD> </ TR> <TR> <TD>市:</ TD> <TD> <選択したクラス= "easyui-combotree" URL = "データ/ city_data.json「名前="都市 "スタイル="幅:156px; "/> </ TD> </ TR> </表> </フォーム> </ DIV> <DIVのID = "DLG-ボタン"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()"> </a>を送信 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> </a>のキャンセル </ DIV>
あなたは上記のコードから見ることができ、私たちは「都市」木ドロップダウンボックスと呼ばれる(ComboTree)はurl属性フィールドを設定し、このフィールドは、リモートサーバから木(ツリー)のデータを取得することができます。 このフィールドが「easyui-combotree」と呼ばれるスタイルを持って、私たちは、任意のjsのコードツリーのドロップダウンボックス(ComboTree)フィールドが自動的に描画される記述する必要はありませんのでご注意ください。