复制代代码如下: < ;div data-options="region:'south',title:'South Title',split:true" style="height: 100px;">< div data-options="region:'west',title:'West',split:true" style="width: 100px;"> は CenterPage.html フレーム内の番号、つまりタブフレーム内の番号です: 复制代码代码如下: <br>//レイアウトフレームがhrefを指している場合、HTMLページ本体の中央部分のみが取得されるため、ページは次のようになります。 <br> // 一部のデータグリッドには多くの属性が含まれているため、js を使用してデータグリッド フレームワーク <br>$(function () {<br>$("#dg") を初期化してみてください。 datagrid({<br> url: "GetJson.ashx", //汎用ハンドラーまたはコントローラーを指します。返されるデータは Json 形式である必要があります。Json 形式のデータを直接割り当てることもできます。Json を取得しますバックグラウンドのコードは例としてデモに付属しているので書きませんが、バックグラウンドで返される注意事項について説明します。<br>iconCls: "icon-add",<br>fitColumns: false, // true に設定すると、列がテーブルの幅に自動的に調整され、水平スクロールが防止されます。 false の場合は、サイズが自動的に一致します <br>//toolbar テーブルの上部にツールバーを設定し、配列 <br> の形式で設定します。 idField: 'id', //識別列。通常は id に設定されます。大文字と小文字が区別される場合があります。注意してください。<br>loadMsg: "Working hard to load data for you", //データのロード時にユーザーに表示されるステートメント<br>pagination: true, //下部ページングツールバーを表示します<br>rownumbers: true, //行数 1、2、3、4...を表示<br>pageSize: 10, //行数を読み取りますページング エントリ、つまりデータをバックグラウンドに読み取るときに渡される値<br>pageList: [10, 20, 30] , //各ページに表示されるデータを調整できます。つまり、毎回ページ サイズ データを調整できます。バックグラウンドからデータをリクエストします<br>//データグリッドには属性が多すぎるため、それぞれを紹介しません。必要に応じて、その API を読み取ることができます。<br>sortName: "name", //いつに基づいて並べ替えフィールドを指定します。テーブルの初期化はデータベースのフィールド名と同じである必要があります<br>sortOrder: "asc", //順方向<br>columns: [[<br>{ field: 'code', title: 'Code', width: 100 },<br>{ field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true 列をクリックすると昇順と降順を変更できます<br>{ field: 'addr', title: 'addr', width: 100 }<br>]],//ここに角括弧が 2 つある理由は、クリスタル レポートの形式で実行できるためです。デモを参照してください<br>ツールバー: [{//dategrid フォームの先頭にボタンを追加します<br>text: "Add",<br>iconCls: "icon-add",<br>handler : function () {<br>}<br>}、'-'、{//'-' は、2 つのボタンを区切るために垂直線を追加するもので、快適に見えます<br>text: "Delete",<br>iconCls: " icon-remove",<br>ハンドラー: function () {<br>}<br>}, '-', {<br>text: "変更",<br>iconCls: "アイコン編集",<br>ハンドラー: function () {<br>}<br>}, '-']<br>});<br>}); <p>//検索ボタンをクリックしてイベントをトリガーします<br>function searchFunc() {<br>alert("123");<br>$("#dg").datagrid("load", sy. SerializeObject($ ("#searchForm").form()));//searchForm フォーム内の一連の要素をオブジェクトとしてバックグラウンドに渡します<br>}</p> <p>//クリアボタンをクリックしてイベントをトリガーします<br>function clearSearch() {<br>$("#dg").datagrid("load", {});//データを再ロードします。データはありませんバックグラウンドで渡される値は空です <br>$("#searchForm").find("input").val("");//フォームの下にあるすべての入力タグを検索し、クリアします <br>}<br>< ;/script><br><div class="easyui-tabs" fit="true" border="false"><br><div title="データ表示テーブル" border ="false" fit=" true"><br><div class="easyui-layout" fit="true" border="false"><br><!-- クエリには入力条件が必要なため, しかし、ツールバーの形式では良くないので、レイアウトフレームの北のヘッダーにクエリ関連の情報を書き込みます --><br><!-- ここでは、表示スタイルを次のようにしようとします。ツールバー スタイルなので、まずツールバー スタイルを探し、それをコピーします--><br><div data-options="region:'north',title:'Advanced Query'" style="height: 100px ; 背景: #F4F4F4;"><br><form id="searchForm"><br><table><br><tr><br><th>ユーザー名: </th> ;<BR><td><br>< input name="name" /></td><br></tr><br><tr><br><th>作成開始時刻</th><br><td> ;<BR><input class="easyui-datetimebox" editable="false" name="subStartTime" /></td><br><! -- 日付ボックス フレームのデータは時間形式である必要があるため、はい。そのため、エラーを避けるためにユーザーが手動で入力することを禁止するために editable="false" を使用します --><br><th>作成終了時刻</th> ;<BR><td><br><input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td><br><td><クラス="easyui-linkbutton" href="javascript:void(0 );" onclick="searchFunc();">検索</a></td><br><td><a class=" easyui-linkbutton" href="javascript:void(0) ;" onclick="clearSearch();">クリア</a></td><br></tr><br></table> ;<BR></form><br> </div><br><div data-options="region:'center',split:false"><br><table id="dg "><br></table><br></div><br></div><br></div><br></div><br></p> </div> <p>JQuery 拡張コード: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="23872" class="copybut" id="copybut23872" onclick="doCopy('code23872')"><u>コードをコピー</u></a></span> コードは次のとおりです。</div> <div class="codebody" id="code23872"> <br>var sy = $.extend({} , sy) ;/*グローバル変数を定義します*/ <p>sy.serializeObject = function (form) { /*フォーム内の要素をオブジェクトにシリアル化する、Jquery を拡張したメソッド*/<br>var o = {};<br>$.each(form.serializeArray() 、関数 (インデックス) {<br>if (o[this['name']]) {<br>o[this['name']] = o[this['name']] "," this[' value'];<br>} else {<br>o[this['name']] = this['value'];<br>}<br>});<br>return o;<br>} ;<br></p> </div> <p>画像: </p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/20130408002.jpg"></p> <p> </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
