Home > Article > Web Front-end > Table control implemented by tbl.js div, completely free and does not rely on jquery
Table control implemented by tbl.js div, completely free and does not rely on jquery
- PHPzOriginal
- 2017-03-12 17:18:222232browse
There is a relatively easy-to-use form control on html, which is datatable, but the editing, buttons
and other parts are charged, and only the basic functions are free. Moreover, when the size changes, it requires manual refresh and other tedious operations. So I developed a free one for everyone to use.This project has been used in the "VoidService Server Development Kit". Currently, it mainly supports Microsoft Edge browser, Chrome browser, others
have not been tested.tbl.js is completely free and can be modified at will. Welcome for
k.tbl.js supports list style, add, delete, modify, query, whole table search, grouping, paging function
, whole table editing, whole row Editing, single selection, multiple selection, style customization.can be embedded in various containers, such as jquery
's dialog and tabs. Version: 0.1betaReport a bug and I will fix it as soon as possible. There is no break in the New Year. If you do not need to modify the style, you do not need to load tbl.css, tbl.js will dynamically load the style sheet.Let's create a two-row table, built from existing DOM nodes
.1 html:<html><body><p></p></body></html>
2 new tbl(document.body.children[0],{data:[["row1"],["row2"]]});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 widths are adaptive using percentages. 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, maximum height300px, no header, no title, no footer, 5 pieces of data, button, get rowindex. This method will cause interlaced color changes, and the CSS can be modified to invalidate the style. 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 });Full table editing, single selection, one row must be selected, paging. We initialize a data first. The data bound by tbl.js must be an array
. I expect that the second column cannot be edited under any circumstances. 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 is added at the end. The added row of data must be an array. Non-array will be used as the group title text. insert Insert data
bind bind new data sourcedelete Delete
one row Clean upedit Edit a row, empty parameter means edit the entire tableselect Select a rowcancel_edit Cancel editingcancel_select Cancel selectionselect_change Select to changeFunction
SettingsRead-onlyAttributes
:tbl::selects Selected rowstbl::data datatbl::dom DOM nodetbl::edits The row being edited, full table editing is not applicableConstruction options:
max_height Maximum height, scroll bars will be displayed if it exceeds
page_size Page size
data Initialization data
header Whether to display the header
footer Whether to display the footer
info Whether to display information
paging Whether to display paging
title_bar Display title bar
title Title bar text
search Display search box
editable Full table editing
select Type of selection: 0, cannot be selected. 1, radio selection . 2, multi-select.tbl.single == 1, tbl.multiselect == 2 select_change Set selectionEvent processing
Function
must_select Must select a row
format Column format
width Width, can be a valid html width. For example: 100px or 20%. input is used to edit the input node attribute of status
, which is the same as the html/input attribute
name field name, displayed in the header
uneditable columns will not be able to Edited
editable columns will always be in editable state
The above is the detailed content of Table control implemented by tbl.js div, completely free and does not rely on jquery. For more information, please follow other related articles on the PHP Chinese website!