For complex operations, such as: After adding a row, in this line to do related operations will appear to be a bit laborious; I prefer the performance layer using templates, tags fill data, so I do a small component, and share with you.
Component Run Screenshot:
Design ideas:
Add a line of hidden rows to the table's THEAD, and when you want to add a row, copy the hidden rows, then populate the corresponding positions in the row with the instance data, and then add the line to the table, and the entire operation completes.
Templates: Hidden rows are the equivalent of templates, which are copied once when needed.
Tags: how do I populate the data when the template row is copied?
The practice of more components on the web is to pass in two arrays, a list of element names, a list of corresponding values, and a lookup of the copied rows, and find the names of the elements in the list of element names so that they value= the corresponding values. This can be done to meet the general requirements, because the table inside the general placement of text boxes, the value is placed to complete the task. For complex situations, the need to fill the data into other locations, this approach is inadequate.
My approach is to look at the copied template line as a string, find the tag in this string, and then populate the data with the corresponding tag, so that no matter where you want to fill the data, just put a tag on it, which is a lot more flexible than the above approach.
Code implementation (key point explanation)
The flag I define is ${property}, passing past data as a entity, when ${city} is found in string, the entity.city content is replaced ${city}, and when entity.city is null, replace ${city} ( Spaces in the Web page).
Dynamic Add Row method
Copy Code code as follows:
function Addinstancerow (tableid,names,values,functionname) {
var tableobj=gettargetcontrol (tableId);
var tbodyonlineedit=gettabletbody (tableobj);
var theadonlineedit=tableobj.getelementsbytagname ("THEAD") [0];
var elm=theadonlineedit.rows[theadonlineedit.rows.length-1].clonenode (true);
Elm.style.display= "";
if (typeof (names)!= "undefined") {
if (typeof (functionname) = = "undefined") functionname= "Setobjvaluebyname";
if (typeof (values)!= "undefined" &&values!=null) {
var entity=arraytoobj (names,values);
Setinputvalue (Elm,entity,functionname);
}
Else
Setinputvalue (Elm,names,functionname);
}
Tbodyonlineedit.appendchild (ELM);
}
Copy Code code as follows:
if (typeof (names)!= "undefined") {
if (typeof (functionname) = = "undefined") functionname= "Setobjvaluebyname";
if (typeof (values)!= "undefined" &&values!=null) {
var entity=arraytoobj (names,values);
Setinputvalue (Elm,entity,functionname);
}
Else
Setinputvalue (Elm,names,functionname);
}
4, add the rows filled with data to the table
Tbodyonlineedit.appendchild (ELM);
Difficult points, easy to issue point description
1, get Tbody,ie and Firefox are different, ie in the default case is for table plus tbody, and Firefox is not, so to make the corresponding judgment
Copy Code code as follows:
Get the Tbody control in table, note compatibility Firefox
function Gettabletbody (tableobj) {
var tbodyonlineedit=tableobj.getelementsbytagname ("tbody") [0];
if (typeof (tbodyonlineedit) = = "Undefined" | | Tbodyonlineedit==null) {
Tbodyonlineedit=document.createelement ("tbody");
Tableobj.appendchild (Tbodyonlineedit);
}
return tbodyonlineedit;
}
2, when filling, the implementation of two situations, one is based on the element's name, the other one is based on the tag fill
Code
Copy Code code as follows:
Add Table Rows Dynamically
functionname is "Setobjvaluebyname" based on the element name,
Names is required to be the element name, value is the equivalent
//
FunctionName to "" for tag padding
Requires names to be an object, value is null
function Addinstancerow (tableid,names,values,functionname)
3, when the flag is filled, a regular expression is used to find the tag, after the tag is found, the value of the attribute in the entity is retrieved, the value of the attribute is removed, the space in the replacement string is used, or there is a problem when the property value is empty, and the code is in the following function.
Code
Copy Code code as follows:
Add values based on flag settings
function Setobjvaluebyflag (obj,entity) {
var Objtemp=obj.parentnode;
var arrmatches=objtemp.innerhtml.match (/\${\w+}/g);
if (typeof (arrmatches) = = "Undefined" | | arrmatches==null| | typeof (Arrmatches.length) = = "Undefined" | | Arrmatches.length==null)
Return
var tempvalue= "";
var propertyvalue= "";
for (Var i=0;i<arrmatches.length;i++) {
Tempvalue=arrmatches[i].replace (/\${|} /g, "");
Propertyvalue=getentitypropertyvalue (Entity,tempvalue);
if (propertyvalue!=null) {
if (typeof (PropertyValue) = = "string") {
if (propertyvalue!= "")
Propertyvalue=propertyvalue.replace (/\s/g, "");
Else
Propertyvalue= "";
}
Objtemp.innerhtml=objtemp.innerhtml.replace (Arrmatches[i],propertyvalue);
}
else{
Objtemp.innerhtml=objtemp.innerhtml.replace (Arrmatches[i], "");
}
}
}
4, for the method of filling the mark, at the beginning of the idea is that the template line directly under the TR content as a symbol of the replacement of the text, but the display has no content, so only one by one of the contents of the TD to replace the logo, found that the display is correct, this place makes me a bit confused. It is obvious that the former approach is more efficient, but inexplicably not obvious, only to return to the second.
Function call Description
Code
Copy Code code as follows:
As explained above, this is the most basic external function to add a row
function Addinstancerow (tableid,names,values,functionname)
Add a list of entities add a few entity add a few lines to the table
TableId the ID value of the table to which you want to dynamically add rows
Entitylist Object array type,
function Addrowbyentitylist (tableid,entitylist)
Add an entity to a row
function Addrowbyentity (tableid,entity)
Delete the row where the event control is triggered
function Deletethisrow (Targetcontrol)
Delete all rows under a table
function Deleteallrow (tableId)
In the ie6,7,firefox2,3 test no problem, there are questions or mail badwps@163.com, thank you
Package download
