tbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。

HTMLにはデータテーブルとして比較的使いやすいテーブルコントロールが出来ましたが、編集やボタンなどの部分は有料で、基本的な機能のみ無料です。さらに、サイズが変更されると、手動で更新するなどの面倒な操作が必要になります。そこで、誰でも使える無料のものを開発しました。

このプロジェクトは「Voidサービスデバイス開発キット」で使用されています。現在、主に Microsoft Edge ブラウザー、Chrome ブラウザー、その他はまだテストされていません。

tbl.js は完全に無料であり、自由に変更できます。fork へようこそ。

tbl.js は、リスト スタイル、追加、削除、変更、クエリ、テーブル全体の検索 、 グループ化 、 ページング関数 、テーブル全体の編集、行全体の編集、単一選択、複数選択、スタイルのカスタマイズをサポートしています。

は、

jqueryのダイアログやタブなど、さまざまなコンテナに埋め込むことができます。

バージョン: 0.1beta

バグを報告してください。できるだけ早く修正します。新年に休みはありません。

スタイルを変更する必要がない場合、tbl.cssをロードする必要はありません。tbl.jsがスタイルシートを動的にロードします。

既存の

DOM ノード から構築された 2 行のテーブルを作成しましょう。

1 html:<p></p>
2 new tbl(document.body.children[0],{data:[["row1"],["row2"]]});

自分で作成した DOM ノードをドキュメント本文に挿入します。

1 var tb = new tbl();
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1"],["row2"]]);

複数のフィールドがあるテーブルの場合、列の幅はパーセンテージを使用して適応されます。

1 var tb = new tbl(undefined, {format:[{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"}]});
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1","data","data","data","data"],["row2","data","data","data","data"]]);

リストスタイル、最大高さ

300px、ヘッダーなし、タイトルなし、フッターなし、データ5個、ボタン、行インデックスを取得。

この方法ではインターレースカラーの変更が発生し、CSS を変更してスタイルを無効にする可能性があります。

1 html:<p></p>
2 var tb = new tbl(document.body.children[0], {
3 editable: false, maxheight: "300px", header: false, title: false, footer: false, data: [[1], [2, "remove"], ["nan - not a number", "del"], [4, "del"], [5, "del"]], page_size: 100,
4 format: [
5      { width: "90%", nancenter: true, input: {type:"text"}},
6      { width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb.delete(tb.get_related_rowid(this));}}}
7      ]
8 });

テーブル全体の編集、単一選択、1 行を選択する必要がある、ページング。

最初にデータを初期化します。tbl.js によってバインドされるデータは

array である必要があります。

2 番目の列はいかなる状況でも編集できないと予想されます。

 1 var tb_data = [];
 2 for (var i = 0; i 0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
 4 }
 5 tb_data[i] = "this is group"; i++;
 6 tb_data[i] = ["this is text"]; i++;
 7 for (; i <p>API<a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">:</a></p>addは最後に追加されます。追加されたデータ行は、グループタイトルのテキストとして使用されます。 <p></p>insert <p>データを挿入<a href="http://www.php.cn/code/5336.html" target="_blank"></a></p>bind 新しいデータソースをバインド<p></p>delete <p>行を削除<a href="http://www.php.cn/php/php-tp-remove.html" target="_blank"></a></p>clear<p> クリーンアップ<a href="http://www.php.cn/wiki/917.html" target="_blank"></a>edit 行を編集、空のパラメータはテーブル全体を編集することを意味します</p><p>select 行を選択</p> <p>cancel _edit 編集をキャンセル ECancel_Select 選択をキャンセル </p><p>Select_Change 変更を選択 </p> 関数 <p> Set </p><p> 読み取り専用 <a href="http://www.php.cn/wiki/145.html" target="_blank">: </a></p>tbl :: SELECTS が選択 <p><a href="http://www.php.cn/wiki/169.html" target="_blank">tbl :: data ::edits 編集中の行、テーブル全体の編集は該当なし</a></p>構築オプション: <p></p>max_height 最大の高さを超えた場合、スクロールバーが表示されます <p> page_size ページサイズ </p> data 初期化データ <p> header ヘッダーを表示するかどうか </p> footer フッターを表示するかどうか <p> info 情報を表示するかどうか </p> paging ページングを表示するかどうか <p> title_bar タイトル バーを表示する </p> title タイトル バーのテキスト <p> search 検索ボックスを表示する <br> テーブル全体の編集 <br> select 選択の種類: 0、単一選択、2、複数選択。 == 1, tbl.multiselect == 2<br> select_change 選択の設定<br>イベント処理<br>関数<br> must_select 行を選択する必要があります<br> format 列のフォーマット<br> width 幅は、有効な HTML 幅にすることができます。例: 100px または 20%。<br> INPUT は、<br> 状態を編集する INPUT ノード属性を編集するために使用されます。<br> HTML/Input 属性と同じ名前です。 <br> 名前フィールド名、ヘッダーの UNEDITABLE 列に表示されます <a href="http://www.php.cn/code/5690.html" target="_blank"> </a> nancenter non-ナンバーセンター<br></p>

以上がtbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。