一，图解
二，代码
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> <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> '+ '<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); }
主要的逻辑还是看整体代码，这里是主要的代码
