form表单

jsp案例:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/substr.tld" prefix="ss"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>工作记录</title>
        <%@ include file="/common/initVariables.jsp"%>
        <%@ include file="/common/includeExtBase.jsp"%>
        <%@ include file="/common/includeExtUx.jsp"%>
        <script type="text/javascript" src=\'#\'" /resources/javascript/jquery-1.7.2.min.js"></script>
        <style>
            .table-c table td{border:1px solid #000000;}
            .td001{
                border-bottom:1px solid #000000;
                border-right:1px solid #000000;
            }
            .td002{
                border-bottom:1px solid #000000;
            }
            .td003{
                border-top:1px solid #000000;
                border-bottom:1px solid #000000;
                border-right:1px solid #000000;
            }
            .td004{
                border-left:1px solid #000000;
                border-bottom:1px solid #000000;
            }
            .td005{
                border-bottom:1px solid #000000;
                border-right:1px solid #000000;
                border-left:1px solid #000000;
            }
            .table001{
                border-top:1px solid #000000;
                border-left:1px solid #000000;
                border-right:1px solid #000000;
                border-collapse:collapse;
            }
            .comments {
                width:95%;
                overflow:auto;
                word-break:break-all;
                border:0;
            }
        </style>
</head>
<body>
    <div align="center">
        <table width="87%">
            <tr><td><div align="center" style="margin-top:30px;font-size:20px;">
                <b>${personCheck.createUserName}(第${personCheck.dweek}周)工作记录</b></div></td></tr>
            <tr align="left"><td><div style="margin-left:20px;">日期:${personCheck.startDate}到${personCheck.endDate}</div></td></tr>
        </table>
    </div>
    <form:form id="personCheck" commandName="personCheck" method="post">
        <form:hidden path="oid" />
        <form:hidden path="type" />
        <div align="center">
            <table width="87%"class="table001">
              <tr>
                <td align="center" width="12%" height="30" class="td001"><b>单位及职务</b></td>
                <td align="center" width="22%">xxx单位</td>
                <td align="center" width="8%" class="td005"><b>职责</b></td>
                <td align="center" width="48%">xxx职责</td>
                <td align="center" width="10%" class="td004"><b>备注</b></td>
              </tr>
              <tr>
                <td align="center" height="260" class="td001"><b>工<br/>作<br/>计<br/>划</b></td>
                <td class="td003">
                    <form:textarea  path="workPlan" class="comments" style="height:260px;" />
                </td>
                <td align="center" rowspan="2" class="td002"><b>工<br/>作<br/>记<br/>录</b></td>
                <td rowspan="2">
                    <div class="table-c">
                        <table width="100%" style="border-collapse:collapse;">
                            <c:forEach items="${details}" var="detail" >
                                <tr>
                                  <td width="24%" align="center" rowspan="2">${detail.week }
                                    <input type="hidden" name="id" class="comments" value=${detail.oid } ></input>
                                  </td>
                                  <td width="16%" align="center" height="30">上午</td>
                                  <td width="60%"><input name="morningPlan" class="comments" value=${detail.morningPlan } ></input></td>
                                </tr>
                                <tr>
                                  <td align="center" height="30">下午</td>
                                  <td><input name="afternoonPlan" class="comments" value=${detail.afternoonPlan } ></input></td>
                                </tr>
                            </c:forEach>
                        </table>
                    </div>
                </td>
                <td rowspan="2" class="td002">
                    <form:textarea  path="description" class="comments" style="height:400px;"  />
                </td>
              </tr>
                                                          
              <tr>
                <td align="center" height="140" class="td001"><b>领<br/>导<br/>意<br/>见</b></td>
                <td class="td001">
                    <form:textarea  path="suggest" class="comments" style="height:120px;"  />
                </td>
              </tr>
            </table>
        </div>
    </form:form>
    <div align="center" style="margin-top:10px;" id="button"></div>
</body>

jsp数据后台代码(注意红框):

wKiom1LeIYiS3FF_AAMctdvDokw497.jpg


表单保存:

function saveCheck(){//保存
        var form = Ext.get('personCheck').dom;
        var oids = $("input[name='id']");
        var morningPlans = $("textarea[name='morningPlan']");
        var json = [];
        for(var i = 0; i < oids.length; i++){
            json.push({
                'oid'           : oids[i].value,
                'morningPlan'   : morningPlans[i].value
            });
        }
        Ext.Ajax.request({
           url      : Config.ROOT + '/personCheck/savePersonCheck.do',
           form     : form,
           params   : {'details' : Ext.util.JSON.encode(json)},
           method   : "POST",
           success: function(resp) {
                //var obj = Ext.util.JSON.decode(resp.responseText);
                Sunyway.Util.msg("保存成功!");
           }
        });    
     }


json数组后台保存:

JSONArray jsonArray = JSONArray.fromObject(details);
            for (Object object : jsonArray) {
                JSONObject jsonObj = JSONObject.fromObject(object);
                PersonCheckDetail d = (PersonCheckDetail)jsonObj.toBean(jsonObj, PersonCheckDetail.class);
                PersonCheckDetail detail = (PersonCheckDetail)baseDao.findById(PersonCheckDetail.class, d.getOid());
                detail.setMorningPlan(d.getMorningPlan());
                detail.setAfternoonPlan(d.getAfternoonPlan());
                baseDao.saveOrUpdate(detail);
            }



你可能感兴趣的:(form,表单)