动态添加弹出页面（shiro项目中来的七）
2024-10-21 06:25:41
一，图解
二，代码
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);
}
主要的逻辑还是看整体代码，这里是主要的代码
最新文章
- 启动windows bat文件出现错误，直接关闭
- JavaScript Date对象 日期获取函数
- UOJ261 【NOIP2016】天天爱跑步
- jQuery插件开发教程
- 笔记：修改centos的IP地址相关配置
- POJ 3694 Network (tarjan + LCA)
- 为什么objc_msgSend必须用汇编实现
- java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载
- css3实现梯形三角
- Python-网络爬虫模块-requests模块之请求
- JS编码方式
- [Asp.Net MVC4]验证用户登录实现
- django+mongodb 内置用户控制
- Vue2学习笔记:计算属性（computed）
- 深入浅出 JavaScript 关键词 -- this
- ELK之elasticsearch6安装认证模块search guard
- 解决 VUE 微信登录验证 【感谢原文：https://segmentfault.com/a/1190000009493199】
- 硬盘分区表知识——详解硬盘MBR (转)
- java整形中的缓存机制
- python之jsonpath的使用
热门文章
- 【转】如何解决plsql查询oracle数据库语句where条件带有中文无法匹配结果
- Java实现单链表的快速排序和归并排序
- Language Modeling with Gated Convolutional Networks
- Pycharm 出现Unresolved reference '' 错误的解决方法
- Ubantu16.04 redis安装
- php进阶之路--转载
- 论中国为什么造不出cpu和操作系统
- ios设备触发虚拟键盘输入后position:fixed 无效的一些简单另类的解决方法。
- iOS——系统提供的dispatch方法
- SmileyFace——基于OpenCV的人脸人眼检测、面部识别程序