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）、新增功能
温馨提示：此博客，只是博主的记事本，若出现雷同或者错误，还请多多指导，博主必将认真聆听和改正。
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
