jq插件(一) —— 列表及其相关操作

JQ插件(一) —— 列表及其相关操作

为了提高开发效率,我们可以把公共的东西以插件的形式做出来,只需要简单的调用即可。因为是基于jQuery做的,所以要提前先引入jQuery。

1)、插件代码

; //防止多个文件压缩合并以为其他文件最后一行语句
(function ($, window, document, undefined) {
    var that = "";
    var tableData = [];
    var headerTitle = "";
    var TableUI = function (el, opt) {
        that = this;
        this.$element = el;
        this.defaults = {
            'title': "列表查看"
        }
        this.options = $.extend({}, this.defaults, opt)
        if (opt == undefined) {
            headerTitle = this.defaults.title;
        } else {
            headerTitle = this.options.title;
        }
    }

    TableUI.prototype = {

        /*******************1、加载DOM元素************************/
        init: function () {
            // var htmlBody = '<div id="tabBox">' +
            var htmlBody = '<div id="tabBox"><h3 id="isHide" class="testBtn panel-title-down">' + headerTitle + '</h3><table border="1" align="center" cellspacing="0">' +
                '<thead>' +
                '<tr>' +
                '<th>序号</th>' +
                '<th>用户名</th>' +
                '<th>手机号</th>' +
                '<th>QQ</th>' +
                '<th>EMAIL</th>' +
                '<th>年龄</th>' +
                '<th>性别</th>' +
                '<th>操作</th>' +
                '</tr>' +
                '</thead>' +
                '<tbody>' +
                '<tr>' +
                '<td colspan="8">暂无数据</td>' +
                '</tr>' +
                '</tbody>' +
                '</table></div>';

            $(this.$element).html(htmlBody);
            $("#isHide").css("text-align", "center")
            $("#isHide").css("cursor", "pointer")

            var i = 1;
            $(document).on("click", "#isHide", function (e) {
                //  动态添加类名,暂无使用
                if (i == 1) {
                    $(e.target).addClass('panel-title-up')
                    $(e.target).removeClass('panel-title-down')

                    i = 2;
                } else if (i == 2) {
                    $(e.target).addClass('panel-title-down')
                    $(e.target).removeClass('panel-title-up')

                    i = 1;
                }
            })

            var h = 1;
            var splitBtn = ""
            $(document).off("click", ".testBtn");
            $(document).on("click", ".testBtn", function (e) {
                var splitBtn = $(e.target).attr("class").split(" ")[1];
                if (h == 1) {
                    $("table").css("opacity", "0")

                    h = 2;
                } else if (h == 2) {
                    $("table").css("opacity", "1")
                    h = 1;
                }
                console.log(splitBtn)
                $("table").slideToggle("3000");
            })
        },

        /*************2、获取数据,页面渲染***************************/
        getData: function () {

            /***查询***/
            that.queryAll();

            /***删除***/
            that.deleteFun();

            /***修改***/
            that.updateFun();

            /***查看详情***/
            that.showDetailFun();

            /***新增***/
            that.NewAddFun();
        },

        /********************2.1、查询,获取数据***********************/
        queryAll: function () {
            // 查询
            $.ajax({
                url: "http://127.0.0.1:800/user/queryAllUserInfo",
                type: "GET",
                success: function (res, status) {
                    var data = res.data;
                    if (data.length > 0) {
                        tableData = data;
                        var userStr = "";
                        for (var i = 0; i < data.length; i++) {
                            var SEX = data[i].USER_SEX == "" || data[i].USER_SEX == null ? "" : data[i].USER_SEX;
                            var QQ = data[i].USER_QQ == "" || data[i].USER_QQ == null ? "" : data[i].USER_QQ;
                            var EMAIL = data[i].USER_EMAIL == "" || data[i].USER_EMAIL == null ? "" : data[i].USER_EMAIL;
                            var AGE = data[i].USER_AGE == "" || data[i].USER_AGE == null ? "" : data[i].USER_AGE;

                            userStr += '<tr><td>' + (i + 1) +
                                '</td>' + '<td>' + data[i].USER_NAME +
                                '</td>' + '<td name="phone">' + data[i].USER_PHONE +
                                '</td>' + '<td>' + QQ +
                                '</td>' + '<td>' + EMAIL +
                                '</td>' + '<td>' + AGE +
                                '</td>' + '<td>' + SEX +
                                '</td>' + '<td><input class="deleteBtn" type="button" btn_id="' + data[i].USER_PHONE + '" value="删除"><input class="updateBtn" type="button" btn_id="' + data[i].USER_PHONE + '" value="修改"><input class="showBtn" type="button" btn_id="' + data[i].USER_PHONE + '" value="查看"><input class="addBtn" type="button" value="新增">' +
                                '</td></tr>';
                        }

                        $(that.$element).find("table tbody").html(userStr)
                    }
                }
            })
        },
        /******************2.2、删除,获取数据*************************/
        deleteFun: function () {
            //  删除
            var deleteBtnId = "";
            $(document).off("click", ".deleteBtn");
            $(document).on("click", ".deleteBtn", function (e) {

                var isConfirm = confirm("是否确认删除,此操作不可逆!");
                if (!isConfirm) return;

                deleteBtnId = $(e.target).attr("btn_id")
                $.ajax({
                    url: "http://127.0.0.1:800/user/deleteUser",
                    type: "post",
                    dataType: "json",
                    data: {
                        USER_PHONE: deleteBtnId
                    },
                    success: function (res, status) {
                        var data = res.data;
                        if (data) {
                            alert(res.msg);
                            that.queryAll();
                        } else {
                            alert(res.msg);
                        }
                    }
                })
            })
        },
        /***********************2.3、修改,获取数据*****************************/
        updateFun: function () {
            // 修改
            var updateBtnId = "";
            $(document).off("click", ".updateBtn"); //取消绑定
            $(document).on("click", ".updateBtn", function (e) {
                var updateBtnId = $(e.target).attr("btn_id");
                // $("#hiddenBox").css("display", "block")
                var title = "修改用户信息";
                var modal = that.tableModal(updateBtnId, title);
                event.stopPropagation(); //  阻止事件冒泡
                $(that.$element).parents("body").append(modal);
            })
        },
        /************************2.4、查看详情,获取数据*****************************/
        showDetailFun: function () {
            var detailBtnId = "";
            $(document).off("click", ".showBtn");
            $(document).on("click", ".showBtn", function (e) {
                var detailBtnId = $(e.target).attr("btn_id");
                var title = "查看用户信息";
                var modal = that.tableModal(detailBtnId, title);
                $(that.$element).parents("body").append(modal);
                $(this).parents("body").find("#hiddenBox input").attr("disabled", true);
                $(this).parents("body").find("#hiddenBox #T_SureBtn").removeAttr("id");

            })
        },

        /**********************2.4、新增******************************/
        NewAddFun: function () {
            $(document).off("click", ".addBtn"); //取消绑定
            $(document).on("click", ".addBtn", function (e) {
                // $("#hiddenBox").css("display", "block")
                var title = "新增用户信息";
                var modal = that.tableModal(null, title);
                event.stopPropagation(); //  阻止事件冒泡
                $(that.$element).parents("body").append(modal);
            })
        },

        /***********************3、自定义模态框****************************/
        tableModal: function (id, title) {

            var renderData = {};
            /****  render */
            for (var i = 0; i < tableData.length; i++) {

                if (tableData[i].USER_PHONE == id) {
                    renderData = tableData[i];
                }
            }

            var USER_NAME = renderData.USER_NAME == null ? "" : renderData.USER_NAME;
            var USER_PHONE = renderData.USER_PHONE == null ? "" : renderData.USER_PHONE;
            var USER_PASSWORD = renderData.USER_PASSWORD == null ? "" : renderData.USER_PASSWORD;
            var USER_QQ = renderData.USER_QQ == null ? "" : renderData.USER_QQ;
            var USER_EMAIL = renderData.USER_EMAIL == null ? "" : renderData.USER_EMAIL;
            var USER_AGE = renderData.USER_AGE == null ? "" : renderData.USER_AGE;

            if (renderData.USER_SEX == "男") {
                var isBoy = '<input type="radio" name="sex" checked value="男" id="boy">男';
                var isGirl = '<input type="radio" name="sex" value="女" id="girl">女';
                var isNeutral = '<input type="radio" name="sex" value="保密" id="boyAndGirl">保密';
            } else if (renderData.USER_SEX == "女") {
                var isBoy = '<input type="radio" name="sex" value="男" id="boy">男';
                var isGirl = '<input type="radio" name="sex" checked value="女" id="girl">女';
                var isNeutral = '<input type="radio" name="sex" value="保密" id="boyAndGirl">保密';
            } else if (renderData.USER_SEX == "保密") {
                var isBoy = '<input type="radio" name="sex" value="男" id="boy">男';
                var isGirl = '<input type="radio" name="sex" value="女" id="girl">女';
                var isNeutral = '<input type="radio" name="sex" checked value="保密" id="boyAndGirl">保密';
            } else {
                var isBoy = '<input type="radio" name="sex" value="男" id="boy">男';
                var isGirl = '<input type="radio" name="sex" value="女" id="girl">女';
                var isNeutral = '<input type="radio" name="sex" value="保密" id="boyAndGirl">保密';
            }

            /**** init create */
            var modalHtml = '<div id="hiddenBox">' +
                '<section>' +
                '<div id="registerBox"><h3 style="text-align:center;margin-bottom:10px">' + title + '</h3>' +
                '<p><label for="">用户名</label>:<input type="text" id="userName" value="' + USER_NAME + '"></p>' +
                '<p><label for="">手机号</label>:<input type="text" id="userPhone" value="' + USER_PHONE + '"></p>' +
                '<p><label for="">密码</label>:<input type="password" id="userPassword" value="' + USER_PASSWORD + '"></p>' +
                '<p><label for="">Q Q</label>:<input type="text" id="userQQ" value="' + USER_QQ + '"></p>' +
                '<p><label for="">邮箱</label>:<input type="text" id="userEmail" value="' + USER_EMAIL + '"></p>' +
                '<p><label for="">年龄</label>:<input type="number" id="useAge" value="' + USER_AGE + '"></p>' +
                '<p><label for="">性别</label>:<b id="useSex">' +
                isBoy +
                isGirl +
                isNeutral +
                '</b></p>' +
                '<p><span id="T_Close">关闭</span><span id="T_SureBtn">确定</span></p>' +
                '</div>' +
                '</section>' +
                '</div>';


            // 3.1关闭
            $(document).off("click", "#T_Close"); //解绑
            $(document).on("click", "#T_Close", function (e) {
                $(this).parents("#hiddenBox").remove();

            });

            //3.2 提交
            $(document).off("click", "#T_SureBtn"); //解绑
            $(document).on("click", "#T_SureBtn", function (e) {
                var that_Sure = this; //解决点击事件内部this指向问题
                var userName = $("#userName").val() == "" ? null : $("#userName").val();
                var userPhone = $("#userPhone").val() == "" ? null : $("#userPhone").val();
                var userPassword = $("#userPassword").val() == "" ? null : $("#userPassword").val();
                var userQQ = $("#userQQ").val() == "" ? null : $("#userQQ").val();
                var userEmail = $("#userEmail").val() == "" ? null : $("#userEmail").val();
                var useAge = $("#useAge").val() == "" ? null : $("#useAge").val();
                var useSex = $("#useSex input:checked").val();

                if (userName != null && userPassword != null && userPhone != null) {

                    if (id != null) {
                        var url = "http://127.0.0.1:800/user/updateUser";
                    } else {
                        var url = "http://127.0.0.1:800/user/register";
                    }

                    $.ajax({
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: {
                            USER_NAME: userName,
                            USER_PASSWORD: userPassword,
                            USER_PHONE: userPhone,
                            USER_QQ: userQQ,
                            USER_EMAIL: userEmail,
                            USER_AGE: useAge,
                            USER_SEX: useSex
                        },
                        success: function (res) {
                            if (res.success) {
                                alert(res.msg);
                                setTimeout(function () {
                                    $(that_Sure).parents("#hiddenBox").remove();
                                }, 1000)
                                that.queryAll();
                            } else {
                                alert(res.msg);
                            }
                        }
                    })
                } else {
                    if (userName == null) {
                        alert("用户名不能为空")
                    } else if (userPhone == null) {
                        alert("手机号不能为空")
                    } else {
                        alert("密码不能为空")
                    }
                }
            });

            return modalHtml
        }
    }


    // 调用
    $.fn.UITableUsers = function (options) {
        var tableUI = new TableUI(this, options);
        tableUI.init(this); // 创建模型
        tableUI.getData(); // 获取数据
    }
})(jQuery, window, document)

2)、引用方式

2.1)、在需要引入的页面给一个dom节点且进入js
2.1)、在页面加载或者其他事件的js中引入
$(function () {

	// 页面加载完成后引入
	$("#testTable").UITableUsers({   //testTable 页面用于放置列表的dom元素
        // title: "列表查看"  // 可以自定义列表名
    })
    
})

3)、效果展示

列表
3.1)、删除功能
删除
3.1)、查看功能
修改

3.1)、修改功能
在这里插入图片描述
3.1)、新增功能
在这里插入图片描述

温馨提示:此博客,只是博主的记事本,若出现雷同或者错误,还请多多指导,博主必将认真聆听和改正。

发布了21 篇原创文章 · 获赞 14 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览