Here we need to control the user's input validation, the addition of the table deletion, the user input data statistics aggregation, there are corresponding calculation columns such as the total price of goods = commodity quantity of goods, and so on, at the same time when users submit I also need to get submitted to the backend server processing in the store to our database. This plugin simply handles these tedious things.
Plug-in Properties Description:
1:rowtemplate: This is the template that inserts the column, in the template our serial number such line numbers indicate the need rownum class. A unique number in the template, such as our RadioButton Name property requires a unique name group for each TD cell, and a placeholder for {0}, such as ID, which requires a unique attribute. At the same time in our table processing some behavior statistics rows or data fixed rows, is not deleted by the user, you need to fixed=true. As well as each input or label control, need to return the extracted value of the need to have property= "PropertyName" logo.
2:addtrigger: This is a jquery selector that triggers an increase in rows.
3:addposition: is inserting the row inserts the position, the default at last, but should our demand, possibly at the end is the summary row and so on fixed row, therefore also added three ways: First, also is the numerical value, the positive number indicates starts from the beginning line computation, the negative numbers indicates from the last start calculates.
4:removetrigger: Delete the indicator, it is an array, can have multiple delete buttons, while each object of the array is also an object has selector trigger button of the jquery selector, handler trigger handle, the value has a first delete row, Last column, current when current, all deletes delete fixed=true columns.
5: At the same time can pass $ (selector). Updatesortnum (); Replace all TD with RowNum row number columns. Actually here I consider can remove the TD limit.
6:$ (Rowselector). Getrowobj (): Gets the JavaScript Row object with property as attribute.
7:$ (Tableselector). Gettableobj (): Gets the table's property-based JavaScript array object, which is a collection of row objects (an array).
8:getsource (Savehiddentfield): Gets the set of attributes for the XML organization, which is automatically assigned to Savehiddentfield if the Savehiddentfield selector is passed in.
Here's the item: Root:item the default item,root for each row of data XML nodes is the XML root node default root. With XML, we can parse XML directly in the background or directly into a DataTable using DataSet.ReadXML ().
8:$ (Inputselector). GetValue (): Gets the value of the control: Supports Text,label,checkbox,radio,label,td,textarea values. Where the radio value is selected Value,checkbox the value for all selected row value "," number delimited string.
9:calculates: Calculates a summary, is an array object, has selector: summary display the actual expense amount of the financial can not be higher than the approval amount, and the approval amount cannot be higher than the actual budget amount of the selector, column: summarized properties, Corresponds to the property attribute that we attached above. Func: For summary processing: Supports aggregate functions: SUM,MAX,MIN,COUNT,AVG, and user-defined functions (must have a return value), the passed-in parameter is an entire column property array.
10:calculatescolumn: Computed column, also a JS array, with an trigger array that represents the property that triggers the calculation property,column the Property,func custom handler for the computed column. (Here nonsense a few words would like to use the expression, eval processing automatic calculation, but feel the need to change too much bad control, so it is better to give the user to implement a function as a proxy delegate, as a callback function); The actual expenditure on the verification finance mentioned above cannot be higher than the approval amount, and the approval amount cannot be higher than the actual budget amount. It can also be used as a validation trigger.
There is no data type validation in this plugin, because the need for verification is too big, too many, and we have a lot of excellent jquer verification plug-ins, with the use will be very practical. You can also control yourself: for example, my two simple validations:
Copy Code code as follows:
$ (". DateTime"). Live ("Focus", function () {
Wdatepicker ({readonly:true, datefmt: ' YYYY year mm month DD Day '})//mydate97
});
$ (". Number"). Live ("KeyUp", function () {
This.value = This.value.replace (/[^-\d\.) /g, "");
}). Live ("KeyDown", function (e) {
if (E.which = = 189) {
$ (this). Val ( -1 * parsefloat ($ (this). Val ()))-Trigger ("change");
E.stoppropagation ();
E.preventdefault ();
}
});
The above nonsense too much, the following direct demo:
Oh, I forgot to remind you that in this plugin the table is required to follow the standard w3c,thead,tbody. In Thead we can add our own table header settings, regardless of the complexity of the multiple table header structure.
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "MEFASPNET.aspx.cs" inherits= "Mefaspnet"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd %22>
<title></title>
<script src= "Js/jquery-1.4.2.js" type= "Text/javascript" ></script>
<script src= "Js/dynamictable.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
function m (v) {
return v[0]+100;
}
$ (function () {
$ ("table"). DynamicTable (
{
Addtrigger: ". Add",
Removetrigger: [{selector: ". Delete", handler: "A"}, {selector: ". DeleteRow", Handler: "Current"}],
Rowtemplate: "<tr><td class= ' rownum ' property= ' sortnum ' ></td><td> <input ' text ' property= ' name '/></td><td><input type= ' text ' property= ' age ' class= ' number '/></td> '
+ "<td> <input type= ' Radio ' property= ' Sex ' value= ' 1 ' name= ' test{0} ' style= ' width:10px '/>nan<br/>" <input type= ' Radio ' style= ' width:10px ' value= ' 0 ' name= ' test{0} '/>nv</td> '
+ "<td><input type= ' text ' property= ' email '/></td><td><input type= ' text ' property= ' phone ' /></td><td><input type= ' text ' property= ' date ' class= ' datetime '/> ' +
"<td><input property= ' checkbox ' type= ' checkbox ' value= ' 1 ' style= ' width:10px '/>test1<input type= ' CheckBox ' value= ' 2 ' style= ' width:10px '/>test2</td> '
+ "</td><td style= ' text-align:center; ' ><a class= ' deleterow ' style= ' Cursor:hand; > "
+ " Delete </a></td></tr> ',
Addposition:-1,
Calculates: [{selector: "#totalage", Column: "Age", Func: "Sum"}],
Calculatescolumn: [{trigger: [' age ', ' name '],column: ' Date ', Func:function (o,rowobj) {o.value =parsefloat (rowobj.age) +parsefloat (Rowobj.name); } }]
}
);
});
</script>
<style type= "Text/css" >
. TableStyle
{
width:99%;
Height:auto;
Overflow:hidden;
border:1px solid #4772AB;
Border-collapse:collapse;
Background: #D8EAFF;
margin:2px;
}
. TableStyle Thead TD
{text-align:center;
}
. TableStyle TH, TD
{
Border:solid #4772AB;
border-width:0 1px 1px 0;
padding:2px;
}
. TableStyle th
{
Text-align:right;
Font-weight:normal;
}
. TableStyle TD
{
Text-align:left;
Background: #FFFFFF;
}
. TableStyle. Title
{
width:99%;
Font-size:larger;
line-height:20px;
Text-align:center;
Background:url (images/right_head.jpg) repeat-x;
padding:0;
}
Table. Grid th
{
width:99%;
height:16px;
Overflow:hidden;
border:1px solid #4772AB;
Border-collapse:collapse;
Background: #D8EAFF;
padding-left:1px;
Font-weight:normal;
Text-align:left;
}
Table input
{
border:0px;
width:98%;
}
</style>
<body>
<form id= "Form1" runat= "Server" >
<table style= "width:100%" border= "1" cellpadding= "0" cellspacing= "0" class= "TableStyle" >
<thead>
<tr style= "Text-align:center;" >
<TD rowspan= "2" >
Serial number
</td>
<TD rowspan= "2" >
Name
</td>
<TD rowspan= "2" >
Age
</td>
<TD rowspan= "2" >
Sex
</td>
<TD colspan= "2" >
Contact information
</td>
<TD rowspan= "2" >
Date
</td>
<TD rowspan= "2" >
Test checkbox
</td>
<TD rowspan= "2" >
<a class= "Add" >
Added </a>
<a class= "Delete" style= "Cursor:hand;" >
Delete </a>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
Phone
</td>
</tr>
</thead>
<tbody>
<tr fixed= "true" ><td colspan= "9" ></td></tr>
</tbody>
</table>
<input type= "text" id= "Totalage"/>
<input type= "button" value= "GetSource" onclick= "alert (' table '). GetSource ());"/>
<input type= "button" value= "GetObject"/>
<div id= "Resultdiv" ></div>
<script type= "Text/javascript" >
$ ("input:[value= ' GetObject ']"). Live ("Click", Function () {
var obj = $ ("table"). Gettableobj ();
$ ("#resultdiv"). HTML ("");
for (var i = 0; i < obj.length; i++) {
for (Var o in obj[i]) {
$ ("#resultdiv"). HTML ($ ("#resultdiv"). HTML () + "" + O + "->" + obj[i][o]);
}
$ ("#resultdiv"). HTML ($ ("#resultdiv"). HTML () + "<br/>");
}
});
</script>
</form>
</body>
Test code is messy, do not consider the actual nature, such as the title date, as a computed column, the age as a statistical column, in the background of the input summary, please forgive. Have the opportunity to write a few demo in good.
There are any bugs, please put forward, I will repair as soon as possible. At the same time also thank you for your not give enlighten.
Author: Breakers
