使用JQuery实现通用数据的CRUD

不借助各种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");
    }

运行效果：