datagrid Framework_jquery に基づくクエリ

复制代 代码如下: &lt ;div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"> は CenterPage.html フレーム内の番号、つまりタブフレーム内の番号です:

复制代码 代码如下: //レイアウトフレームがhrefを指している場合、HTMLページ本体の中央部分のみが取得されるため、ページは次のようになります。 // 一部のデータグリッドには多くの属性が含まれているため、js を使用してデータグリッド フレームワーク $(function () { $("#dg") を初期化してみてください。 datagrid({ url: "GetJson.ashx", //汎用ハンドラーまたはコントローラーを指します。返されるデータは Json 形式である必要があります。Json 形式のデータを直接割り当てることもできます。Json を取得しますバックグラウンドのコードは例としてデモに付属しているので書きませんが、バックグラウンドで返される注意事項について説明します。 iconCls: "icon-add", fitColumns: false, // true に設定すると、列がテーブルの幅に自動的に調整され、水平スクロールが防止されます。 false の場合は、サイズが自動的に一致します //toolbar テーブルの上部にツールバーを設定し、配列 の形式で設定します。 idField: 'id', //識別列。通常は id に設定されます。大文字と小文字が区別される場合があります。注意してください。 loadMsg: "Working hard to load data for you", //データのロード時にユーザーに表示されるステートメント pagination: true, //下部ページングツールバーを表示します rownumbers: true, //行数 1、2、3、4...を表示 pageSize: 10, //行数を読み取りますページング エントリ、つまりデータをバックグラウンドに読み取るときに渡される値 pageList: [10, 20, 30] , //各ページに表示されるデータを調整できます。つまり、毎回ページ サイズ データを調整できます。バックグラウンドからデータをリクエストします //データグリッドには属性が多すぎるため、それぞれを紹介しません。必要に応じて、その API を読み取ることができます。 sortName: "name", //いつに基づいて並べ替えフィールドを指定します。テーブルの初期化はデータベースのフィールド名と同じである必要があります sortOrder: "asc", //順方向 columns: [[ { field: 'code', title: 'Code', width: 100 }, { field: 'name', title: 'Name', width: 100, sortable: true },//sortable:true 列をクリックすると昇順と降順を変更できます { field: 'addr', title: 'addr', width: 100 } ]],//ここに角括弧が 2 つある理由は、クリスタル レポートの形式で実行できるためです。デモを参照してください ツールバー: [{//dategrid フォームの先頭にボタンを追加します text: "Add", iconCls: "icon-add", handler : function () { } }、'-'、{//'-' は、2 つのボタンを区切るために垂直線を追加するもので、快適に見えます text: "Delete", iconCls: " icon-remove", ハンドラー: function () { } }, '-', { text: "変更", iconCls: "アイコン編集", ハンドラー: function () { } }, '-'] }); }); //検索ボタンをクリックしてイベントをトリガーします function searchFunc() { alert("123"); $("#dg").datagrid("load", sy. SerializeObject($ ("#searchForm").form()));//searchForm フォーム内の一連の要素をオブジェクトとしてバックグラウンドに渡します }

//クリアボタンをクリックしてイベントをトリガーします function clearSearch() { $("#dg").datagrid("load", {});//データを再ロードします。データはありませんバックグラウンドで渡される値は空です $("#searchForm").find("input").val("");//フォームの下にあるすべての入力タグを検索し、クリアします } &lt ;/script> ユーザー名: 作成開始時刻 作成終了時刻 検索 クリア

JQuery 拡張コード:

コードをコピー コードは次のとおりです。 var sy = $.extend({} , sy) ;/*グローバル変数を定義します*/ sy.serializeObject = function (form) { /*フォーム内の要素をオブジェクトにシリアル化する、Jquery を拡張したメソッド*/ var o = {}; $.each(form.serializeArray() 、関数 (インデックス) { if (o[this['name']]) { o[this['name']] = o[this['name']] "," this[' value']; } else { o[this['name']] = this['value']; } }); return o; } ;

画像: