以前学的时候是增、改操作都跳到不同的页面进行处理,现在感觉这样文件过多,所以想放在同一个页面处理,一开始的想法很简单,用模态框+js控制显示隐藏,然后提交数据就行,代码如下
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addUserModalLabel">添加用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="addForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10" id="test">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="2"> 女
</label>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
js控制模态框的出现与隐藏
$("#addBtn").click(function(){
$("#addModal").modal();
$("#submitAddBtn").click(function(){
var name = $("#name").val();
console.log(name);
});
});
点击提交时只是打印操作,但是这种方法第二次点击的时候会出现多次提交的现象,并且以后每次弹出后都还保留了前面输入的数据,所以这种方法并不好,
第一次的时候没问题,第二次的时候打印了两次,这时候就会有比较严重的问题,尤其是修改的时候,会一次修改多条记录。
然后采用了artTemplate.js,把模态框添加