Posted in Javascript onNovember 25, 2015
在模仿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表格插件。
创建自己的jquery表格插件
- Author -
不想当码农声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@