Table control implemented by tbl.js div, completely free and does not rely on jquery-HTML Tutorial-php.cn

Table control implemented by tbl.js div, completely free and does not rely on jquery

PHPz

Release： 2017-03-12 17:18:22

Original

2221 people have browsed it

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

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.1beta

Report 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"]]});

Copy after login

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"]]);

Copy after login

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"]]);

Copy after login

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 });

Copy after login

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 });

Copy after login

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 source

delete Delete

one row

clear

Clean up

edit Edit a row, empty parameter means edit the entire table

select Select a row

cancel_edit Cancel editing

cancel_select Cancel selection

select_change Select to changeFunction

Settings

Read-onlyAttributes

tbl::selects Selected rows

tbl::data data

tbl::dom DOM node

tbl::edits The row being edited, full table editing is not applicable

Construction 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

nancenter Non-numeric centering###

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!