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

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

PHPz

リリース： 2017-03-12 17:18:22

オリジナル

2243 人が閲覧しました

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 サイトの他の関連記事を参照してください。