创建自己的jquery表格插件

在模仿easyui的dataGrid表格插件的同时，自己去封装了一个。实现了基本的json数据的动态加载，自动分页，全选全不选，鼠标悬浮变色，隔行变色等
由于涉及到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": "自定义特性（如：皮肤风格选择等）部分","descrtion":"描述自定义特性（如：皮肤风格选择等）","Price": 5500 },{"ID": 3,"name": "具体定义及实现部分","descrtion":"描述具体定义及实现部分","Price": 150 }, {"ID": 4,"name": "对外开放部分","descrtion":"描述对外开放部分","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 开始计数","descrtion":"从 0 开始计数","Price": 650 },{"ID": 9,"name": "公共js和公共css样式部分","descrtion":"描述公共js和公共css样式部分","Price": 950 }, {"ID": 10,"name": "自定义特性（如：皮肤风格选择等）部分","descrtion":"描述自定义特性（如：皮肤风格选择等）","Price": 5500 },{"ID": 11,"name": "具体定义及实现部分","descrtion":"描述具体定义及实现部分","Price": 150 }, {"ID": 12,"name": "对外开放部分","descrtion":"描述对外开放部分","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 开始计数","descrtion":"从 0 开始计数","Price": 650 }] }

jquery代码

// JavaScript Document$（function （） { var dataGrid = function （ele, opt） {this.defaults = { //id id: "", //请求url url: null, //表头格式 columns: null, //是否分页 pagination: false, //是否隔行变色 isoddcolor: false, //是否搜索栏 searchnation:false, //页显示 pagesize: 5, //页索引 pageindex: 1, //总页数 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（）; //初始化动态行 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（）; //添加跳转事件 this.registerSkipPage（）; //添加鼠标悬浮事件 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>"）;},//循环添加表头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>"）; }},//循环添加行createTableBody: function （pn） { var columns = _op.settings.columns; var json = this.getAjaxDate（ _op.settings.url, null）; //总页数=向上取整（总数/每页数）_op.settings.totalpage = Math.ceil（（json.total） / _op.settings.pagesize）; //开始页数 var startPage = _op.settings.pagesize * （pn - 1）; //结束页数 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">跳转</span>"; footHtml += "</td></tr>"; $（"table[id="" + this._id + ""] tfoot"）.append（footHtml）; $（"table[id="" + this._id + ""] tfoot tr td"）.attr（"colspan", "5"）;},//添加鼠标悬浮事件registermousehover: function （） { //添加鼠标悬浮事件 $（"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（"已经是第一页了"）; 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（"已经是最后一页了"）; 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）; }）;},//添加页数跳转事件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（"超出页总数"）;} else alert（"请输入数字"）; }）;},//添加异步ajax事件getAjaxDate: function （url, parms） { //定义一个全局变量来接受$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调用

<！doctype html><html><head><meta charset="utf-8"><title>无标题文档</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: "编号", width:100, align: "center"}, { field: "name", title: "名称", width: 150, align: "left" }, { field: "descrtion", title: "描述", width: 350, align: "left" }, { field: "Price", title: "价格", 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>

本文只是为大家提供了一个框架、思路，如何将这些知识点串连在一起，还需要大家认真的学习研究，动手创建一个属于自己的jquery表格插件。