动态添加弹出页面（shiro项目中来的七）

一，图解

二，代码

2.0，新增代码

 //打开编辑属性(新增)
     function dialog_open(){
         $("#dialog-add").css("display","block");
         $("#dname").val('');
         $("#dbz").val('');
         $("#ddefault").val('');
         $("#msgIndex").val('');
         $("#dtype").val('String');
         $("#isQian").val('是');
         $("#form-field-radio1").attr("checked",true);
         $("#form-field-radio1").click();
         $("#form-field-radio4").attr("checked",true);
         $("#form-field-radio4").click();
         $("#flength").val(255);
         $("#ddefault").attr("disabled",true);
     }

2.1，静态的数据

                     <div id="dialog-add">
                         <div class="commitopacity"></div>
                           <div class="commitbox">
                               <div class="commitbox_inner">
                                 <div class="commitbox_top">
                                     <br/>
                                     <table>
                                         <tr height="42px;">
                                             <td style="padding-left: 16px;text-align: right;">属性名：</td><td><div class="nav-search"><input class="nav-search-input" style="width:210px;" name="dname" id="dname" type="text" value="" placeholder="首字母必须为字母或下划线" title="属性名" /></div></td>
                                             <td style="padding-left: 16px;text-align: right;">属性类型：</td>
                                             <td style="padding-bottom: 5px;">
                                                 <label style="float:left;padding-left: 20px;"><input name="form-field-radiot" id="form-field-radio1" onclick="setType('String');" type="radio" value="icon-edit"><span class="lbl">String</span></label>
                                                 <label style="float:left;padding-left: 20px;"><input name="form-field-radiot" id="form-field-radio3" onclick="setType('Date');" type="radio" value="icon-edit"><span class="lbl">Date</span></label>
                                                 <label style="float:left;padding-left: 20px;"><input name="form-field-radiot" id="form-field-radio2" onclick="setType('Integer');" type="radio" value="icon-edit"><span class="lbl">Integer</span></label>
                                                 <label style="float:left;padding-left: 20px;"><input name="form-field-radiot" id="form-field-radio33" onclick="setType('Double');" type="radio" value="icon-edit"><span class="lbl">Double</span></label>
                                             </td>
                                         </tr>
                                         <tr height="42px;">
                                             <td style="padding-left: 16px;text-align: right;">其备注：</td><td><div class="nav-search"><input class="nav-search-input" style="width:210px;" name="dbz" id="dbz" type="text" value="" placeholder="例如 name的备注为 '姓名'" title="备注"/></div></td>
                                             <td style="padding-left: 16px;text-align: right;">前台录入：</td>
                                             <td>
                                                 <div style="float: left;padding-top: 3px;">
                                                 <label style="float:left;padding-left: 20px;"><input name="form-field-radioq" id="form-field-radio4" onclick="isQian('是');" type="radio" value="icon-edit" checked="checked"><span class="lbl">是</span></label>
                                                 <label style="float:left;padding-left: 20px;"><input name="form-field-radioq" id="form-field-radio5" onclick="isQian('否');" type="radio" value="icon-edit"><span class="lbl">否</span></label>
                                                 </div>
                                                 <div class="nav-search" style="float: right;padding-right: 5px;">
                                                     长度：<input class="nav-search-input" style="width:66px;" name="flength" id="flength" type="number" value="" placeholder="长度" title="长度" />
                                                         . <input class="nav-search-input" style="width:50px;" name="decimal" id="decimal" type="number" value="" placeholder="小数" title="类型为Double时有效" />
                                                 </div>
                                             </td>
                                         </tr>
                                         <tr height="42px;">
                                             <td style="padding-left: 16px;text-align: right;">默认值：</td><td><div class="nav-search"><input class="nav-search-input" style="width:210px;" name="ddefault" id="ddefault" type="text" value="" disabled="disabled" placeholder="后台附加值时生效" title="默认值"/></div></td>
                                             <td style="padding-left: 16px;text-align: right;"></td>
                                             <td>
                                             <div class="commitbox_cen">
                                                 <div class="left" id="cityname"></div>
38                                                 <div class="right" style="padding-right: 28px;"><span class="save" onClick="saveD()">保存</span>&nbsp;&nbsp;<span class="quxiao" onClick="cancel_pl()">取消</span></div>
                                             </div>
                                             </td>
                                         </tr>
                                         <tr>
                                             <td style="padding-left: 16px;" colspan="100">
                                                 <font color="red" style="font-weight: bold;">
                                                     注意：<br/>
                                                       1. 请不要添加  XX_ID 的主键，系统自动生成一个32位无序不重复字符序列作为主键<br/>
                                                       2. 主键为  类名_ID 格式，所有字段的字母均用大写
                                                 </font>
                                             </td>
                                         </tr>
                                     </table>
                                 </div>
                               </div>
                           </div>
                     </div>

2.2，点击保存之后的代码

     function saveD(){

         var dname = $("#dname").val();               //属性名
         var dtype = $("#dtype").val();               //类型
         var dbz      = $("#dbz").val();                 //备注
         var isQian = $("#isQian").val();          //是否前台录入
         var ddefault = $("#ddefault").val();      //默认值
         var msgIndex = $("#msgIndex").val();      //msgIndex不为空时是修改
         var flength = $("#flength").val();           //长度
         var decimal = $("#decimal").val();           //小数

         if(dname==""){
             $("#dname").tips({
                 side:3,
                 msg:'输入属性名',
                 bg:'#AE81FF',
                 time:2
             });
             $("#dname").focus();
             return false;
         }else{
             dname = dname.toUpperCase();        //转化为大写
             if(isSame(dname)){
                 var headstr = dname.substring(0,1);
                 var pat = new RegExp("^[0-9]+$");
                 if(pat.test(headstr)){
                     $("#dname").tips({
                         side:3,
                         msg:'属性名首字母必须为字母或下划线',
                         bg:'#AE81FF',
                         time:2
                     });
                     $("#dname").focus();
                     return false;
                 }
             }else{
                 if(msgIndex != ''){
                     var hcdname = $("#hcdname").val();
                     if(hcdname != dname){
                         if(!isSame(dname)){
                             $("#dname").tips({
                                 side:3,
                                 msg:'属性名重复',
                                 bg:'#AE81FF',
                                 time:2
                             });
                             $("#dname").focus();
                             return false;
                         };
                     };
                 }else{
                     $("#dname").tips({
                         side:3,
                         msg:'属性名重复',
                         bg:'#AE81FF',
                         time:2
                     });
                     $("#dname").focus();
                     return false;
                 }
             }
         }

         if(dbz==""){
             $("#dbz").tips({
                 side:3,
                 msg:'输入备注',
                 bg:'#AE81FF',
                 time:2
             });
             $("#dbz").focus();
             return false;
         }

         if((0-flength >=0) || flength==""){
             $("#flength").tips({
                 side:3,
                 msg:'输入长度',
                 bg:'#AE81FF',
                 time:2
             });
             $("#flength").focus();
             return false;
         }

         if('' == decimal) decimal = 0;

         dbz = dbz == '' ? '无':dbz;
         ddefault = ddefault == '' ? '无':ddefault;
         var fields = dname + ',fh,' + dtype + ',fh,' + dbz + ',fh,' + isQian + ',fh,' + ddefault + ',fh,' + flength + ',fh,' + decimal;

         if(msgIndex == ''){
             arrayField(fields);
         }else{
             editArrayField(fields,msgIndex);
         }
         $("#dialog-add").css("display","none");
     }

 function appendC(value){
         var fieldarray = value.split(',fh,');
         $("#fields").append(
             '<tr>'+
             '<td class="center">'+Number(index+1)+'</td>'+
             '<td class="center">'+fieldarray[0]+'<input type="hidden" name="field0'+index+'" value="'+fieldarray[0]+'"></td>'+
             '<td class="center">'+fieldarray[1]+'<input type="hidden" name="field1'+index+'" value="'+fieldarray[1]+'"></td>'+
             '<td class="center">'+fieldarray[5]+'<input type="hidden" name="field5'+index+'" value="'+fieldarray[5]+'"></td>'+
             '<td class="center">'+fieldarray[6]+'<input type="hidden" name="field6'+index+'" value="'+fieldarray[6]+'"></td>'+
             '<td class="center">'+fieldarray[2]+'<input type="hidden" name="field2'+index+'" value="'+fieldarray[2]+'"></td>'+
             '<td class="center">'+fieldarray[3]+'<input type="hidden" name="field3'+index+'" value="'+fieldarray[3]+'"></td>'+
             '<td class="center">'+fieldarray[4]+'<input type="hidden" name="field4'+index+'" value="'+fieldarray[4]+'"></td>'+
             '<td class="center" style="width:100px;">'+
                 '<input type="hidden" name="field'+index+'" value="'+value+'">'+
                 '<a class="btn btn-mini btn-info" title="编辑" onclick="editField(\''+value+'\',\''+index+'\')"><i class="ace-icon fa fa-pencil-square-o bigger-120"></i></a>&nbsp;'+
                 '<a class="btn btn-mini btn-danger" title="删除" onclick="removeField(\''+index+'\')"><i class="ace-icon fa fa-trash-o bigger-120"></i></a>'+
             '</td>'+
             '</tr>'
         );
         index++;
         $("#zindex").val(index);
     }

     //保存属性后往数组添加元素
     function arrayField(value){
         arField[index] = value;
         appendC(value);
     }
     

主要的逻辑还是看整体代码，这里是主要的代码