基于WADE框架开发流程

àì夳堔傛蜴生んèń 2022-07-24 12:23 347阅读 0赞

# 基于WADE框架开发流程 #

## 步骤一：创建导航栏按钮 ##

**在Sidebar.html中，按需求增加下列代码：**

## 步骤二：创建html和page ##

**html文件**

<!DOCTYPE html>
    <html>
    <head jwcid="@component:Head">
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    </head>
    <link href="component/js/jquery/contextMenu/jquery.contextMenu.min.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" src="component/js/jquery/contextMenu/jquery.contextMenu.js"></script>
    <script> $(document).ready(function () { $("#queryBusinessList").click(function () { $("#ajaxBusinessLoading").click(); var params = "&" + $(".condition").serialize(); ajaxdo("ajaxQueryBusinessList", params); }); }); </script>
    <script type="text/javascript" class="showcase"> $(function () { $.contextMenu({ selector: '.customerList', items: { "businessInfoData": { name: "编辑", icon: "copy", callback: function (key, options) { var params = "&CUST_ID=" + $(this).attr("custId"); var customerModify = $('#customerModify'); customerModify.colorbox({ iframe: true, overlayClose: false, width: "100%", height: "1250px", fastIframe: true, closeButton: false }); customerModify.attr("href", "/Wade/app?service=external/customer.customerModify&listener=initCustomerInfo" + params); customerModify.click(); } }, "sep1": "---------" } }); $("#btnCreate").click(function () { var customerCreate = $('#customerCreate'); customerCreate.colorbox({ iframe: true, overlayClose: false, width: "100%", height: "1200px", fastIframe: true, closeButton: false }); customerCreate.attr("href", "/Wade/app?service=external/customer.customerCreate&listener=initCustomerInfo"); customerCreate.click(); }); }); </script>
    <body jwcid="@Body" style="background-color:white;min-width: 1024px;overflow: hidden;">
    <form jwcid="@Form" id="searchForm">
    
    </form>
    <form jwcid="@Form">
        <a id="customerCreate" jwcid="customerCreate@component:PopForm" page="customer.customerCreate" classType='iframe'>
        </a>
        <a id="customerModify" jwcid="customerModify@component:PopForm" page="customer.customerModify" classType='iframe'>
        </a>
        <a id="businessInfoData" jwcid="businessInfoData@component:PopForm" page="business.businessInfoData" classType='iframe'>
        </a>
        <a id="businessRemove" jwcid="businessRemove@component:PopForm" page="business.businessRemove" classType='iframe'>
        </a>
        <a id="businessResult" jwcid="businessResult@component:PopForm" page="business.businessResult" classType='iframe'>
        </a>
    
    
        
        <div class="widget-box">
            <div class="widget-header">
                <h4>
                    <i class="icon-tint"></i>
                    客户查询条件
                </h4>
            </div>
            <div class="widget-body">
                <div class="form-horizontal" style="padding: 15px 15px 15px 15px;">
    
                    <div class="form-group">
                        <div class="col-sm-3">
                            <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">客户姓名</span>
                            <input type="text" id="cond_CUST_NAME" name="cond_CUST_NAME" class="condition" jwcid="cond_CUST_NAME@component:TextField" value="ognl:condition.cond_CUST_NAME" placeholder="客户姓名" desc="客户姓名" nullable="no" maxlength="16" datatype="text"/>
                        </div>
    
                        <div class="col-sm-3">
                            <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">客户电话</span>
                            <input type="text" id="cond_SERIAL_NUMBER" name="cond_SERIAL_NUMBER" class="condition" jwcid="cond_SERIAL_NUMBER@component:TextField" value="ognl:condition.cond_SERIAL_NUMBER" placeholder="客户电话" desc="客户电话" nullable="no" maxlength="16" datatype="text"/>
                        </div>
    
                        <div class="col-sm-3">
                            <input id="queryBusinessList" type="button" class="btn btn-sm btn-info" value=" 查询 "/>
                            <a jwcid="@component:AjaxSubmitLink" id="ajaxQueryBusinessList" listener="ognl:listeners.queryBusinessList" refreshParts="refreshBusinessPart" jsparam=""></a>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
    
        <a id="btnCreate" class="btn btn-sm btn-info">
            <i class="ace-icon glyphicon glyphicon-plus align-top"></i>新增
        </a>
    
        <div jwcid="@component:Part" id="refreshBusinessPart" optimize="true">
            <script> /* $("#CommunityData tr").click(function () { $("#CommunityData tr").each(function () { $(this).css("background-color", ""); }); $(this).css("background-color", "#CCCCCC"); $("#ajaxCommunityBuildingUnitLoading").click(); $("#cond_COMPACT_ID").val($(this).attr("compactId")); var params = "&" + $(".conditionCompact").serialize(); ajaxdo("ajaxQueryCommunityBuildingUnitList", params); });*/ </script>
            <div class="widget-box" style="border: #ffffff;">
                <a href="#" id="ajaxBusinessLoading" data-action="reload"></a>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th style="width: 150px;">客户姓名</th>
                        <th style="width: 200px;">性别</th>
                        <th style="width: 150px;">手机号</th>
                        <th style="width: 160px;">身份证号</th>
                        <th style="width: 150px;">客户状态</th>
                        <th style="width: 200px;">客户类型</th>
                        <th style="width: 220px;">注册时间</th>
                        <th style="width: 220px;">家庭住址</th>
                        <th style="width: 220px;">微信号</th>
                        <th style="width: 200px;">QQ号</th>
                        <th style="width: 200px;">邮箱</th>
                        <th style="width: 160px;">客户等级</th>
                        <th style="width: 150px;">固定电话</th>
                        <th style="width: 200px;">生日</th>
                    </tr>
                    </thead>
                    <tbody id="BusinessData">
                    <tr jwcid="@Foreach" source="ognl:CustomerList" value="ognl:CustomerInfo" element="tr" custId="ognl:CustomerInfo.CUST_ID" class="selected customerList">
                        
                        <td style=" white-space: nowrap;">
                            <a jwcid="@component:PopForm" page="demo.demoModify" classType='iframe' parameters="ognl:CustomerInfo" source="ognl:CustomerInfo" action="getItemFormalSelection2">
                            </a>
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CUST_NAME"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.SEX"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.SERIAL_NUMBER"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CUST_ID_NUM"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CUST_STATE"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CUST_TYPE"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.REG_DATE"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.ADDRESS"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.WEIXIN"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.QQ"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.EMAIL"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CUST_LEVEL"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.HOME_PHONE"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CUST_BIRTHDAY"/>
                        </td>
                        <td style=" white-space: nowrap;">
                            <span jwcid="@Insert" value="ognl:CustomerInfo.CREATE_TIME"/>
                        </td>
    
                    </tr>
                    </tbody>
                </table>
            </div>
               <span jwcid="@component:NavBar" source="ognl:CustomerList" pageSize="20" listener="ognl:listeners.queryBusinessList" refreshParts="refreshBusinessPart" checkboxName="Items"/>
        </div>
        
    </form>
    </body>
    </html>

queryBusinessList：异步刷新列表，关联的是查询按钮  
$.contextMenu：右键点击菜单，需要设定弹出的内容和监听函数  
btnCreate：新增按钮的监听函数  
form jwcid=”@Form：创建html关联，通过page文件实现

**page文件：关联具体的class文件**

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE page-specification PUBLIC "-//Apache Software Foundation//Tapestry Specification 3.0//EN" "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd">
    
    <page-specification class="com.web.customer.page.CustomerList">
        <property-specification name="condition" type="framework.db.data.IData"/>
        <property-specification name="CustomerList" type="framework.db.data.IDataset"/>
        <property-specification name="CustomerInfo" type="framework.db.data.IData"/>
    </page-specification>

## 步骤三：在page.application中关联创建的page ##

**新增如下代码**

## 步骤四：编辑html ##

### 编辑页面元素 ###

刷新区域指定

id：设置刷新区域，与按钮进行关联。

为每一行显示内容，增加一个关联ID，关联ID不显示，主要用于指定条目的编辑。

source：关联的class类  
value：取值class类  
custId：需要隐藏的ID对象  
class：从哪个类获取这个对象

### 查询按钮关联 ###

listener：绑定刷新的函数  
refreshParts：需要刷新区域

与ajax关联刷新区域

source：关联的class类  
pageSize：一页显示的数量  
listener：监听的查询函数  
refreshParts：刷新区域的ID

## 步骤六：创建XXlist.class文件 ##

public abstract class CustomerList extends PopPage{ 
    
        public abstract void setCustomerList(IDataset iDataset);
    
    
    
        public abstract void setCondition(IData condition);
    
        public void queryBusinessList(IRequestCycle cycle)throws Exception{
            PageData pd = getPageData();
            CustomerBean customerBean = new CustomerBean(pd);
            IDataset dataSet = customerBean.queryBusinessList(pd);
            setCustomerList(dataSet);
        }
    }

setCustomerList：设置列表内容  
queryBusinessList：查询函数  
CustomerBean ：bean文件  
dataSet ：获取查询返回值

## 步骤七：创建XXInfo.class文件 ##

**创建Info.class文件**

package com.web.customer.page;
    
    import com.wade.tapestry.PageData;
    import com.wade.tapestry.PopPage;
    import com.web.customer.bean.CustomerBean;
    import framework.db.data.DataMap;
    import framework.db.data.IData;
    import org.apache.tapestry.IRequestCycle;
    
    /** * Created by admin on 2016/5/16. */
    public abstract class CustomerInfo extends PopPage{ 
    
        public abstract void setCustomerInfo(IData data);
    
    
        //初始化函数，主要用户将根据ID查询出来的内容添加到列表中
        public void initCustomerInfo(IRequestCycle cycle)throws Exception{
            PageData pd = getPageData();
    
            IData businessInfo = new DataMap();
            if(pd.getData().getString("CUST_ID") != null){
                businessInfo.put("CUST_ID",pd.getData().getString("CUST_ID"));
                CustomerBean customerBean = new CustomerBean(pd);
                businessInfo = customerBean.queryBusinessByBusinessId(businessInfo);
    
                setCustomerInfo(businessInfo);
            }
        }
    //新建函数，保存新增信息
        public void customerCreate(IRequestCycle cycle)throws Exception{
            PageData pd = getPageData();
            IData businessInfo = pd.getData();
            CustomerBean customerBean = new CustomerBean(pd);
            try{
                customerBean.businessCreate(pd,businessInfo);
                redirectToMsgByPopup("新增客户信息成功","business.customerCreate","customerCreate");
            }catch(Exception e){
                redirectToMsgByPopup("新增客户信息失败","business.customerCreate","customerCreate");
            }
        }
    //修改函数，根据ID保存修改后的信息。ID信息一定要按照上文，隐藏或者显示出来，从而将其通过表单带入到函数中。
        public void customerModify(IRequestCycle cycle)throws Exception{
            PageData pd = getPageData();
            IData businessInfo = pd.getData();
            CustomerBean customerBean = new CustomerBean(pd);
            try{
                customerBean.businessModify(pd,businessInfo);
                redirectToMsgByPopup("修改客户信息成功","customer.CustomerInfo","queryBusinessListList");
            }catch(Exception e){
                redirectToMsgByPopup("修改客户信息失败","customer.CustomerInfo","queryBusinessListList");
            }
        }
    
    
    }

## 步骤八：创建XXBean.class文件 ##

package com.web.customer.bean;
    
    import com.wade.bean.base.BaseBean;
    import com.wade.tapestry.PageData;
    import framework.db.data.IData;
    import framework.db.data.IDataset;
    
    /** * Created by admin on 2016/5/16. */
    public class CustomerBean extends BaseBean{ 
    
        private CustomerDao customerDao;
    
        public CustomerBean(PageData p_pd)throws Exception{
            customerDao = new CustomerDao(p_pd);
        }
    //查询列表函数
        public IDataset queryBusinessList(PageData p_pd)throws Exception{
            IData param = p_pd.getData("cond",true);
            return customerDao.queryBusinessList(param,p_pd.getPagination());
        }
    //通过ID查询指定信息
        public IData queryBusinessByBusinessId(IData param)throws Exception{
            return customerDao.queryBusinessByBusinessId(param);
        }
    //通过ID，修改信息
        public void businessModify(PageData pd,IData data)throws Exception{
            try{
                customerDao.save("TF_CUSTOMER", data, new String[]{
       "CUST_ID"});
    
                //修改合同状态为成交
    
                //修改房源不已售
    
            }catch(Exception e){
                throw e;
            }
        }
    }

## 步骤九：创建XXDao.class文件 ##

package com.web.customer.bean;
    
    import com.wade.bean.base.BaseEntity;
    import com.wade.tapestry.PageData;
    import framework.db.data.IData;
    import framework.db.data.IDataset;
    import framework.db.jdbc.SQLParser;
    import framework.db.util.Pagination;
    
    import java.net.URLDecoder;
    
    /** * Created by Digl on 2016/5/16. */
    public class CustomerDao extends BaseEntity {
    
        public CustomerDao(PageData pd) throws Exception {
            super(pd);
        }
    //查询列表信息
        public IDataset queryBusinessList(IData param, Pagination pagination) throws Exception {
            SQLParser parser = new SQLParser(param);
            parser.addSQL(" SELECT C.CUST_ID,C.CUST_NAME,C.SERIAL_NUMBER,C.CUST_ID_NUM,");
            parser.addSQL(" C.CUST_LEVEL AS CUST_LEVEL_ID,C.CUST_TYPE AS CUST_TYPE_ID,C.CUST_STATE AS CUST_STATE_ID,C.SEX AS SEX_ID,");
            parser.addSQL(" C.REG_DATE,C.ADDRESS,C.WEIXIN,C.QQ,C.EMAIL,C.HOME_PHONE,C.CUST_BIRTHDAY,");
            parser.addSQL(" T1.DATA_NAME AS CUST_LEVEL,T2.DATA_NAME AS CUST_STATE,");
            parser.addSQL(" T3.DATA_NAME AS CUST_TYPE,T4.DATA_NAME AS SEX ");
            parser.addSQL(" FROM TF_CUSTOMER C,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='CUST_LEVEL') T1,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='CUSTOME_STATUS') T2,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='CUSTOME_CATEGORY') T3,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='SEX') T4 ");
            parser.addSQL(" WHERE C.CUST_LEVEL = T1.DATA_ID AND C.CUST_STATE = T2.DATA_ID ");
            parser.addSQL(" AND C.CUST_TYPE = T3.DATA_ID AND C.SEX = T4.DATA_ID ");
            if (param.getString("SERIAL_NUMBER") != null && !param.getString("SERIAL_NUMBER").equals(""))
                parser.addSQL(" AND C.SERIAL_NUMBER LIKE '%" + URLDecoder.decode(param.getString("SERIAL_NUMBER"), "utf-8") + "%' ");
            if (param.getString("CUST_NAME") != null && !param.getString("CUST_NAME").equals(""))
                parser.addSQL(" AND C.CUST_NAME LIKE '%" + URLDecoder.decode(param.getString("CUST_NAME"), "utf-8") + "%' ");
            parser.addSQL(" ORDER BY REG_DATE DESC ");
            return queryList(parser, pagination);
        }
    //通过ID，查询单一信息
        public IData queryBusinessByBusinessId(IData param) throws Exception {
            SQLParser parser = new SQLParser(param);
            parser.addSQL(" SELECT C.CUST_ID,C.CUST_NAME,C.SERIAL_NUMBER,C.CUST_ID_NUM,");
            parser.addSQL(" C.CUST_LEVEL AS CUST_LEVEL_ID,C.CUST_TYPE AS CUST_TYPE_ID,C.CUST_STATE AS CUST_STATE_ID,C.SEX AS SEX_ID,");
            parser.addSQL(" C.REG_DATE,C.ADDRESS,C.WEIXIN,C.QQ,C.EMAIL,C.HOME_PHONE,C.CUST_BIRTHDAY,");
            parser.addSQL(" T1.DATA_NAME AS CUST_LEVEL,T2.DATA_NAME AS CUST_STATE,");
            parser.addSQL(" T3.DATA_NAME AS CUST_TYPE,T4.DATA_NAME AS SEX ");
            parser.addSQL(" FROM TF_CUSTOMER C,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='CUST_LEVEL') T1,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='CUSTOME_STATUS') T2,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='CUSTOME_CATEGORY') T3,");
            parser.addSQL(" (SELECT DATA_ID,DATA_NAME FROM TD_S_STATIC WHERE TYPE_ID='SEX') T4 ");
            parser.addSQL(" WHERE C.CUST_LEVEL = T1.DATA_ID AND C.CUST_STATE = T2.DATA_ID ");
            parser.addSQL(" AND C.CUST_TYPE = T3.DATA_ID AND C.SEX = T4.DATA_ID ");
            if (param.getString("CUST_ID") != null && !param.getString("CUST_ID").equals(""))
                parser.addSQL(" AND C.CUST_ID = :CUST_ID");
            parser.addSQL(" ORDER BY REG_DATE DESC ");
            parser.addSQL(" LIMIT 1 ");
    
            IData businessInfo = (IData) queryList(parser).get(0);
            return businessInfo;
        }
    }

(SELECT DATA\_ID,DATA\_NAME FROM TD\_S\_STATIC WHERE TYPE\_ID=’CUST\_LEVEL’) T1：这句话的意思就是搜索TD\_S\_STATIC ，将定义的相应的选项名称取出来，因为数据库表中保存的是类型的ID，如客户级别，表中保存的是‘1’，你需要从TD\_S\_STATIC 表中，获取CUST\_LEVEL = ‘1’代表的中文含义

## 步骤十：为新建的表创建自增ID ##

**在TD\_S\_SEQUENCE表中，创建自增ID**  
![这里写图片描述][20160523175441889]

## 步骤十一：为选择框创建选项 ##

**在TD\_S\_STATIC表中，为选项框创建选项**  
![这里写图片描述][20160523175548390]  
然后在html中，使用下述代码，为选择框提供选项

![这里写图片描述][20160523175727968]

## 步骤十二：创建新增HTML页面 ##

**新增页面，代码如下所示：**

<!DOCTYPE html>
    <html lang="en">
    <head jwcid="@component:Head">
        <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    </head>
    <body jwcid="@Body" style="background-color:white;">
    <form jwcid="@Form">
        <div class="widget-box">
            <a href="#" id="ajaxLoading" data-action="reload"></a>
            <div class="widget-header">
                <h4>
                    <i class="icon-tint"></i>
                    新增客户信息
                </h4>
            </div>
            <div class="widget-body">
                <div class="form-horizontal" style="padding: 25px 25px 25px 25px;margin:10px 0;">
                    <div class="col-sm-3" style="margin:10px 0;">
                        客户状态
                        <input type="text" jwcid="CUST_STATE@PropertySelection" id="CUST_STATE" model="ognl:@com.wade.component.util.Utility@getStaticSelection(page, 'CUSTOME_STATUS')" value="ognl:CustomerInfo.CUST_STATE" desc="客户状态" nullable="no"/>
                    </div>
                    <div class="col-sm-5" style="margin:10px 0;">
                        客户类别
                        <input type="text" jwcid="CUST_TYPE@PropertySelection" id="CUST_TYPE" model="ognl:@com.wade.component.util.Utility@getStaticSelection(page, 'CUSTOME_CATEGORY')" value="ognl:CustomerInfo.CUST_TYPE" desc="客户类型" nullable="no"/>
                        客户等级
                        <input type="text" jwcid="CUST_LEVEL@PropertySelection" id="CUST_LEVEL" model="ognl:@com.wade.component.util.Utility@getStaticSelection(page, 'CUST_LEVEL')" value="ognl:CustomerInfo.CUST_LEVEL" desc="客户等级" nullable="no"/>
                        客户性别
                        <input type="text" jwcid="SEX@PropertySelection" id="SEX" model="ognl:@com.wade.component.util.Utility@getStaticSelection(page, 'SEX')" value="ognl:CustomerInfo.SEX" desc="客户性别" nullable="no"/>
                    </div>
                    <div class="col-sm-11" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">客户名称</span>
                        <input type="text" jwcid="CUST_NAME@component:TextField" value="ognl:CustomerInfo.CUST_NAME" desc="客户名称" nullable="no" maxlength="80" style="width: 800px;;" datatype="text" id="CUST_NAME"/>
                    </div>
                    <div class="col-sm-4" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">身份证号</span>
                        <input type="text" jwcid="CUST_ID_NUM@component:TextField" value="ognl:CustomerInfo.CUST_ID_NUM" desc="身份证号" nullable="no" maxlength="80" style="width: 200px;;" datatype="text" id="CUST_ID_NUM"/>
                    </div>
                    <div class="col-sm-4" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">手机号</span>
                        <input type="text" jwcid="SERIAL_NUMBER@component:TextField" value="ognl:CustomerInfo.SERIAL_NUMBER" desc="手机号" nullable="no" maxlength="80" style="width: 200px;;" datatype="text" id="SERIAL_NUMBER"/>
                    </div>
                    <div class="col-sm-4" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">微信号</span>
                        <input type="text" jwcid="WEIXIN@component:TextField" value="ognl:CustomerInfo.WEIXIN" desc="微信号" nullable="no" maxlength="80" style="width: 200px;;" datatype="text" id="WEIXIN"/>
                    </div>
                    <div class="col-sm-4" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">QQ号</span>
                        <input type="text" jwcid="QQ@component:TextField" value="ognl:CustomerInfo.QQ" desc="QQ号" nullable="no" maxlength="80" style="width: 200px;;" datatype="text" id="QQ"/>
                    </div>
                    <div class="col-sm-4" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">邮箱</span>
                        <input type="text" jwcid="EMAIL@component:TextField" value="ognl:CustomerInfo.EMAIL" desc="邮箱" nullable="no" maxlength="80" style="width: 200px;;" datatype="text" id="EMAIL"/>
                    </div>
                    <div class="col-sm-4" style="margin:10px 0;">
                        <span style="display: inline;float: left;margin-right: 10px;height: 34px;line-height: 34px;">客户生日</span>
                        <input type="text" jwcid="CUST_BIRTHDAY@component:TextField" value="ognl:CustomerInfo.CUST_BIRTHDAY" desc="客户生日" nullable="no" maxlength="80" style="width: 200px;;" datatype="text" id="CUST_BIRTHDAY"/>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 text-center">
                            <input type="button" class="btn btn-info" jwcid="@Submit" value=" 新增 " listener="ognl:listeners.customerCreate" desc="新增" onclick="if(verifyAll(this)){$('#ajaxLoading').click();return confirmForm(this);}else{return false;}"/>
                        </div>
                    </div>
                </div>
            </div>
    </form>
    </body>
    </html>

主要介绍一下input标签里面的内容：  
jwcid：唯一指定ID  
model：选择框的选项名称，如“CUSTOME\_STATUS”  
value：保存到数据库中对应的字段

## 步骤十三：创建修改HTML页面 ##

修改页面和新增页面的区别在于，需要将默认不能进行修改的输入框，其属性设置为disable

disabled="true"

还需要增加一个不显示的ID保存标签， 从而通知数据库函数可以根据具体的ID对数据库表数据进行更新。

[20160523175441889]: /images/20220722/b968b41d51dd4037881e18d405e2de95.png
[20160523175548390]: /images/20220722/2237a38bb8994d7f929b756ef6935fb3.png
[20160523175727968]: /images/20220722/96e5052a299a4598b08669973ca9f62a.png