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

及其相关操作"/>

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）、新增功能

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