jQuery自定义添加编辑删除表单模块及拖拽排序代码

jQuery自定义添加编辑删除表单模块及拖拽排序代码，一款不错的表单模块编辑器，编辑完成后点击保存按钮可以获取各表单模块的值。

js代码
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery-sortable-min.js"></script>
<script>
$(function(){$('.add').on('click',function(){varthat=$(this);vartarget=that.data('target');$('.customerlist').append('<li>'+$('.originlist>.'+target).html()+'</li>');$("ul.customerlist").sortable();//off先取消绑定，否则会调用多次
$('.customeritem').off('click').on('click',modifytitle);
$('.delete').off('click').on('click',deleteitem);$('.tips').hide();})$('.showjson').on('click',function(){if($('.customerlist.customeritem').length==0)return;vartemp=[];
vart;
$('.customerlist.customeritem').each(function(index,element){
t=$(this).children();
temp.push({"type":$(t[2]).data('type'),"title":$(t[0]).data('title')});
})
console.log(temp);
$('.console').html(JSON.stringify(temp))
})})functionmodifytitle(e){varthat=$(this);
varkey=that.find('.key').eq(0);
varvalue=that.find('.value').eq(0);varnewtitle=prompt("请填写标题",key.html());
if($.trim(newtitle).length>8){
alert('标题长度不能超过8位');
}elseif($.trim(newtitle).length>0){
key.data('title',newtitle).html(newtitle);
if(value.data('type')!='file')value.data('placeholder',newtitle).html('请填写'+newtitle);
}else{}
}functiondeleteitem(){
if(confirm('确定要删除吗？')){
varthat=$(this);
varparent=that.parent();
parent.remove();
if($('.customerlist.customeritem').length==0)$('.tips').show();
}}
</script>



下载

2023-11-22 21:17 上传

点击文件名下载附件
售价: 3 金币  [记录]  [购买]