Operations on table (assignment, dynamic new row, delete Row, save multi-row data object in table

First, the finished interface:

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M01/8A/14/wKiom1glhBnhEdohAAE8pzGyV-U556.jpg-wh_500x0-wm_3 -wmp_4-s_1193978151.jpg "title=" image 1.jpg "alt=" Wkiom1glhbnhedohaae8pzgyv-u556.jpg-wh_50 "/>

Second, Function point description

1. The list object is transmitted from the background, and the foreground table is displayed.

2. You can add row operations, new or delete rows.

Third, the source code:

1. Form form:
   

<form id= "Reportform" method= "POST" >

<table class= "Table-grid table-list" cellpadding= "1" cellspacing= "1" id= "reporttable" formtype= "form" type= " Subtable ">

<tr>

<!--<th> serial numbers </th>-

<th width= "280px;" > Planning Period </th>

<th> Fund Use </th>

<th width= "90px;" > Estimated Cost (yuan) </th>

<th width= "90px;" > Actual Cost (Yuan) </th>

<th width= "75px;" > Project Progress </th>

<th> Description </th>

<th style= "width:60px" > Management </th>

</tr>

<c:if test = "${reportlist!=null}" >

<c:foreach items= "${reportlist}" var= "ReportItem" varstatus= "status" >

<tr type= "Subdata" >

<!--serial number--

<%--<td>${Status.index +1}</td>--%>

<!--planning period--

<TD style= "Text-align:center" >

<c:choose>

<c:when test= "${reportitem.tpecid eq" | | reportitem.tpecid eq undefined} ">

<input type= "text" name= "Stpstdt" value= "<fmt:formatdate value= ' ${reportitem.stpstdt} ' pattern= ' YYYY-MM-DD '/ > "class=" Inputtext date "/>

&nbsp; To &nbsp;

<input type= "text" name= "STPEDDT" value= "<fmt:formatdate value= ' ${reportitem.stpstdt} ' pattern=" YYYY-MM-DD "/ > "class=" Inputtext date "/>

</c:when>

<c:otherwise>

<input type= "text" name= "Stpstdt" style= "Border:none" value= "<fmt:formatdate value= ' ${reportitem.stpstdt} ' pattern= ' Yyyy-mm-dd '/> "class=" Inputtext "readonly/>

&nbsp; To &nbsp;<input type= "text" name= "STPEDDT" style= "Border:none" value= "<fmt:formatdate value=" ${ REPORTITEM.STPSTDT} ' pattern= ' Yyyy-mm-dd "/>" class= "Inputtext" readonly/>

</c:otherwise>

</c:choose>

</td>

<!--capital Use--

<TD style= "Text-align:center" >

<c:choose>

<c:when test= "${reportitem.tpecid eq" | | reportitem.tpecid eq undefined} ">

<textarea name= "Userto" rows= "2" >${reportItem.userTo}</textarea>

</c:when>

<c:otherwise>

<input type= "text" name= "Userto" style= "Border:none" value= "${reportitem.userto}" class= "Inputtext" validate= "{ REQUIRED:FALSE,MAXLENGTH:32} "readonly/>

</c:otherwise>

</c:choose>

</td>

<!--estimated cost--

<TD style= "Text-align:center" >

<c:choose>

<c:when test= "${reportitem.tpecid eq" | | reportitem.tpecid eq undefined} ">

<input type= "text" name= "TotalCost" value= "${reportitem.totalcost}" class= "Inputtext" validate= "{required:false, NUMBER:TRUE,MAXLENGTH:32} "/>

</c:when>

<c:otherwise>

<input type= "text" name= "TotalCost" style= "Border:none" value= "${reportitem.totalcost}" class= "InputText" Validate= "{required:false,maxlength:32}" readonly/>

</c:otherwise>

</c:choose>

</td>

<!--actual cost--

<TD style= "Text-align:center" >

<input type= "text" name= "ActualCost" value= "${reportitem.actualcost}" class= "Inputtext" validate= "{required: FALSE,NUMBER:TRUE,MAXLENGTH:32} "/>

</td>

<!--project Progress--

<TD style= "Text-align:center" >

<select name= "Prostep" class= "select" style= "width:80px!important" >

<option value= "" <c:if test= "${reportitem.prostep = =" | | reportitem.prostep eq undefined} ">selected</c:if >> Please select </option>

<option value= "0" <c:if test= "${reportitem.prostep = = ' 0 '}" >selected</c:if> > not started </option>

<option value= "1" <c:if test= "${reportitem.prostep = = ' 1 '}" >selected</c:if> > Progress </option>

<option value= "2" <c:if test= "${reportitem.prostep = = ' 2 '}" >selected</c:if> > Changed </option>

<option value= "3" <c:if test= "${reportitem.prostep = = ' 3 '}" >selected</c:if> > Completed </option>

</select>

</td>

<!--Description--

<TD style= "Text-align:center" name= "Prodesc" >

<textarea name= "Prodesc" rows= "2" >${reportItem.proDesc}</textarea>

</td>

<TD style= "Text-align:center" >

<c:if test= "${reportitem.tpecid eq" | | reportitem.tpecid eq undefined} "><a class=" link del "onclick=" Delthistr (${reportitem.id}) "> Delete </a></c:if>

</td>

</tr>

</c:forEach>

</c:if>

</table>

</form>

2. Added line JS operation (stitching the corresponding code together)

function Clonereport () {

var _stpstdt = $ ("<input type= ' text ' name= ' stpstdt ' class= ' inputtext date ' validate= ' {date:true} '/>");

var _STPEDDT = $ ("<input type= ' text ' name= ' stpeddt ' class= ' inputtext date ' validate= ' {date:true} '/>");

var _userto = $ ("<textarea type= ' text ' name= ' Userto ' rows= ' 2 ' ></textarea>");

var _totalcost = $ ("<input type= ' text ' name= ' totalcost ' class= ' inputtext '/> ');

var _actualcost = $ ("<input type= ' text ' name= ' actualcost ' class= ' inputtext '/> ');

var _prostep = $ ("<select name= ' prostep ' class= ' select ' style= ' width:80px!important ' ><option value= ' > Please select </option><option value= ' 0 ' > not started </option><option value= ' 1 ' > in progress </option>< Option value= ' 2 ' > Changed </option><option value= ' 3 ' > Completed </option></select> ');

var _prodesc = $ ("<textarea type= ' text ' name= ' Prodesc ' rows= ' 2 ' ></textarea>");

var td_1 = $ ("<td ></td>");

var td_2 = $ ("<td ></td>");

var td_3 = $ ("<td ></td>");

var td_4 = $ ("<td ></td>");

var td_5 = $ ("<td ></td>");

var td_6 = $ ("<td ></td>");

var td_7 = $ ("<td ></td>");

Td_1.css ("Text-align", "center");

Td_2.css ("Text-align", "center");

Td_3.css ("Text-align", "center");

Td_4.css ("Text-align", "center");

Td_5.css ("Text-align", "center");

Td_6.css ("Text-align", "center");

Td_7.css ("Text-align", "center");

Td_1.append (_STPSTDT);

Td_1.append ("&nbsp; To &nbsp; ");

Td_1.append (_STPEDDT);

Td_2.append (_userto);

Td_3.append (_totalcost);

Td_4.append (_actualcost);

Td_5.append (_prostep);

Td_6.append (_PRODESC);

var CloseButton = $ ("<a href= ' javascript:void (0) ' class= ' link del ' onclick= ' deltr (this) ' > Delete </a>");

Td_7.append (CloseButton);

var row = $ ("<tr type= ' Subdata ' ></tr>");

Row.append (td_1);

Row.append (td_2);

Row.append (Td_3);

Row.append (Td_4);

Row.append (td_5);

Row.append (Td_6);

Row.append (td_7);

var _hiddenid = $ ("<input type= ' hidden ' name= ' id ' value= '/>");

var _hiddenmid = $ ("<input type= ' hidden ' name= ' mId ' value= ' ${businesskey} '/>");

var _hiddentpepid = $ ("<input type= ' hidden ' name= ' tpepid ' value= ' ${tpepid} '/>");

var _hiddentpecid = $ ("<input type= ' hidden ' name= ' tpecid ' value= '/> ');

var _hiddenprojectname = $ ("<input type= ' hidden ' name= ' projectName ' value= ' ${projectname} '/>");

var _hiddenplantitil =$ ("<input type= ' hidden ' name= ' plantitil" value= ' ${plantitil} '/> ");

Row.append (_hiddenid);

Row.append (_HIDDENTPEPID);

Row.append (_HIDDENTPECID);

Row.append (_hiddenprojectname);

Row.append (_hiddenplantitil);

Row.append (_hiddenmid);

var Table_add = $ ("#reportTable");

Table_add.append (row);

}

3. Delete Row JS operation

Delete Row

function deltr (obj) {

var tr=$ (obj). Parents (' tr ');

$ (TR). Remove ();

};

4. Submit to get all the data of table, and splicing the JS operation for JS Object

function Getformdateforjson () {

var jsonstr = "[";

var jsonreport = "";

$ ("#reportForm"). Find (' [type= ' subtable '] '). each (function () {

$ (this). Find (' [type= ' subdata '] '). each (function () {

Jsonreport =jsonreport + "{";

$ (this). Find ("Input,select,textarea"). each (function () {

Jsonreport + = "\" "+$ (This). attr (' name ') +" \ ":" + "\" "+$ (This). Val () +" \ ",";

});

Jsonreport = jsonreport.substring (0,jsonreport.length-1);

Jsonreport =jsonreport+ "},";

});

});

Jsonstr =jsonstr +jsonreport;

Jsonstr = jsonstr.substring (0,jsonstr.length-1) + "]";

return jsonstr;

}

Concatenation result JSON format similar: [{"name1": "Value1", "name2": "value2"},{"name1": "Value1", "name2": "value2"},{"name1": "Value1", "name2 ":" Value2 "}]

5. Parsing JSON data in the background

(1). List<bean object > List = jsonutil.parserlist (FormData, Bean object. Class);

(2) Jsonutil method:

public static <T>List<T> Parserlist (String json,class<t> prototype) {

if (Stringutil.isempty (JSON)) {

return null;

}

Objectmapper mapper = new Objectmapper ();

Javatype Javatype = Mapper.gettypefactory (). Constructparametrictype (List.class, prototype);

If it is a map type

Mapper.gettypefactory (). Constructparametrictype (Hashmap.class,string.class, Bean.class);

list<t> list = null;

try {

List = Mapper.readvalue (JSON, javatype);

} catch (Jsonparseexception e) {

E.printstacktrace ();

} catch (Jsonmappingexception e) {

E.printstacktrace ();

} catch (IOException e) {

E.printstacktrace ();

}

return list;

}

This article is from the "Lei shi" blog, please be sure to keep this source http://leoky.blog.51cto.com/752840/1871882

Operations on table (assignment, dynamic new row, delete Row, save multi-row data object in table