不借助各种UI,使用纯JQuery的方式,来实现对任意一个数据表的增删改,数据的展示使用$.Get,操作使用$.Post,在后台逻辑中只需要把任意一个数据结果用json或文本传输给前台,后台使用asp、jsp、php等方式都可以,前后端分离。
1、前端简单的显示
<h2>JQuery Get And Post</h2>
<div id="mainContent">
<input type="button" onclick="showAddForm()" value="新增" /><br>
<table id="tbList"></table>
<select id="pageSize">
<option value="10">10</option>
<option value="20" selected>20</option>
<option value="50">50</option>
</select>
<input type="button" id="prevBt" value="上一页" onclick="goPrev()"/>
<input type="button" id="nextBt" value="下一页" onclick="goNext()"/>
<span id="pageInfo"></span>
<!--隐藏域,用于纪录当前页面和总页面数-->
<input type="hidden" id="curPage" value="1" />
<input type="hidden" id="totalPage" value="1" /></div>
<!--编辑数据表单-->
<div id="editRecord" style="display:none">
<form id="editForm">
<table id="editTable"></table>
</form>
</div>
<!--新增数据表单-->
<div id="addRecord" style="display:none">
<form id="addForm">
<table id="addTable"></table>
</form>
</div>
2、数据的加载,对查询返回的数据表,约定使"{total,totalPage,queryList}"的json格式,前端使用JQuery生成分页信息并渲染数据表格,可以使用key,对任意数据查询生成表头
function refreshTable()
{
var pageSize = parseInt($("#pageSize").val());
var curPage = parseInt($("#curPage").val());
$.get("/HOME/ViewList", { "pageSize": pageSize, "curPage": curPage }, function (data, status) {
if (status == "success") {
$("#tbList").html(makeRow(data.Data));
$("#pageInfo").html(makePageInfo(data));
$("#totalPage").val(data.totalPage);
}
else alert("请求失败");
}, "json");
}
function makeRow(data)
{
var tbContent = "";
if (data == undefined || data.length == 0)
{
tbContent = "<tr><td>没有数据</td></tr>";
return tbContent;
}
tbContent += "<tr>";
//同时生成新增表单内容
var addFormTable = "";
$.each(data[1], function (key, value) {
tbContent += "<th>" + key + "</th>";
if (key != "ID") {
addFormTable += "<tr><th>" + key + "</th><td><input type='text' name='" + key + "' /></td></tr>";
}
});
tbContent += "<th>操作</th></tr>";
addFormTable += "<tr><th></th><td><input type='submit' value='新增'></td></tr>"
$("#addTable").html(addFormTable);
for (var i in data)
{
var res = "<tr>";
var idKey = 0;
$.each(data[i], function (key, value) {
if (key == "ID") idKey = value;
res += "<td>" + value + "</td>";
});
res += "<td><a href='#' onclick='edit("+idKey+")'>编辑</a>|";
res += "<a href='#' onclick='del("+idKey+")'>删除</a></td></tr>";
tbContent += res;
}
return tbContent;
}
function makePageInfo(data)
{
var curPage = $("#curPage").val();
var totalPage = data.totalPage;
var total = data.total;
var pageInfo = "第" + curPage + "页,共" + totalPage + "页,总记录:" + total;
return pageInfo;
}
function goPrev()
{
var curPage = parseInt($("#curPage").val());
if (curPage > 1)
{
$("#curPage").val(curPage - 1);
refreshTable();
}
}
function goNext()
{
var curPage = parseInt($("#curPage").val());
var totalPage = parseInt($("#totalPage").val());
if (curPage < totalPage) {
$("#curPage").val(curPage+1);
refreshTable();
}
}
function pageSizeChange()
{
$("#curPage").val("1");
refreshTable();
}
3、数据的编辑和新增,前端的功能逻辑类似,只是请求的url可能不一样,可以优化一下,放在一个post请求里实现,用preventDefault阻断表单的默认提交,不用去关心表单内部的控件元素,JQuery为我们准备了整个打包的方法 serialize。新增或编辑都在本页实现,不用跳转,操作完成后表单页面隐藏。请求返回的是text,约定使用"ok:信息"或"error:信息"
$('#editForm').submit(function (e) {
e.preventDefault();
var data = $(this).serialize();
//console.log(data);
$.post("/Home/Edit", data, function (dataa, status) {
if (status == "success")
{
var res = dataa.split(":");
if (res[0] == "OK") {
alert(res[1]);
$("#editRecord").css("display", "none");
refreshTable();
}
else alert(res[1]);
}
else alert("请求失败");
}, "text");
});
$('#addForm').submit(function (e) {
e.preventDefault();
var data = $(this).serialize();
//console.log(data);
$.post("/Home/Add", data, function (dataa, status) {
if (status == "success") {
var res = dataa.split(":");
if (res[0] == "OK") {
alert(res[1]);
$("#addRecord").css("display", "none");
refreshTable();
}
else alert(res[1]);
}
else alert("请求失败");
}, "text");
});
点击编辑时,可以动态生成editform表单,把当前行的数据更新到表单中
$.get("/Home/GetByID/", { "ID": id }, function (data, status) {
if (status == "success") {
var res = "";
$.each(data, function (key, value) {
if (key == "ID") res += "<tr><th>" + key + "</th><td>" + "<input type='text' value='"+value+"' readonly name='"+key+"'/> </td></tr>";
else res += "<tr><th>" + key + "</th><td>" + "<input type='text' value='"+value+"' name='"+key+"'/></td></tr>";
});
res += "<th></th><td><input type='submit' value='修改' /></td></tr>";
$("#editTable").html(res);
$("#editRecord").css("display", "inline-block");
}
else alert("请求失败");
}, "json");
4、删除功能,相对简单,只要传一个主键给后台就行
function del(id)
{
$.post("/Home/Del", { "ID": id }, function (data, status) {
if (status == "success") {
//console.log(data);
var res = data.split(":");
if (res[0] == "OK") {
alert(res[1]);
refreshTable();
}
else
{
alert(res[1]);
}
}
else alert("请求失败");
},
"text");
}
运行效果: