EasyTable. js makes the html table layout very simple !, Easytable. jstable

EasyTable. js makes the html table layout very simple !, Easytable. jstable

Before the Chinese New Year, due to work needs, I spent a week developing a pure js web page plug-in, EasyTable. js. As the name suggests, this plug-in is used to handle various situations of tables in html. Many websites do not like to use table layout, because although the table layout is strong in layout, the modification capability is poor, and it will become very troublesome to add or delete data in it once it is written to death. However, compared with the float layout, the table layout can easily add borders. If a div label in a float layout is added with a frame of only 1px, the layout that was originally well arranged will be wrapped immediately. Although this problem can be solved through other methods, after all, the solution is not simple. In addition, table layout is advantageous for similar data (especially table-type data. All right, let's talk about my plug-ins right away. The original size of this plug-in is about 30 kb, and it is only 14 KB after compression. I think it is acceptable for a web page to use a small plug-in of 14 kb? In terms of compatibility, ie, Firefox, and Google of ie8 and above are all correct. Safari and opera have not been tested, but it is estimated that there will be no problems. For earlier versions of Internet Explorer, I hate it very much. I hope they will disappear in the Chinese market as soon as possible, so I will not consider compatibility with them. Can you use it? I didn't test it. Let's see it. Haha.

The following describes how to use this plug-in. (Even the official api. Haha, there is not much content, so you can learn it all at once .)

First, this plug-in actually requires only three methods, and other internal methods are not required. Then we will introduce these three methods in sequence.

The first method is used to draw a table, as follows:

EasyTable. draw ();

Then, input an object in the method. The content of the object is as follows (only the targetId is required, and other items can be optional ):

First, it is targetId: "XX id". This attribute is required. The created table is stored as a sub-object in the object of the specified id. Id is used to ensure optimal execution speed. Because I don't want to write too much unnecessary code on the object binding, I only use the simplest and most efficient document. getElementById () method to process object binding. If your page contains only one table, you can add a div below the body and place our table below the div.

The next step is the col attribute, which must be a number, that is, the number of columns in your table. If this parameter is not set, it is the three columns by default.

The row attribute determines the number of rows in your table. The default value is one row. If you have four columns to enter in this table, and the number of columns you set is three, the first row will have the three data you put, the second line is automatically generated by the plug-in. The first td stores your fourth data, and the last two td files are empty.

Type attribute. Currently, you can only enter vertical. If you do not enter vertical, your data will start from the first row normally, and then be arranged in the third row of the second row, and so on, if vertical is entered, the data is arranged vertically. However, it must be noted that the data is arranged normally only when the total number of cells (that is, the product of col and row) is greater than or equal to the total length of the data. The extra parts will be automatically expanded into your table in the normal horizontal arrangement.

Data Attribute. Input an array to save the data you want to store in the table. When the total number of cells is greater than data. length, empty td is used to automatically complete the table. If the total number is smaller than, a new row is created to store the data. This process is automatic and users do not need to worry about it.

The deuce attribute. This word is equivalent to a split. As the name suggests, if this attribute is set to true, the width of each column is fixed and divided equally by 100% by the number of columns, of course, if you want to set different width of each column, you need to use the following colStyle instead of the deuce.

TdStyle attribute, which is used to input a string, such as: tdStyle: "background-color: yellow; border: 1px solid green; height: 40px;" This attribute will affect all the styles of td, note.

The properties of trStyle and tableStyle are similar to the tdStyle above.

The colStyle and rowStyle attributes, column attributes, and row attributes are passed in an array. The first value in the array acts on the specified first row/column. For example, if you want to apply the background color to the second line instead of the first line, write: colStyle: ["", "background-color: yellow"]. (In fact, these two methods are not used much, because I have created a specific id for all tr and td methods, if you only want to perform local operations, use id to perform operations on dom objects faster.) Note that if you call the following method to insert rows/columns, these two attributes are invalid for newly inserted rows or columns. As to why it is ineffective, it is not a bug that I neglected to leave. It is because sometimes when the project needs to insert a table, the inserted content is not affected by the original style. If you need it, you can add the property.

The colspan and rowspan methods are used to pass in an object. For example, colspan: {"()": 2 )": 3} the coordinates in double quotes are the same as those in our junior high school. () Indicates the one in the first column of the first row, and the other is similar. colspan is a cross-column and rowspan is a cross-row. I do not recommend that you use these two methods too much, because it is easy to cause table confusion, and the colStyle and rowStyle attribute settings will be affected by these cross-row and cross-column grids.

The next step is to add columns or rows.

AppendCol: {,}; this is to add two columns (blank columns) after the first column, and then add four columns after the second column. Similarly, the prependCol appendRow prependRow method does not need to be introduced?

The following are the emptyCol and emptyRow methods. You can input a number or an array composed of numbers to clear the content of the specified rows and columns (note that the entire row is not deleted, just clear the content)

Next, removeCol and removeRow are used in the same way as above. This is the complete removal.

The trAttr method, for example, trAttr: {"onclick": ["alert (1)", "alert (2)"], "onmouseover": ["this. style. backgroundColor = 'red' "]," onmouseout ": [" this. style. backgroundColor = 'white' "]},

The first thing to pass in is an object. Each attribute in this object has different attr attributes, such as onclick and onmouseover. These attributes are followed by an array, indicating the objects acting on the first tr. Some people may say that this method is too troublesome to process the entire table? Yes, it is very troublesome. In addition, no one will do this in real work. This method is only used for small tables with a large volume of table objects. We have another method to deal with it. Continue to look at it and you will be enlightened.

If there is trAttr, there is tdAttr. Here is an example tdAttr: {"onmouseover": ["() [alert (1) [alert (2)] "]}, please be careful. This time, two strings are stored in the array, and the format of the two strings is a coordinate plus a pseudo array. TdAttr is also an inconvenient and headache method, and is only applicable to small-scale tables.

The last attribute is callback, and a function with table and tableid is returned, so that you can directly operate the table. Originally, I was planning to return all tr and td together in the form of an array, but that would add unnecessary volume to this plug-in, so forget it. I believe that it is not difficult to operate the tr and td operations under a table object? What's more, my tr and td also have specific IDS (the user can generate a table by himself, and then debug the table to see it clearly. Here we will not waste space to repeat it .)

Example: callback: function (table, tableid ){

Table. style. backgroundColor = "red"; // The returned table object is dom and can be operated directly.

// $ ("#" Your tableid).css ("background-color", "red"); or jquery

}

So far, the first method of EasyTable has been introduced. The above method is more than enough to generate a relatively complex static layout. However, as mentioned earlier, if it is a relatively large table layout or a dynamic table layout, the above method still does not work. The following describes two methods: addTr and addTd, which are used to dynamically add Tr or Td. In this way, with ajax and other data request methods, you can dynamically load the table. Well, let's not talk much about it. Please refer to the following:

The addTr method also imports an object. For clarity, let's summarize the draw method above. Let me write an example:

Var tables = []; // first create an array to save all the tables, because EasyTable. js can be used infinitely on an html page.

Var div = document. createElement ("div"); // use JavaScript to create a div object.

Div. id = "abc"; // you can give this div an id at will. Here, you can write it at will. abc will do as long as the reader can understand it. If the reader doesn't understand js, it doesn't matter if you only use jquery. The functions of these statements are equivalent to creating a div in the body and naming the div id abc, should I have understood it so straightforward?

Document. body. appendChild (div); // you can place a div in the body.

EasyTable. draw ({
TargetId: "abc", // bind the div
Data: [1, 2, 3, 4, 5],
Deuce: true,
TdStyle: "background-color: deepskyblue; text-align: center; border: 1px solid gray; height: 30px ;",
Col: 3,
Callback: function (table ){
Tables. push (table); // here I put the table object in the array created above
}
})

If there is no picture and no truth, I will insert a picture. I usually like debugging with Firefox and firebug. However, to prove that ie can also use this plug-in, I will first test it with ie.

EasyTable. addTr ({
Target: tables [0],
Data: ["Xiao Ming", "Xiao Li"],
Styles: ["color: red; font-size: 19px",],
Attr: {"onclick": "alert (1 )"},
ToggleStyle: "background-color: # ccc ",
});

This is a comparison between ie and Firefox Insert rows. In Firefox, the default font is vertically centered, but ie is not, so you need to set it yourself. I will not go into details here.

The target attribute refers to the table object rather than its id. If jquery is used, you can write it like this:

Target: $ ("# EasyTable0") [0]; // the id of the table created with EasyTable is named according to the serial number they created, which is very simple, for example, the first is EasyTable0, and the second is EasyTable1.

The first is data. Input an array. Do you need to explain it again?

Next is the style attribute, which acts on a whole line of tr and is passed in as a string,

Next is the styles attribute. The input is an array that acts on each td in the tr row.

The next step is attr. The input is an object, which serves the whole row of tr.

Next there is attrs, which is passed in an array. Each object in the array is analogous to attr, which acts on each td.

The toggleStyle attribute is the same as the style attribute, but it is cyclical. If one execution is performed, the next execution will not be executed, and the next execution will be performed again. What do you mean? For example, if you insert five rows to a table (that is, you have called the addTr () method five times) and set toggleStyle: "background-color: red ", then the first line will become red, the second line will not, the third line will become red again, the fourth line will not, and the fifth line will become red ...... So we can understand the role of this attribute?

If you want this attribute to start from the second one, just add table. trToggleStyle = false in the callback method of draw.

Similarly, toggleAttr, which is the same as attr, is also a periodic loop. You can add table. trToggleAttr = false to the callback of draw from the second one. However, it is estimated that this is less useful? Start it first, and it may be used later.

(The toggleStyle will not change color because the background color of td in the above example is set to the sky blue, and tr will not work, so I will give another example, this time, I removed the background color from the above tdStyle and executed the addTr three times)

With the above method, it is easy to insert data dynamically. (You only need to write a for loop or use $. each () of jquery to repeatedly execute this addTr method .)

The addTd method is similar to the addTr method. You also need to bind a target table and insert it. This method will automatically identify the last empty position of the table you specified, then put the object in, instead of starting another line. However, it should be noted that if the table is vertical and the number of cells is insufficient, addTd will become a normal horizontal arrangement and insertion. In addition, the lattice removed by the emptyCol and emptyRow methods is not correct.

This method also has attributes such as data, style, attr, toggleStyle, and toggleAttr. Its usage is the same as that of the above addTr method, so there is no need to repeat it. To enable the toggle attribute to start from the second one, you only need to add table. tdToggleStyle = false in the draw callback method.

Now, we will introduce the EasyTable. js instructions here. Below of course is given a link, welcome to use: http://download.csdn.net/detail/sinolzeng/8456089

There may be some minor bugs in the current version. If you find any problems, you can leave a message here and I will immediately handle and upgrade this plug-in if I have time. Finally, I wish you a good start for the new year and good luck to the New Year !!