ホームページ > 記事 > ウェブフロントエンド > tbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。
tbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。
- PHPzオリジナル
- 2017-03-12 17:18:222173ブラウズ
HTMLにはデータテーブルとして比較的使いやすいテーブルコントロールが出来ましたが、編集やボタンなどの部分は有料で、基本的な機能のみ無料です。さらに、サイズが変更されると、手動で更新するなどの面倒な操作が必要になります。そこで、誰でも使える無料のものを開発しました。
このプロジェクトは「Voidサービスデバイス開発キット」で使用されています。現在、主に Microsoft Edge ブラウザー、Chrome ブラウザー、その他はまだテストされていません。
tbl.js は完全に無料であり、自由に変更できます。fork へようこそ。
tbl.js は、リスト スタイル、追加、削除、変更、クエリ、テーブル全体の検索 、 グループ化 、 ページング関数 、テーブル全体の編集、行全体の編集、単一選択、複数選択、スタイルのカスタマイズをサポートしています。
は、jqueryのダイアログやタブなど、さまざまなコンテナに埋め込むことができます。
バージョン: 0.1betaバグを報告してください。できるだけ早く修正します。新年に休みはありません。 スタイルを変更する必要がない場合、tbl.cssをロードする必要はありません。tbl.jsがスタイルシートを動的にロードします。 既存のDOM ノード から構築された 2 行のテーブルを作成しましょう。
1 html:<html><body><p></p></body></html>
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:<html><body><p></p></body></html>
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 < 106; i++) {
3 tb_data[i] = [Math.random()>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 < 578; i++) {
8 tb_data[i] = [i, Math.random(), "2017-02-01"];
9 }
10 var tb = new tbl(document.body.children[0], {
11 editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
12 format: [
13 { width: "5%", input: { type: "checkbox", check: "true" } },
14 { width: "30%", name:"name", uneditable:true },
15 { width: "20%", name:"date", input: { type: "date" } },
16 { width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
17 { width: "20%" },
18 { width: "15%", input: {type:"radio", name:"only"}}
19 ]
20 });
API:
addは最後に追加されます。追加されたデータ行は、グループタイトルのテキストとして使用されます。 insert bind 新しいデータソースをバインドdelete clearクリーンアップedit 行を編集、空のパラメータはテーブル全体を編集することを意味します
select 行を選択
cancel _edit 編集をキャンセル ECancel_Select 選択をキャンセル
Select_Change 変更を選択
関数Set
読み取り専用 :
tbl :: SELECTS が選択tbl :: data ::edits 編集中の行、テーブル全体の編集は該当なし
構築オプション: max_height 最大の高さを超えた場合、スクロールバーが表示されますpage_size ページサイズ
data 初期化データheader ヘッダーを表示するかどうか
footer フッターを表示するかどうかinfo 情報を表示するかどうか
paging ページングを表示するかどうかtitle_bar タイトル バーを表示する
title タイトル バーのテキスト search 検索ボックスを表示する
テーブル全体の編集
select 選択の種類: 0、単一選択、2、複数選択。 == 1, tbl.multiselect == 2
select_change 選択の設定
イベント処理
関数
must_select 行を選択する必要があります
format 列のフォーマット
width 幅は、有効な HTML 幅にすることができます。例: 100px または 20%。
INPUT は、
状態を編集する INPUT ノード属性を編集するために使用されます。
HTML/Input 属性と同じ名前です。
名前フィールド名、ヘッダーの UNEDITABLE 列に表示されます nancenter non-ナンバーセンター
以上がtbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。