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

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.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:<p></p>
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:<p></p>
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 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 <a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank"></a>API:<p></p>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. <p><a href="http://www.php.cn/code/5336.html" target="_blank">insert </a>Insert data</p><p></p>bind bind new data source<p><a href="http://www.php.cn/php/php-tp-remove.html" target="_blank">delete </a>Delete </p>one row<p><a href="http://www.php.cn/wiki/917.html" target="_blank"></a>clear</p> Clean up<p></p>edit Edit a row, empty parameter means edit the entire table<p></p>select Select a row<p></p>cancel_edit Cancel editing<p></p>cancel_select Cancel selection<p><a href="http://www.php.cn/wiki/145.html" target="_blank">select_change Select to change</a>Function</p>Settings<p><a href="http://www.php.cn/wiki/169.html" target="_blank">Read-only</a>Attributes</p>:<p></p>tbl::selects Selected rows<p></p>tbl::data data<p></p>tbl::dom DOM node<p></p>tbl::edits The row being edited, full table editing is not applicable<p></p>Construction options:<p><br>max_height Maximum height, scroll bars will be displayed if it exceeds <br> page_size Page size <br> data Initialization data <br> header Whether to display the header <br> footer Whether to display the footer <br> info Whether to display information <br> paging Whether to display paging <br> title_bar Display title bar <br> title Title bar text <br> search Display search box <br> editable Full table editing <br> select Type of selection: 0, cannot be selected. 1, radio selection . 2, multi-select.tbl.single == 1, tbl.multiselect == 2<a href="http://www.php.cn/code/5690.html" target="_blank"> select_change Set selection</a>Event processing<br>Function<br> must_select Must select a row<br> format Column format<br> width Width, can be a valid html width. For example: 100px or 20%.<a href="http://www.php.cn/code/8243.html" target="_blank"> input is used to edit the input node attribute of </a> status<br>, which is the same as the html/input attribute <br> name field name, displayed in the header <br> uneditable columns will not be able to Edited<br> editable columns will always be in editable state</p> 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!