創(chuàng)建自己的jquery表格插件
在模仿easyui的dataGrid表格插件的同時(shí),自己去封裝了一個(gè)。實(shí)現(xiàn)了基本的json數(shù)據(jù)的動(dòng)態(tài)加載,自動(dòng)分頁,全選全不選,鼠標(biāo)懸浮變色,隔行變色等
由于涉及到ajax訪問,所以必須部署到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, //是否分頁 pagination: false, //是否隔行變色 isoddcolor: false, //是否搜索欄 searchnation:false, //頁顯示 pagesize: 5, //頁索引 pageindex: 1, //總頁數(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(); //選擇是否分頁 if (this.settings.pagination) this.createTableFoot(); }, bindEvent: function () { //添加上一頁事件 this.registerUpPage(); //添加下一頁事件 this.registerNextPage(); //添加首頁事件 this.registerFirstPage(); //添加最后一頁事件 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); //總頁數(shù)=向上取整(總數(shù)/每頁數(shù)) _op.settings.totalpage = Math.ceil((json.total) / _op.settings.pagesize); //開始頁數(shù) var startPage = _op.settings.pagesize * (pn - 1); //結(jié)束頁數(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(); }, //初始化分頁 createTableFoot: function () { var footHtml = "<tr><td>"; footHtml += "<span id='countPage'>第<font id='currentpageIndex'>1</font>/" + _op.settings.totalpage + "頁</span>"; footHtml += "<span id='firstPage'>首頁</span>"; footHtml += "<span id='UpPage'>上一頁</span>"; footHtml += "<span id='nextPage'>下一頁</span>"; footHtml += "<span id='lastPage'>末頁</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); }); } }); }, //添加首頁事件 registerFirstPage: function () { $("#firstPage").click(function(){ _op.settings.pageindex = 1; _op.createTableBody( _op.settings.pageindex); }); }, //添加上一頁事件 registerUpPage: function () { $("table").delegate("#UpPage", "click", function () { if ( _op.settings.pageindex == 1) { alert("已經(jīng)是第一頁了"); return; } _op.settings.pageindex = _op.settings.pageindex - 1; _op.createTableBody(_op.settings.pageindex); }); }, //添加下一頁事件 registerNextPage: function () { $("table").delegate("#nextPage", "click", function () { if (_op.settings.pageindex == _op.settings.totalpage) { alert("已經(jīng)是最后一頁了"); return; } _op.settings.pageindex = _op.settings.pageindex + 1; _op.createTableBody(_op.settings.pageindex); }); }, //添加尾頁事件 registerlastPage: function () { $("table").delegate("#lastPage", "click", function () { _op.settings.pageindex = _op.settings.totalpage; _op.createTableBody( _op.settings.totalpage); }); }, //添加頁數(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("超出頁總數(shù)"); } else alert("請(qǐng)輸入數(shù)字"); }); }, //添加異步ajax事件 getAjaxDate: function (url, parms) { //定義一個(gè)全局變量來接受$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>無標(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頁面加載進(jìn)度條插件
- 編寫自己的jQuery提示框(Tip)插件
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁插件
- 自己使用jquery寫的一個(gè)無縫滾動(dòng)的插件
- 自己動(dòng)手開發(fā)jQuery插件教程
- jQuery創(chuàng)建自己的插件(自定義插件)的方法
- jQuery flip插件實(shí)現(xiàn)的翻牌效果示例【附demo源碼下載】
- jQuery插件easyUI實(shí)現(xiàn)通過JS顯示Dialog的方法
- jquery validate表單驗(yàn)證插件
- jQuery樹形插件jquery.simpleTree.js用法分析
- 打造自己的jQuery插件入門教程
相關(guān)文章
jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作示例
這篇文章主要介紹了jQuery時(shí)間戳和日期相互轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間戳的轉(zhuǎn)換、運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)div拖拽效果的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁面元素樣式變換的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-02-02jQuery往textarea中光標(biāo)所在位置插入文本的方法
這篇文章主要介紹了jQuery往textarea中光標(biāo)所在位置插入文本的方法,實(shí)例分析了jQuery操作光標(biāo)及文本的相關(guān)技巧,需要的朋友可以參考下2015-06-06javascript右下角彈層及自動(dòng)隱藏(自己編寫)
需要有個(gè)右下角彈層提示公告的,下面分享早些時(shí)候自己編寫,以及現(xiàn)在還在應(yīng)用的自動(dòng)彈層,需要的朋友可以參考下2013-11-11jquery使用淘寶接口跨域查詢手機(jī)號(hào)碼歸屬地實(shí)例
這篇文章主要介紹了jquery使用淘寶接口跨域查詢手機(jī)號(hào)碼歸屬地的方法,大家參考使用吧2013-11-11jquery 簡短幾句代碼實(shí)現(xiàn)給元素動(dòng)態(tài)添加及獲取提示信息
雖然是很基本的東西,但為什么很基本的方法就可以實(shí)現(xiàn)的東西有些人偏偏還要去追求復(fù)雜高深難懂的呢?這里只是交流而已2011-09-09