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

Source: Internet
Author: User
Tags microsoft edge

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.