创建自己的jquery表格插件


Posted in Javascript onNovember 25, 2015

在模仿easyui的dataGrid表格插件的同时,自己去封装了一个。实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等

由于涉及到ajax访问,所以必须部署到iis上才能看出效果,先给大家看一下效果图:

创建自己的jquery表格插件

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表格插件。

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
简单的分页代码js实现
May 17 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
webpack源码之loader机制详解
Apr 06 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
js事件触发操作实例分析
Jun 21 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
一不小心就做错的JS闭包面试题
Nov 25 #Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 #Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 #Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 #Javascript
js获取图片宽高的方法
Nov 25 #Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 #Javascript
javascript常用经典算法实例详解
Nov 25 #Javascript
You might like
用PHP实现维护文件代码
2007/06/14 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
深入浅析python继承问题
2016/05/29 Python
Django values()和value_list()的使用
2020/03/31 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
迎新晚会主持词
2014/03/24 职场文书
项目合作协议书
2014/04/16 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
暑假打工感想
2015/08/07 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js