In my page processing, sometimes form processing is required. You need to add and modify multiple records. Here, we need to control user input verification, add and delete tables, statistical aggregation of user input data, and calculation columns such as total price of commodities = unit price of commodities * quantity of commodities, another example is that when a user submits a file, I also need to obtain the file submitted to the backend server and process it in the database. This plug-in simply handles these cumbersome tasks.
Description of plug-in attributes:
1: rowTemplate: This is the template for inserting columns. In the template, rownum class is required for row numbers such as serial numbers. In the template, the name attribute of our radiobutton needs a unique name group in each td cell. For example, if id needs a unique attribute, the placeholder of {0} is required. At the same time, some rows or fixed Rows of data in table processing will not be deleted by users. Therefore, fixed = true is required. For each input or label control, the property = "propertyname" label is required for returning the extracted value.
2: addTrigger: This is a jQuery selector that triggers the addition of rows.
3: addPosition: it refers to the insert position of the inserted row. The default value is at the end of the last row. However, according to our requirements, there may be fixed Rows such as the summary row at the end, so we also add three methods: first, there is a value. A positive number indicates that the calculation starts from the start row, and a negative number indicates that the calculation starts from the end.
4: removeTrigger: indicates the deletion identifier. It is an array and can have multiple deletion buttons. Each object in the array is also a jQuery selector with the selector trigger button, handler triggers the processing method. The value is "first" to delete the first row, last column, current column, and all Delete columns that are not fixed = true.
5: You can use $ (selector). updateSortNum (); to replace all row number columns with rownum. In fact, I want to remove the limitation of td here.
6: $ (rowselector). getRowObj (): gets the javascript row object with property as the attribute.
7: $ (tableselector). getTableObj (): obtains the javascript array object with property as the attribute of the table, which is a collection of row objects (arrays ).
8: getSource (saveHiddentField): gets the attribute set of the xml organization. If the saveHiddentField selector is input, the value is automatically assigned to the saveHiddentField.
Here, item:, root: item is the default item of the xml node for each row of data, and root is the default root node for xml. After obtaining xml, we can directly Parse xml in the background, or directly convert it to able using DataSet. ReadXml.
8: $ (inputselector). getValue (): obtains the control value. Values of the control include text, label, checkbox, radio, label, td, and textarea. The value of radio is selected, and the value of checkbox is the comma (,) that separates all values in the selected row.
9: Calculates the summary. It is an array object with selector. The actual amount of expenditure for controlling and verifying the finance cannot be higher than the approval amount, and the approval amount cannot be higher than the actual budget amount selector, column: The summary property, which corresponds to the property attached above. Func: Aggregate Processing Method: supports aggregate functions: sum, max, min, count, avg, and user-defined functions (must have a return value ), the input parameter is an Array of Full-column property values.
10: CalculatesColumn: calculation column. It is also a js array with a trigger array, indicating the property that triggers calculation, the property of the column calculation column, and the func custom processing function. (Here I want to use expressions and use eval to process automatic computation, but I think there are too many changes that are difficult to control. Therefore, it is better to give the user a function as a proxy delegate and as a callback function ); this can be used for processing. the total price of the product = the unit price of the product * the quantity of the product. The actual amount of expenditure for the verification finance mentioned above cannot be higher than the approval amount, but the approval amount cannot be higher than the actual budget amount. It can also be used as a verification trigger.
There is no data type verification in this plug-in, because the verification needs to change too much, too much, and we have a lot of excellent Jquer verification plug-ins at the first level, it will be very practical to use. At the same time, you can also control it by yourself: for example, my two simple verifications:
The Code is as follows:
$ (". Datetime"). live ("focus", function (){
WdatePicker ({readOnly: true, dateFmt: 'yyyy-MM-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 ();
}
});
There is too much nonsense above. The following is a demo:
I forgot to remind you that this plug-in requires the table to follow the w3c, thead, and tbody standards. In thead, we can add the header settings, no matter how complicated the multi-header structure is.
The Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "MEFASPNET. aspx. cs" Inherits = "MEFASPNET" %>
