Table controls implemented by tbl. js div are completely free of charge and do not rely on jquery, tbl. jsjquery

Table controls implemented by tbl. js div are completely free of charge and do not rely on 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.

 

Let's create two rows of tables and build them from the existing DOM nodes.

1 html:
 
Insert the self-created DOM node into the document body.
1 var tb = new tbl();2 with (document.body) { insertBefore(tb.dom, firstChild) };3 tb.bind([["row1"],["row2"]]);
 
For tables with multiple fields, the column width is adaptive to the percentage.
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"]]);
 
List style, up to PX height, no header, no title, no footer, 5 data entries, buttons, get row index.
This method will change the color of the line, and you can modify CSS to make the style invalid.
1 html:
 
 
Full table editing, single choice, must select one row, pagination.
First, initialize a data. The data bound to tbl. js must be an array.
I expect that the second column cannot be edited in any situation.
 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 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