一、增加记录
1.Jquery中each遍历方法的使用
定义：jquery中提供了each方法类似JavaScript中的for(var i=0;i<length;i++)、使用方式如下
<script type="text/javascript">
//对象的封装
var app={
data:[{id:1,name:"战争之王",city:"暗影之岛"},
{id:2,name:"钢铁大使",city:"艾欧尼亚"},
{id:3,name:"武器大师 ",city:"祖安"}
],
start:function(){
$.each(app.data,function(index,obj){ //index是遍历当前索引、obj是对象
console.log(obj);
});
}
};
app.start();
</script>2.操作样式的设置
说明：需要定义一个html的table、和filedset标签代码如下
<table border="1" id="tabUsers" width="100%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>地区</th>
<th>操作</th>
</tr>
</table>
<fieldset>
<legend>用户信息</legend>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" placeholder="请输入姓名" />
</p>
<p>
<label for="city">地区：</label>
<input type="text" name="city" id="city" placeholder="请输入城市" />
</p>
<p>
<button type="button" id="btnSave">保存</button>
<button type="button" id="btnUpdate">更新</button>
</p>
</fieldset>3、增加一个用户
说明：增加用户的姓名、地区输入框在fieldset标签内、如果table中没有记录的话、编号为1、如果table则已经存在编号了
则新增的编号为最后一个记录的编号加1,、绑定fieldset标签内保存的按钮的事件代码如下、在app对象中添加一个属性save
save:function(){
var user={
id:1,
name:$("#name").val(),
city:$("#city").val()
}
if(app.data.length>0){
user.id=app.data[app.data.length-1].id+1;
}
app.data.push(user); //将user对象添加到数组的末尾
app.bind(); //重新渲染
}在app对象中添加一个start属性、实现用于注册按钮事件
start:function(){
$("#btnSave").click(app.save);
app.bind();
}
4.渲染表格的事件
在app对象中添加一个bind属性、用于渲染表格实现如下、每次渲染表格都需要重新布局table
bind:function(){
//将表格中第一行以外的数组清空
$("#tabUsers tr:gt(0)").remove();
$.each(app.data,function(i,obj){
var tr= $("<tr/>");
$("<td/>").html(obj.id).appendTo(tr);
$("<td/>").html(obj.name).appendTo(tr);
$("<td/>").html(obj.city).appendTo(tr);
$("<td/>").html("<a>删除</a>").appendTo(tr);
$("#tabUsers").append(tr);
});
}二、删除记录
1.删除说明
1.1删除支持两种方式进行删除
一：通过编辑框的超链接点击进行删除会弹出确认框、确认是否要进行删除操作。
二、通过check的方式用户选择完、点击删除所有项进行删除、界面效果如下
2.操作样式的设置
2.1与增加进行比较、多了一列选择项check、其他基本一致样式设置代码如下
<table border="1" id="tabUsers" width="100%">
<tr>
<th>
<input type="checkbox" id="chbAll" />
</th>
<th>编号</th>
<th>姓名</th>
<th>地区</th>
<th>操作</th>
</tr>
</table>
<p>
<button type="button" id="btnDelSelected">删除选择项</button>
</p>
<fieldset>
<legend>用户信息</legend>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" placeholder="请输入姓名" />
</p>
<p>
<label for="city">地区：</label>
<input type="text" name="city" id="city" placeholder="请输入城市" />
</p>
<p>
<button type="button" id="btnSave">保存</button>
<button type="button" id="btnUpdate">更新</button>
</p>
</fieldset>3.超链接删除的方式
3.1.在app属性的star对象方法中必须添加table的on事件、监视超链接的点击、代码如下
$("#tabUsers").on("click",".del",function(){
if(confirm("您确定要删除吗?"))
{
app.deleteOne(this);
}
});该方法调用了app对象的deleteOne方法、代码的实现如下
deleteOne:function(obj){
var index=$(obj).data("index");
//alert(index);
app.data.splice(index,1);
$(obj).closest("tr").remove();
}4.复选框+按钮的删除方式
4.1在app中start属性的方法体内增加复选框的click事件、代码的实现如下
$("#chbAll").click(function(){
$("input[name=chbItem]").prop("checked",$(this).prop("checked"));
})解释一下：该事件的实现是table中所有复选框的状态和id为chbAll复选框的状态一致。
4.2按钮事件的实现方式、在app中定义一个deleteSelected的属性、实现如下
deleteSelected:function(){
var items=$("input[name=chbItem]:checked");
for(var i=items.size();i>=0;i--){
app.deleteOne(items[i]);
}
},4.3在app的start属性方法中注册按钮事件
$("#btnDelSelected").click(app.deleteSelected);三、更新记录
1.更新说明
在Table的操作中多了一个编辑的超链接、用户点击超链接、会将记录的姓名、和地区设置到fieldset标签中的姓名和地区
文本框中。编辑完毕之后、点更新按钮、更新会提交到Table中效果如下
2.操作样式
1.1和删除记录的样式一致、此处不再累述。
3.编辑超链接的设置
3.1Table渲染的时候、会增加一个编辑标签具体代码如下
bind:function(){
//将表格中第一行以外的数组清空
$("#tabUsers tr:gt(0)").remove();
$.each(app.data,function(i,obj){
var tr= $("<tr/>");
var chbItem=$("<input type='checkbox' name='chbItem' />").data("index",i);
$("<td/>").append(chbItem).appendTo(tr);
$("<td/>").html(obj.id).appendTo(tr);
$("<td/>").html(obj.name).appendTo(tr);
$("<td/>").html(obj.city).appendTo(tr);
var aDel=$("<a href='#' class='del'>删除</a>").data("index",i);
var aEdit = $("<a href='#' class='edit'> | 编辑</a>").data("index", i).data("user", obj);
$("<td/>").append(aDel).append(aEdit).appendTo(tr);
$("#tabUsers").append(tr);
});
}说明：每次渲染在操作列中都会有两个超链接——删除和编辑、在编辑的a标签中通过data的方式保存了索引和当前对象
var aEdit = $("<a href='#' class='edit'> | 编辑</a>").data("index", i).data("user", obj);3.2编辑事件的注册、在app的satart属性进行注册、代码如下
$("#tabUsers").on("click", ".edit", function() {
//索引
var index = $(this).data("index");
//对象
var obj = $(this).data("user");
$("#name").val(obj.name);
$("#city").val(obj.city);
app.index = index;
});4.更新按钮的设置
说明：在app中添加index属性用于保存编辑超链接选择的记录索引、用于按钮更新事件中获取table中选择要编辑的索引。
4.1在app的start属性方法中注册按钮更新事件
$("#btnUpdate").click(function() {
//获得要更新的对象
var user = app.data[app.index];
user.name = $("#name").val();
user.city = $("#city").val();
app.bind();
app.index = -1;
});说明：通过索引获得记录对象、将filedset中的姓名和地区值设置到table中去。
