Table controls implemented by tbl. js div are completely free of charge, no jquery, tbl. jsjquery

Table controls implemented by tbl. js div are completely free of charge, no jquery, tbl. jsjquery

Currently, Table Control in html is a datatable, but editing and buttons are charged. Only basic functions are free of charge. In addition, manual refresh and other complicated operations are required when the size changes. So I developed a free one for everyone.

This project has been used in "virtual server Development Kit ". Currently, it mainly supports Microsoft Edge browser, Chrome browser, and other untested browsers.

Tbl. js is free of charge and can be modified at will. Welcome to fork.

Tbl. js supports list style, add, delete, modify, and query, full table search, grouping, paging, full table editing, full row editing, single choice, multiple choice, and style customization.

It can be embedded in various containers, such as jquery's dialog and tabs.

Version: 0.1 beta

Raise a bug and I will modify it as soon as possible. Do not rest for the New Year.

 

If you do not modify the style, tbl.css can be disabled, and tbl. js dynamically loads the style sheet.

 

Sample Code 1: (build from DOM node)

Html: New tbl (document. body. children [0], {data: [["row1"], ["row2"]});

 

Sample Code 2: (create a DOM node)

Var tb = new tbl ();
With (document. body) {insertBefore (tb. dom, firstChild )};
Tb. bind ([["row1"], ["row2"]);

 

Sample Code 3: (Multiple fields)

Var tb = new tbl (undefined, {format: [{width: "20%" },{ width: "20%" },{ width: "20%" },{ width: "20%" },{ width: "20%"}]});
With (document. body) {insertBefore (tb. dom, firstChild )};
Tb. bind ([["row1", "data", "data"], ["row2", "data", "data ", "data", "data"]);

 

Sample Code 4: (list style, maximum height PX, no header, no title, no footer, 5 data entries, buttons, get row index)

Html: Var tb = new tbl (document. body. children [0], {
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,
Format :[
{Width: "90%", nancenter: true, input: {type: "text "}},
{Width: "10%", editable: true, input: {type: "button", value: "del", onclick: function () {tb. delete (tb. get_related_rowid (this ));}}}
]
});

 

Sample Code 5: (full table editing, single choice, one row required, pagination)

Var tb_data = [];
For (var I = 0; I <106; I ++ ){
Tb_data [I] = [Math. random ()> 0.5? True: false, Math. random (), "1970-01-01", Math. floor (Math. random () * 10), I, 0];
}
Tb_data [I] = "this is group"; I ++;
Tb_data [I] = ["this is text"]; I ++;
For (; I <578; I ++ ){
Tb_data [I] = [I, Math. random (), "2017-02-01"];
}
Var tb = new tbl (document. body. children [0], {
Editable: true, select: tbl. single, must_select: true, paging: true, data: tb_data, page_size: 15,
Format :[
{Width: "5%", input: {type: "checkbox", check: "true "}},
{Width: "30%", name: "name", uneditable: true },
{Width: "20%", name: "date", input: {type: "date "}},
{Width: "10%", name: "select", input: {type: "select", options: [,]},
{Width: "20% "},
{Width: "15%", input: {type: "radio", name: "only "}}
]
});

 

API:

Add at the end of add. Adding a row of data must be an array. A non-array will be used as the group title text.

Insert data

Bind to new data source

Delete a row

Clear

Edit a row. An empty parameter indicates editing the entire table.

Select a row

Cancel_edit cancel editing

Cancel_select cancel Selection

Select_change select to change function settings

 

Read-Only attributes:

Tbl: Row selected by selects

Tbl: data

Tbl: dom DOM Node

Tbl: The row being edited by edits. Full table editing is not applicable.

 

Construction Options:

Max_height: specifies the maximum height. A scroll bar is displayed when the value exceeds the upper limit.
Page_size page size
Data initialization data
Indicates whether the header is displayed.
Whether footer displays the footer
Info display information
Whether paging displays pages
Title_bar display title bar
Title text
Search Display search box
Editable full table editing
Select selected type: 0, cannot select. 1, single choice. 2, multiple choice. tbl. single = 1, tbl. multiselect = 2
Select_change settings select event processing functions
Must_select must select a row
Format
Width, which can be a valid html width. For example, 100px or 20%.
The input node attribute used to edit the status, which is the same as the html/input attribute.
Name field name, displayed in the header
The ditditable Column cannot be edited.
The editable column will always be editable.
Nancenter non-numeric Center

 

Project/source code:

Github: https://github.com/FettLuo/tbl.js