自己做jQuery开源插件之终极篇：数据表格插件
来源：互联网 发布：天猫赚钱知乎 编辑：程序博客网 时间：2024/06/06 06:35
在所有jQuery插件中，我觉得功能复杂度最高的莫过于列表插件，很多知名的jQuery列表插件功能特别多，前段时间我花了几天时间做了个jQuery列表插件，目前还没做完，这篇博客的代码会不断更新，直到这个列表插件全部做完，目前只做好了展示和分页，支持上一页下一页切换和数字切换两种方式，源数据目前只支持数组格式，这个插件做到现在最大的亮点就是数字切换方式很新颖，数字切换页码时，列表下面始终只显示四个页码，当点击四个页码的最后一个页码时，会自动加载后续的两个页码，没有则不加载，然后隐藏四个页码中最前面的两个页码，使列表的页码个数保持在四个，同理，点击四个页码的最前面一个页码，会自动加载前面的两个页码，隐藏最后两个页码，废话不多说，直接上效果动图，列表的样式是从网上找的，本人css水平一般：
列表插件源码（不断更新中）：
(function ($) { $.fn.MyList = function (options) { var Myfunctions = { //总页码 TotalSize: null, //初始化时设置总页码 Init: function () { Myfunctions.TotalSize = Math.ceil(opt.data.length / opt.pageSize); }, //创建列表的tbody，c表示当前页码 BuildTBody: function (c, id) { var tbody = ""; var s = opt.pageSize; for (var i = (c - 1) * s; i < (c - 1) * s + s; i++) { if (opt.data[i] != undefined) { tbody += "<tr>"; if (opt.IsCheckBox) { tbody += "<td><input type=\"checkbox\" /></td>"; } if (opt.IsShowNum) { tbody += "<td class=\"xuhao\">" + (i + 1) + "</td>"; } for (var j = 0; j < opt.data[i].length; j++) { tbody += "<td>" + opt.data[i][j] + "</td>"; } tbody += "</tr>"; } } Myfunctions.ShowOrHideButton(c, id); return tbody; }, //每次切换页码后置灰或置亮相应页码按钮 ShowOrHideButton: function (c, id) { if (opt.pageType == "word") { if (c == 1) { $("#" + id + "_btnFirst").attr("disabled", "disabled"); $("#" + id + "_btnPre").attr("disabled", "disabled"); } else { $("#" + id + "_btnFirst").removeAttr("disabled"); $("#" + id + "_btnPre").removeAttr("disabled"); } if (c == Myfunctions.TotalSize) { $("#" + id + "_btnNext").attr("disabled", "disabled"); $("#" + id + "_btnEnd").attr("disabled", "disabled"); } else { $("#" + id + "_btnNext").removeAttr("disabled"); $("#" + id + "_btnEnd").removeAttr("disabled"); } } //else if (opt.pageType == "number") { //$table.find("tfoot a").css("color", "blue"); //$("#" + id + "_" + c).css("color", "grey"); //} } } var $this = this; var opt = $.extend({}, $.fn.MyList.defaultOptions, options); //获取当前调用div的id，然后在所有列表中的控件的id前加上此id作为前缀，主要是防止一个页面放置多个列表插件，这样子可以避免重名 var id = this.attr("id"); this.html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="' + this.attr("id") + "ListTable" + '"></table>'); var $table = this.find("table"); //当前页码 var currentSize = 1; Myfunctions.Init(); if (opt.colums != null) { //生成列表表头 var thead = ""; thead += "<thead><tr>"; if (opt.IsCheckBox) { //thead += "<th><input type=\"checkbox\" /></th>"; thead += "<th> </th>"; } if (opt.IsShowNum) { thead += "<th>序号</th>"; } $.each(opt.colums, function (index, item) { thead += "<th>" + item + "</th>"; }); thead += "</tr></thead>"; $table.append(thead); // $table.find("thead input[type='checkbox']").live('click', function () { // //选中全选按钮 // if ($(this).attr("checked")) { // $table.find("tbody input[type='checkbox']").attr("checked", "true"); // } // //取消选中全选按钮 // else { // $table.find("tbody input[type='checkbox']").removeAttr("checked"); // } // }); $table.find("tbody input[type='checkbox']").live('click', function () { //撤销其他的被选中的复选框 if ($(this).attr("checked") == "checked") { $(this).parent().parent().css("background-color", "Yellow"); } else { $(this).parent().parent().css("background-color", "white"); } if ($table.find("tbody input[type='checkbox']:checked").length > 1) { var temp = $(this); $table.find("tbody input[type='checkbox']:checked").each(function (index, item) { if (!$(item).is(temp)) { $(item).removeAttr("checked"); $(item).parent().parent().css("background-color", "white"); } }); } //json格式保存选中行信息 var selectRows = "{"; selectRows.length = 0; var flag = 0; while (flag < opt.colums.length) { $(this).parent().parent().find("td").each(function (index, item) { if ($.trim($(item).text()) != "" && $(item).attr("class") != "xuhao") { selectRows += "\"" + opt.colums[flag] + "\"" + ":" + "\"" + $(item).text() + "\""; selectRows += ","; flag += 1; } }); } selectRows = selectRows.substr(0, selectRows.lastIndexOf(",")); selectRows += "}"; $this.data("selectRow", eval("(" + selectRows + ")")); }); } if (opt.pageType == "word") { //生成页脚 var tfoot = ""; var TempColumsNum = opt.colums.length; if (opt.IsCheckBox) { TempColumsNum += 1; } if (opt.IsShowNum) { TempColumsNum += 1; } tfoot += "<tfoot><th colspan=" + TempColumsNum + ">"; tfoot += '<input id=' + id + '_btnFirst type="button" value="首页" />'; tfoot += '<input id=' + id + '_btnPre type="button" value="上一页" />'; tfoot += '<input id=' + id + '_btnNext type="button" value="下一页" />'; tfoot += '<input id=' + id + '_btnEnd type="button" value="末页" />'; tfoot += "</th></tfoot>"; $table.append(tfoot); //首页 $("#" + id + "_btnFirst").click(function () { currentSize = 1; $table.find("tbody").html(""); $table.append(Myfunctions.BuildTBody(currentSize, id)); }); //上一页 $("#" + id + "_btnPre").click(function () { currentSize -= 1; $table.find("tbody").html(""); $table.append(Myfunctions.BuildTBody(currentSize, id)); }); //下一页 $("#" + id + "_btnNext").click(function () { currentSize += 1; $table.find("tbody").html(""); $table.append(Myfunctions.BuildTBody(currentSize, id)); }); //末页 $("#" + id + "_btnEnd").click(function () { currentSize = Math.ceil(opt.data.length / opt.pageSize); $table.find("tbody").html(""); $table.append(Myfunctions.BuildTBody(currentSize, id)); }); } else if (opt.pageType == "number") { var tfoot = ""; var ts = Myfunctions.TotalSize; var TempColumsNum = opt.colums.length; if (opt.IsCheckBox) { TempColumsNum += 1; } if (opt.IsShowNum) { TempColumsNum += 1; } tfoot += "<tfoot><th colspan=" + TempColumsNum + ">"; if (ts <= 5) { for (var i = 1; i <= ts; i++) { tfoot += '<a class="noactive">' + i + '</a>' + ''; } } else { for (var i = 1; i <= 4; i++) { tfoot += '<a class="noactive">' + i + '</a>' + ''; } } tfoot += "</th></tfoot>"; $table.append(tfoot); $table.find("a:first").attr("class", "active"); $table.find("tfoot a").live('click', function () { $table.find("tfoot").find("a").attr("class", "noactive"); $(this).attr("class", "active"); currentSize = parseInt($(this).text()); $table.find("tbody").html(""); $table.append(Myfunctions.BuildTBody(currentSize, "")); //点击四个页码的最后一个 if ($(this).next().text() == "") { if (currentSize + 2 <= Myfunctions.TotalSize) { $(this).after('<a class="noactive">' + (currentSize + 2) + '</a>' + ''); $(this).after('<a class="noactive">' + (currentSize + 1) + '</a>' + ''); $table.find("tfoot a:eq(0)").remove(); $table.find("tfoot a:eq(0)").remove(); } else if (currentSize + 1 <= Myfunctions.TotalSize) { $(this).after('<a class="noactive">' + (currentSize + 1) + '</a>' + ''); $table.find("tfoot a:eq(0)").remove(); } else { //alert("已到末页！"); } } //点击四个页码的第一个 if ($(this).prev().text() == "") { currentSize = parseInt($(this).text()); if (currentSize - 2 >= 1) { $(this).before('<a class="noactive">' + (currentSize - 2) + '</a>' + ''); $(this).before('<a class="noactive">' + (currentSize - 1) + '</a>' + ''); $table.find("tfoot a:last").remove(); $table.find("tfoot a:last").remove(); } else if (currentSize - 1 >= 1) { $(this).before('<a class="noactive">' + (currentSize - 1) + '</a>' + ''); $table.find("tfoot a:last").remove(); } else { //alert("已到首页！"); } } }); } //生成列表数据 if (opt.data != null) { $table.append(Myfunctions.BuildTBody(currentSize, id)); } return this; } $.fn.MyList.defaultOptions = { //要展示的列表数据，目前支持格式为[[],[],[]...] data: null, //列名，目前支持格式为[“列a”,“列b”,“列c”] colums: null, //每页展示条数，默认10条 pageSize: 10, //页码类型，支持数字型(number)和文字型(word) pageType: "word", //是否加一个复选框列 IsCheckBox: false, //是否显示序号列 IsShowNum: true }})(jQuery)网页源代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyJqueryPlugin.列表插件.自己做列表插件.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="../Jquery的DataTables插件/DataTables-1.9.4/media/js/jquery.js" type="text/javascript"></script> <link href="StyleSheet1.css" rel="stylesheet" type="text/css" /> <script src="JScript1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#duoduo").MyList({ data: [["1", "2", "3", "4"], ["5", "6", "7", "8"], ["9", "10", "11", "12"], ["13", "14", "15", "16"], ["17", "18", "19", "20"], ["21", "22", "23", "24"], ["25", "26", "27", "28"], ["29", "30", "31", "32"], ["33", "34", "35", "36"], ["37", "38", "39", "40"], ["41", "42", "43", "44"]], colums: ["列1", "列2", "列3", "列4"], pageSize: 5, pageType: "word", IsCheckBox: true }); $("#Div1").MyList({ data: [["1", "2", "3"], ["5", "6", "7"], ["9", "10", "11"], ["13", "14", "15"], ["17", "18", "19"], ["21", "22", "23"], ["25", "26", "27"], ["29", "30", "31"], ["33", "34", "35"], ["37", "38", "39"], ["41", "42", "43"], ["44", "45", "46"], ["47", "48", "49"], ["50", "51", "52"], ["53", "54", "55"], ["56", "57", "58"], ["59", "60", "61"], ["62", "63", "64"], ["65", "66", "67"], ["68", "69", "70"], ["71", "72", "73"], ["74", "75", "76"], ["77", "78", "79"]], colums: ["列1", "列2", "列3"], pageSize: 4, pageType: "number" }); $("#Button1").click(function () { if ($("#duoduo").data("selectRow") == undefined) { alert("您还未选中任何行！"); } alert("列1：" + $("#duoduo").data("selectRow").列1 + "，" + "列2：" + $("#duoduo").data("selectRow").列2 + "，" + "列3：" + $("#duoduo").data("selectRow").列3 + "，" + "列4：" + $("#duoduo").data("selectRow").列4); }); }); </script></head><body> <form id="form1" runat="server"> <div id="duoduo" style="width: 50%"> </div> <input id="Button1" type="button" value="获取选中行信息" /> <br /> <br /> <div id="Div1" style="width: 50%"> </div> </form></body></html>css样式：
body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;/*background: #E6EAE9;*/}.noactive { margin:5px; color:Blue; cursor:pointer}.active{ margin:5px; color:Gray; cursor:pointer}table.display {margin: 0 auto;clear: both;width: 100%;}table.display thead th {padding: 3px 18px 3px 10px;font-weight: bold;cursor: pointer;background: #CAE8EA url(images/bg_header.jpg) no-repeat;}table.display tfoot th {padding: 3px 18px 3px 10px;font-weight: bold; text-align:right}table.display td {padding: 3px 10px;text-align: center;}th {font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;letter-spacing: 2px;text-transform: uppercase;text-align: center;padding: 6px 6px 6px 12px;background: #CAE8EA url(images/bg_header.jpg) no-repeat;}td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;/*background: #fff;*/font-size:15px;padding: 6px 6px 6px 12px;color: #4f6b72;} 1 0
- 自己做jQuery开源插件之终极篇：数据表格插件
- 自己做jQuery开源插件之二：数据校验插件
- 自己做jQuery开源插件之一：三级联动插件
- 自己做jQuery开源插件之三：文本框自动提示插件
- 自己做jQuery开源插件之四：弹出层插件
- jQuery表格插件jqGrid之JSON数据
- JQuery.dataTables免费开源的数据表格插件
- JQuery表格插件之Datatables
- jQuery插件之表格排序
- jQuery 表格插件jqGrid 本地数据
- JQuery绑定JSON数据至表格插件
- 自己做个js表格插件呗--mytable v0.1
- jquery表格插件推荐
- jQuery 表格插件汇总
- jQuery 表格插件汇总
- jquery插件【编辑表格】
- jQuery 表格插件汇总
- jquery 表格插件
- Quaternion四元数 翻译
- ZOJ 3722 Calculate the Function（线段树+矩阵）
- 栈和铁轨 栈的基本运用
- 生命中最难的阶段，是你不懂你自己
- java final
- 自己做jQuery开源插件之终极篇：数据表格插件
- Unix程序设计哲学
- [Java]多线程总结之由synchronized说开去
- .NET WINFORM 日历控件在panel中进行gdi绘制闪烁问题
- c3 Threads - Running Threads
- mac终端命令大全介绍
- 移动web开发，ios字体使用
- 4G版华为P7获入网答应 5寸屏真机曝光
- linux文件系统成为只读，未完全启动的解决办法
