創(chuàng)建自己的jquery表格插件
更新時(shí)間：2015年11月25日 16:49:33 作者：不想當(dāng)碼農(nóng)
這篇文章主要介紹了一個(gè)自己創(chuàng)建的jquery表格插件，實(shí)現(xiàn)了基本的json數(shù)據(jù)的動(dòng)態(tài)加載，自動(dòng)分頁(yè)，全選全不選，鼠標(biāo)懸浮變色，隔行變色等，感興趣的小伙伴們可以參考一下
在模仿easyui的dataGrid表格插件的同時(shí)，自己去封裝了一個(gè)。實(shí)現(xiàn)了基本的json數(shù)據(jù)的動(dòng)態(tài)加載，自動(dòng)分頁(yè)，全選全不選，鼠標(biāo)懸浮變色，隔行變色等
由于涉及到ajax訪問(wèn)，所以必須部署到iis上才能看出效果，先給大家看一下效果圖：
css樣式
/* CSS Document */
body {
font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial;
color: #253443;
margin: 0 auto;
padding: 0 auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
background: #FFF;
font-size: 12px;
width: 100%;
border: 1;
width: 100%;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
table thead tr {
background-color: #E6F0FF;
}
table thead tr th {
padding: 5px 8px;
font-weight: normal;
color: #999;
border-bottom: 1px solid #B50802;
vertical-align: bottom;
line-height: 20px;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
table tbody tr td {
padding: 8px;
border-top: 0px;
border-bottom: 1px solid #DDD;
vertical-align: middle;
line-height: 20px;
}
table tfoot tr td {
width: 100%;
background-color: #F4F4F4;
height: 20px;
padding: 8px 0px;
color: #000;
}
table tfoot tr td input {
width: 30px;
float: left;
}
table tfoot tr td span {
display: inline-block;
cursor: pointer;
height:20px;
padding:0 10px;
float: left;
}
.mouseover {
background-color: #EAF2FF;
color: #000;
}
JSON文件
{
"total":16,
"rows": [
{
"ID": 1,
"name": "公共js和公共css樣式部分",
"descrtion":"描述公共js和公共css樣式部分",
"Price": 950
},
{
"ID": 2,
"name": "自定義特性（如：皮膚風(fēng)格選擇等）部分",
"descrtion":"描述自定義特性（如：皮膚風(fēng)格選擇等）",
"Price": 5500
},
{
"ID": 3,
"name": "具體定義及實(shí)現(xiàn)部分",
"descrtion":"描述具體定義及實(shí)現(xiàn)部分",
"Price": 150
},
{
"ID": 4,
"name": "對(duì)外開放部分",
"descrtion":"描述對(duì)外開放部分",
"Price": 650
},
{
"ID": 5,
"name": "公共js和公共css樣式部分",
"descrtion":"描述公共js和公共css樣式部分",
"Price": 950
},
{
"ID": 6,
"name": "匹配所有大于給定索引值的元素",
"descrtion":"描述匹配所有大于給定索引值的元素",
"Price": 5500
},
{
"ID": 7,
"name": "查找第二第三行，即索引值是1和2，也就是比0大",
"descrtion":"描述查找第二第三行，即索引值是1和2，也就是比0大",
"Price": 150
},
{
"ID": 8,
"name": "從 0 開始計(jì)數(shù)",
"descrtion":"從 0 開始計(jì)數(shù)",
"Price": 650
},
{
"ID": 9,
"name": "公共js和公共css樣式部分",
"descrtion":"描述公共js和公共css樣式部分",
"Price": 950
},
{
"ID": 10,
"name": "自定義特性（如：皮膚風(fēng)格選擇等）部分",
"descrtion":"描述自定義特性（如：皮膚風(fēng)格選擇等）",
"Price": 5500
},
{
"ID": 11,
"name": "具體定義及實(shí)現(xiàn)部分",
"descrtion":"描述具體定義及實(shí)現(xiàn)部分",
"Price": 150
},
{
"ID": 12,
"name": "對(duì)外開放部分",
"descrtion":"描述對(duì)外開放部分",
"Price": 650
},
{
"ID": 13,
"name": "公共js和公共css樣式部分",
"descrtion":"描述公共js和公共css樣式部分",
"Price": 950
},
{
"ID": 14,
"name": "匹配所有大于給定索引值的元素",
"descrtion":"描述匹配所有大于給定索引值的元素",
"Price": 5500
},
{
"ID": 15,
"name": "查找第二第三行，即索引值是1和2，也就是比0大",
"descrtion":"描述查找第二第三行，即索引值是1和2，也就是比0大",
"Price": 150
},
{
"ID": 16,
"name": "從 0 開始計(jì)數(shù)",
"descrtion":"從 0 開始計(jì)數(shù)",
"Price": 650
}
]
}
jquery代碼
// JavaScript Document
$(function () {
var dataGrid = function (ele, opt) {
this.defaults = {
//id
id: "",
//請(qǐng)求url
url: null,
//表頭格式
columns: null,
//是否分頁(yè)
pagination: false,
//是否隔行變色
isoddcolor: false,
//是否搜索欄
searchnation:false,
//頁(yè)顯示
pagesize: 5,
//頁(yè)索引
pageindex: 1,
//總頁(yè)數(shù)
totalpage: null
}
this.settings = $.extend({}, this.defaults, opt);
}
dataGrid.prototype = {
_id:null,
_op:null,
init: function () {
this._id=this.settings.id;
_op=this;
this.create();
this.bindEvent();
},
create: function () {
//初始化元素
this.InitializeElement();
//初始化表頭
this.createTableHead();
//初始化動(dòng)態(tài)行
this.createTableBody(1);
//初始化搜索框
//if(this.settings.searchnation) this.createsearchbox();
//選擇是否分頁(yè)
if (this.settings.pagination) this.createTableFoot();
},
bindEvent: function () {
//添加上一頁(yè)事件
this.registerUpPage();
//添加下一頁(yè)事件
this.registerNextPage();
//添加首頁(yè)事件
this.registerFirstPage();
//添加最后一頁(yè)事件
this.registerlastPage();
//添加跳轉(zhuǎn)事件
this.registerSkipPage();
//添加鼠標(biāo)懸浮事件
this.registermousehover();
//添加隔行變色
this.registerchangebgcolor();
//添加全選全不選事件
this.registercheckall();
},
//初始化元素
InitializeElement: function () {
//var id = this.settings.id;
$("#"+this._id).empty().append("<thead><tr></tr></thead><tbody></tbody><TFOOT></TFOOT>");
},
//循環(huán)添加表頭
createTableHead: function () {
var headcols = this.settings.columns;
for (var i = 0; i < headcols.length; i++) {
if (headcols[i].field == 'ck') $("table[id='" + this._id + "'] thead tr").append("<th width='50px'><input name='chkall' type='checkbox'></th>");
else $("table[id='" + this._id + "'] thead tr").append("<th width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "</th>");
}
},
//循環(huán)添加行
createTableBody: function (pn) {
var columns = _op.settings.columns;
var json = this.getAjaxDate( _op.settings.url, null);
//總頁(yè)數(shù)=向上取整(總數(shù)/每頁(yè)數(shù))
_op.settings.totalpage = Math.ceil((json.total) / _op.settings.pagesize);
//開始頁(yè)數(shù)
var startPage = _op.settings.pagesize * (pn - 1);
//結(jié)束頁(yè)數(shù)
var endPage = startPage + _op.settings.pagesize;
var rowsdata = "";
for (var row = startPage; row < endPage; row++) {
if (row == json.rows.length) break;
rowsdata += "<tr>";
for (var colindex = 0; colindex < columns.length; colindex++) {
if (columns[colindex].field == 'ck') rowsdata += '<td width="50px" align="center"><input name="chk" type="checkbox"></td>'
else rowsdata += '<td width=' + columns[colindex].width + ' align=' + columns[colindex].align + '>' + json.rows[row][columns[colindex].field] + '</td>';
}
rowsdata += "</tr>";
}
$("table[id='" + this._id + "'] tbody").empty().append(rowsdata);
$("#currentpageIndex").html(pn);
this.registermousehover();
},
//初始化分頁(yè)
createTableFoot: function () {
var footHtml = "<tr><td>";
footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + _op.settings.totalpage + "頁(yè)</span>";
footHtml += "<span id='firstPage'>首頁(yè)</span>";
footHtml += "<span id='UpPage'>上一頁(yè)</span>";
footHtml += "<span id='nextPage'>下一頁(yè)</span>";
footHtml += "<span id='lastPage'>末頁(yè)</span>";
footHtml += "<input type='text'/><span id='skippage'>跳轉(zhuǎn)</span>";
footHtml += "</td></tr>";
$("table[id='" + this._id + "'] tfoot").append(footHtml);
$("table[id='" + this._id + "'] tfoot tr td").attr("colspan", "5");
},
//添加鼠標(biāo)懸浮事件
registermousehover: function () {
//添加鼠標(biāo)懸浮事件
$("table[id='" + this._id + "'] tbody tr").mouseover(function () {
$(this).addClass("mouseover");
}).mouseleave(function () {
$(this).removeClass("mouseover");
});
},
//添加隔行變色事件
registerchangebgcolor: function () {
//添加隔行變色
if (this.settings.isoddcolor) $("table[id='" + this._id + "'] tr:odd").css("background-color", "#A77C7B").css("color", "#fff");
},
//添加全選全不選事件
registercheckall: function () {
//添加全選全不選事件
$("input[name='chkall']").click(function () {
if (this.checked) {
$("input[name='chk']").each(function () {
$(this).attr("checked", true);
});
} else {
$("input[name='chk']").each(function () {
$(this).attr("checked", false);
});
}
});
},
//添加首頁(yè)事件
registerFirstPage: function () {
$("#firstPage").click(function(){
_op.settings.pageindex = 1;
_op.createTableBody( _op.settings.pageindex);
});
},
//添加上一頁(yè)事件
registerUpPage: function () {
$("table").delegate("#UpPage", "click",
function () {
if ( _op.settings.pageindex == 1) {
alert("已經(jīng)是第一頁(yè)了");
return;
}
_op.settings.pageindex = _op.settings.pageindex - 1;
_op.createTableBody(_op.settings.pageindex);
});
},
//添加下一頁(yè)事件
registerNextPage: function () {
$("table").delegate("#nextPage", "click",
function () {
if (_op.settings.pageindex == _op.settings.totalpage) {
alert("已經(jīng)是最后一頁(yè)了");
return;
}
_op.settings.pageindex = _op.settings.pageindex + 1;
_op.createTableBody(_op.settings.pageindex);
});
},
//添加尾頁(yè)事件
registerlastPage: function () {
$("table").delegate("#lastPage", "click",
function () {
_op.settings.pageindex = _op.settings.totalpage;
_op.createTableBody( _op.settings.totalpage);
});
},
//添加頁(yè)數(shù)跳轉(zhuǎn)事件
registerSkipPage: function () {
$("table").delegate("#skippage", "click",
function () {
var value = $("table[id='" + this._id + "'] tfoot tr td input").val();
if (!isNaN(parseInt(value))) {
if (parseInt(value) <= _op.settings.totalpage) _op.createTableBody(parseInt(value));
else alert("超出頁(yè)總數(shù)");
} else alert("請(qǐng)輸入數(shù)字");
});
},
//添加異步ajax事件
getAjaxDate: function (url, parms) {
//定義一個(gè)全局變量來(lái)接受$post的返回值
var result;
//用ajax的同步方式
$.ajax({
url: url,
async: false,
//改為同步方式
data: parms,
success: function (data) {
result = data;
}
});
return result;
}
}
$.fn.grid = function (options) {
var grid = new dataGrid(this, options);
return this.each(function () {
grid.init();
});
}
})
html調(diào)用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script src="jquery-1.8.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="pagetion.js"></script>
<script type="text/javascript">
$(function(){
$("#dg").grid({
id:"dg",
url:"data.json",
columns: [
{field:'ck',checkbox:true},
{ field: 'ID', title: '編號(hào)', width:100, align: 'center'},
{ field: 'name', title: '名稱', width: 150, align: 'left' },
{ field: 'descrtion', title: '描述', width: 350, align: 'left' },
{ field: 'Price', title: '價(jià)格', width: 100, align: 'left' }
],
isoddcolor:false,
pagination:true,
searchnation:true,
pagesize:5
});
});
</script>
</head>
<body>
<form id="form1">
<table id="dg">
</table>
</form>
</body>
</html>
本文只是為大家提供了一個(gè)框架、思路，如何將這些知識(shí)點(diǎn)串連在一起，還需要大家認(rèn)真的學(xué)習(xí)研究，動(dòng)手創(chuàng)建一個(gè)屬于自己的jquery表格插件。
您可能感興趣的文章:
- 自己動(dòng)手制作基于jQuery的Web頁(yè)面加載進(jìn)度條插件
- 編寫自己的jQuery提示框（Tip）插件
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁(yè)插件
- 自己使用jquery寫的一個(gè)無(wú)縫滾動(dòng)的插件
- 自己動(dòng)手開發(fā)jQuery插件教程
- jQuery創(chuàng)建自己的插件(自定義插件)的方法
- jQuery flip插件實(shí)現(xiàn)的翻牌效果示例【附demo源碼下載】
- jQuery插件easyUI實(shí)現(xiàn)通過(guò)JS顯示Dialog的方法
- jquery validate表單驗(yàn)證插件
- jQuery樹形插件jquery.simpleTree.js用法分析
- 打造自己的jQuery插件入門教程
相關(guān)文章
這篇文章主要介紹了jQuery中復(fù)合屬性選擇器用法,實(shí)例分析了復(fù)合屬性選擇器匹配同時(shí)滿足多個(gè)屬性條件元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery div拖拽用法,以完整實(shí)例形式分析了jQuery結(jié)合UI插件實(shí)現(xiàn)拖拽功能的相關(guān)技巧,需要的朋友可以參考下2016-01-01
簡(jiǎn)單實(shí)現(xiàn)jQuery手風(fēng)琴效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)jQuery手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
jQuery+ajax實(shí)現(xiàn)修改密碼驗(yàn)證功能實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了jQuery+ajax實(shí)現(xiàn)修改密碼驗(yàn)證功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-07-07
jQuery自定義數(shù)值抽獎(jiǎng)活動(dòng)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery自定義數(shù)值抽獎(jiǎng)活動(dòng)的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-06-06
對(duì)一個(gè)文件域(input type=file)使用了驗(yàn)證后，我們總會(huì)希望把文件域中的值給清空了，在IE中，由于安全設(shè)置的原因，是不允許更改文件域的值的，接下來(lái)為大家介紹一下解決方法2013-04-04
jQuery過(guò)濾HTML標(biāo)簽并高亮顯示關(guān)鍵字的方法
這篇文章主要介紹了jQuery過(guò)濾HTML標(biāo)簽并高亮顯示關(guān)鍵字的方法,實(shí)例分析了jquery遍歷html標(biāo)簽并進(jìn)行替換的相關(guān)技巧,需要的朋友可以參考下2015-08-08
再談Jquery Ajax方法傳遞到action(補(bǔ)充)
之前寫過(guò)一篇文章Jquery Ajax方法傳值到action，本文是對(duì)該文的補(bǔ)充2014-05-05
jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
這篇文章主要介紹了jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jQuery實(shí)現(xiàn)圖像旋轉(zhuǎn)動(dòng)畫效果
jquery動(dòng)畫旋轉(zhuǎn)效果在項(xiàng)目中經(jīng)常遇到這樣的需求，下面小編給大家分享具體實(shí)現(xiàn)代碼，感興趣的朋友一起學(xué)習(xí)吧2016-05-05