前提：导包，简单设计模板
查（显示）：
使用ajax封装：
1.判断数据是否存在
2.存在数据则开始设计table=说明+表头（thead）+表体（tbody）
3.拼接tr对象（遍历数组）——对性别的判断，true和false或直接“男”“女”
4.append将tr对象追加到tbody中
5.append将table对象设置到div中
$.ajax({ type:"get", url:"js/data.json", dataType:"json", data:{ }, success:function(result){ //判断是否存在 if(result ==null|| result.length< 1){ //给div元素赋值 html() $("#userList").html("<h3 class='text-center'>暂无信息！</h3>") }else{ //准备table var table=$('<table class="table table-striped table-bordered table-hover"></table>'); //说明 var caption=$('<caption>用户列表</caption>'); //将caption标签设置到table对象中 table.append(caption); //创建表头 thead var thead=$(' <thead> <tr> <th>编号</th> <th>姓名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作   <button class="btn btn-success btn-xs" onclick="openAddDialog()"> <span class= "glyphicon glyphicon-plus"> </span> 添加</button></th> </tr></thead>'); //将表头设置到table对象中 table.append(thead); //解析ajax请求获取到的数据 //准备tboby对象 var tbody=$('<tbody></tbody>'); //遍历数组，拼接tr对象 for(var i=0; i< result.length;i++){ var user=result[i]; var sex="男"; if(!user.usex){ sex="女"; } //拼接tr对象 var tr='<tr id="tr_'+user.userId+'"> <td>'+user.userId+'</td> <td>'+user.uname+'</td> <td>'+user.upwd+'</td>'; tr+='<td>'+user.uage+'</td> <td>'+sex+'</td>'; tr+='<td><button class="btn btn-warning btn-xs" onclick="openUpdateDialog('+user.userId+')"> <span class= "glyphicon glyphicon-pencil"> </span>修改</button>'; tr+='<button class="btn btn-danger btn-xs" onclick="deleteUser('+user.userId+')"><span class="glyphicon glyphicon-trash"></span>删除</button></td></tr>'; //tr+='<button class="btn btn-danger btn-xs" onclick="deleteUser2(this)"><span class="glyphicon glyphicon-trash"></span>删除</button></td></tr>'; //将tr对象追加到tbody中 tbody.append(tr); } //将tbody对象追加到table中 table.append(tbody); //将table对象设置到指点div中 $("#userList").append(table); } } });
删除：
1.加入删除的点击事件
2.删除方法
3.在每行数据定义id，从而删时得到每行id——两种方法：1.$("#tr_"+userId).remove(); 2.$(_this).parent().parent().remove();
function deleteUser(userId){ $.confirm({ title: '系统信息', content: '确认删除？', buttons: { yes: { text:'确定', btnClass:'btn-red', keys:['enter','shift'], action: function(){ //移除id为指定值的tr对象 $("#tr_"+userId).remove(); $.alert('删除成功'); } }, no: { text:'取消' } } }); } function deleteUser2(_this){ $.confirm({ title: '系统信息', content: '确认删除？', buttons: { yes: { text:'确定', btnClass:'btn-red', keys:['enter','shift'], action: function(){ $(_this).parent().parent().remove(); $.alert('删除成功'); } }, no: { text:'取消' } } }); }
修改：
1.加入修改的点击事件
2.使用模态框（加入隐藏域，为后面更新数据找到主键id做准备）
<div class="modal fade" id="myUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">修改用户</h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form"> //隐藏域 <input type="hidden" id="userId" /> <div class="form-group"> <label for="uname" class="col-sm-2 control-label">姓名</label> <div class="col-sm-8"> <input type="text" class="form-control" id="uname" placeholder="请输入姓名"> </div> </div> <div class="form-group"> <label for="upwd" class="col-sm-2 control-label">密码</label> <div class="col-sm-8"> <input type="text" class="form-control" id="upwd" placeholder="请输入密码"> </div> </div> <div class="form-group"> <label for="uage" class="col-sm-2 control-label">年龄</label> <div class="col-sm-8"> <input type="number" class="form-control" id="uage" min="1" max="99" placeholder="请输入年龄"> </div> </div> <div class="form-group"> <label for="usex" class="col-sm-2 control-label">性别</label> <div class="col-sm-8"> <div class="radio"> <label> <input type="radio" name="usex" id="man" value="true" checked> 男 </label> <label> <input type="radio" name="usex" id="woman" value="false" > 女 </label> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="updateBtn">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
3.拿到要修改的tr对象，并分别赋值给模态框
function openUpdateDialog(userId){ //得到要修改的tr对象 var tr=$("#tr_"+userId); //得到tr对象的所有子元素 var tds= tr.children(); //eq(index)匹配指定下标的元素 //姓名 var uname=tds.eq(1).text(); var upwd=tds.eq(2).text(); var uage=tds.eq(3).text(); var usex=tds.eq(4).text(); //赋值给模态框 $("#uname").val(uname); $("#upwd").val(upwd); $("#uage").val(uage); if(usex=="男"){ $("#man").prop("checked",true); }else{ $("#woman").prop("checked",true); } //将编号设置到隐藏域中 $("#userId").val(userId); $("#myUpdateModal").modal("show") }
4.得到经过修改后的tr对象，修改表单中的数据（当修改为空时的情况，见下面添加功能的操作）
//修改用户信息 $("#updateBtn").click(function(){ //得到模态框中的表单元素的值 var userId=$("#userId").val(); var uname=$("#uname").val(); var upwd=$("#upwd").val(); var uage=$("#uage").val(); var usex="男"; //判断女是否被选中 if($("#woman").prop("checked")){ usex="女"; } //修改单元格的值 var tr=$("#tr_"+userId); tr.children().eq(1).text(uname); tr.children().eq(2).text(upwd); tr.children().eq(3).text(uage); tr.children().eq(4).text(usex); //关闭 $("#myUpdateModal").modal("hide"); //提示成功 $.alert('修改成功'); })
添加：
1.表头处增加“添加”按钮（点击事件）
var thead=$(' <thead> <tr> <th>编号</th> <th>姓名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作   <button class="btn btn-success btn-xs" onclick="openAddDialog()"> <span class= "glyphicon glyphicon-plus"> </span> 添加</button></th> </tr></thead>');
2.使用模态框（见修改功能处）——不需要隐藏域
3.得到填入模态框中的数据
4.判断是否非空，空则提示（注意判断每个字段时要return）
5.填入——增加新数据并清空模态框中填的数据（$("#addForm")[0].reset();——jquery中无reset方法，所以先转成dom对象使用reset方法）
$("#addBtn").click(function(){ //1. var userId=$("#userIdAdd").val(); var uname=$("#unameAdd").val(); var upwd=$("#upwdAdd").val(); var uage=$("#uageAdd").val(); var usex="男"; if($("#womanAdd").prop("checked")){ usex="女"; } //2. if(isEmpty(userId)){ $("#addMsg").html("编号不能为空"); return; } if(isEmpty(uname)){ $("#addMsg").html("姓名不能为空"); return; } if(isEmpty(upwd)){ $("#addMsg").html("密码不能为空"); return; } if(isEmpty(uage)){ $("#addMsg").html("年龄不能为空"); return; } //3. var tr='<tr id="tr_'+userId+'"> <td>'+userId+'</td> <td>'+uname+'</td> <td>'+upwd+'</td>'; tr+='<td>'+uage+'</td> <td>'+usex+'</td>'; tr+='<td><button class="btn btn-warning btn-xs" onclick="openUpdateDialog('+userId+')"> <span class= "glyphicon glyphicon-pencil"> </span>修改</button>'; tr+='<button class="btn btn-danger btn-xs" onclick="deleteUser('+userId+')"><span class="glyphicon glyphicon-trash"></span>删除</button></td></tr>'; //tr+='<button class="btn btn-danger btn-xs" onclick="deleteUser2(this)"><span class="glyphicon glyphicon-trash"></span>删除</button></td></tr>'; //将tr对象追加到tbody中 $("tbody").append(tr); //清空模态框中元素 $("#addForm")[0].reset(); //关闭模态框 $("#myAddModal").modal("hide"); });