コードをコピー コードは次のとおりです: var editFlag = unknown;//編集フラグを設定します<br>//レイアウト フレームが href を指しているため、 fetch 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: "ロードに一生懸命取り組んでいますdata for you", //データのロード時にユーザーに表示されるステートメント<br>pagination: true, //下部ページング ツールを表示する Column<br>rownumbers: true, //行番号 1、2、3、4 を表示...<br>pageSize: 10, //ページング項目の数、つまりデータをバックグラウンドに読み取るときに渡される値を読み取ります<br>pageList: [10, 20, 30], //各ページに表示されるデータ、つまり、バックグラウンドからデータを要求するたびに pageSize データを調整します<br>//データグリッドには属性が多すぎるため、毎回変更しません すべて導入されており、必要に応じて変更できますAPI を参照してください<br>sortName: "name", //テーブルの初期化時に基づく並べ替えフィールドはデータベースのフィールド名と同じである必要があります<br>sortOrder: "asc", //通常のシーケンス<br> columns: [[<br>{<br>field: 'code', title: 'Code', width: 100,<br>editor: {//編集可能として設定します<br>type : 'validatebox',//編集スタイルを設定します。組み込みスタイルは、text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree です。<br>オプション: {}<br>}<br>}、<br>{<br>field: 'name', title: 'Name', width: 100, sortable: true,<br>editor: {//編集可能として設定します<br>type: 'validatebox',// Set edit format<br>options: {<br>required: true//編集ルールの属性を設定します<br>}<br>}<br>},//sortable:true 列をクリックすると、昇順と順序を変更できます。降順<br>{<br>field: 'addr', title: 'addr', width: 100,<br>editor: {//編集可能として設定します<br>type: 'datetimebox',//ここではdatetimebox <br>options: {<br>required: true//編集ルール属性を設定します <br>}<br>}<br>}<br>]],// 2 つある理由ここの角括弧は、クリスタル レポートに作成できるためです。詳細については、デモを参照してください<br>ツールバー: [{//日付グリッド フォームの先頭にボタンを追加します<br>テキスト: "追加", <br>iconCls: "icon-add", <br>handler: function () {<br>if (editFlag != unknown) {<br>$("#dg").datagrid('endEdit', editFlag) ;//編集を終了し、以前に編集した Row を渡します<br>}<br>if (editFlag == unknown) {//追加された行が同時に開かれないようにします<br>$("#dg" ).datagrid('insertRow', {//指定した行にデータを追加、appendRow は最後の行にデータを追加します <br>index: 0, // 行数は 0 から始まります <br>row: {<br> code: '',<br>name: '名前を入力してください',<br>addr: ''<br>}<br>});<br>$("#dg").datagrid('beginEdit' , 0);//編集を有効にし、編集する行を渡します<br>editFlag = 0;<br>}<br>}<br>}, '-', {//'-' は、 2 つのボタンの間に縦線を入れて分離すると快適に見えます<br>text: "Delete" ,<br>iconCls: "icon-remove",<br>handler: function () {<br>//行を選択削除予定<br>var rows = $("#dg").datagrid('getSelections' ;", function (res) {//削除するかどうかを確認する<br>if (res) {<br>var code = {};<br>for (var i = 0; i <rows.length i>codes.push(rows[i].code);<br>}<br>console.info(codes.join(','));//文字列を結合し、データ処理のためにバックグラウンドに渡します、ループで削除します。成功後にデータグリッドを更新します<br>}<br>});<br>}<br>}<br>}, '-', {<br>text: "Modify", <br>iconCls: "icon-edit ",<br>handler: function () {<br>//編集する行を選択<br>var rows = $("#dg").datagrid('getSelections') ;<br>if (rows.length = = 1) {// 行が選択されるとイベントがトリガーされます<br>if (editFlag != unknown) {<br>$("#dg").datagrid(' endEdit', editFlag);//編集済み行を渡す前に編集を終了<br>}<br>if (editFlag == unknown) {<br>varindex = $("#dg").datagrid('getRowIndex' , rows[0]);//選択された行を取得します Index<br>$("#dg").datagrid('beginEdit',index);//編集を有効にし、編集する行を渡します<br>editFlag = インデックス;<br>}<br>}<br>}<br>}, '-', {<br>text: "save",<br>iconCls: "icon-save",<br>handler: function () {<br>$("#dg" ).datagrid('endEdit', editFlag);<br>}<br>}, '-', {<br>text: "Undo",<br> iconCls: "icon-redo",<br>handler: function () {<br>editFlag = unknown;<br>$("#dg").datagrid('rejectChanges');<br>}<br>} , '-'],<br>onAfterEdit: function ( rowIndex, rowData,changes) {//endEdit 追加後、保存時にトリガー <br>console.info(rowData);//バックグラウンドに渡されたデータが表示されますFirefox ブラウザーのコンソールで、これらのデータを使用してバックグラウンドに非同期的に追加できます。追加が完了したら、datagrid<br>editFlag = unknown;//Reset<br>}、onDblClickCell: 関数 (rowIndex, field, value) {// 行をダブルクリックして内容を変更します<br>if (editFlag != unknown) {<br>$("#dg").datagrid('endEdit', editFlag);//End編集中は、前に編集した行を渡します<br>}<br>if (editFlag == unknown) {<br>$("#dg").datagrid('beginEdit', rowIndex);//編集を有効にし、次の行を渡します編集する行 <br>editFlag = rowIndex;<br>}<br> }<br>});<br>}); <p>//検索ボタンをクリックしてイベントをトリガーします<br>function searchFunc() {<br>alert("123");<br>$("#dg").datagrid("load", sy. SerializeObject($ ("#searchForm").form()));//searchForm フォーム内の一連の要素をオブジェクトとして背景に転送します<br>//ここでは、リロードを使用する場合のリロードの使用方法を紹介します。現在のページはデフォルトで記憶されており、クエリをクリックすると、データが 3 個しか見つからず、各ページに 10 個のデータが表示され、現在のページ番号が 2 の場合、結果は表示されません。現在のページのクエリを実行すると、ページを前方にジャンプすることしかできなくなりますが、load<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></rows.length> </div> <br> <p>拡張エディターのメソッド: datetimebox</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="5698" class="copybut" id="copybut5698" onclick="doCopy('code5698')"><u>コードをコピー</u></a></span> コードは次のとおりです。</div> <div class="codebody" id="code5698"> <br>$(function () {<br> /*拡張エディターの datetimebox メソッド*/<br>$.extend($.fn.datagrid.defaults.editors, {<br>datetimebox: {//メソッドに名前を付けます<br>init: function (container, options) { <br>var editor = $('<input />').appendTo(container);<br>options.editable = false;//手動入力できないように設定します <br>editor.datetimebox(options); <br> return editor;<br>},<br>getValue: function (target) {//値の取得<br>return $(target).datetimebox('getValue');<br>},<br>setValue : function ( target, value) {//Set value<br>$(target).datetimebox('setValue', value);<br>},<br>resize: function (target, width) {<br>$ (target) .datetimebox('resize', width);<br>},<br>destroy: function (target) {<br>$(target).datetimebox('destroy');// 生成されたパネルを破棄します<br>} <br>}<br>});<br>});<br> </div> <p><strong>アイコン: </strong></p> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/20130408001.jpg"></p> <p> </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
