首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

创建自己的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表格插件。

创建自己的jquery表格插件

- Author -

不想当码农

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
简单的JavaScript互斥锁分享
Feb 02 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
小程序云开发之用户注册登录
May 18 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
RustDesk(1) Debian(1) 蓝牙(1) 华为(1) 鸿蒙3.0(1) 虚拟键盘(1) xhunter1.sys(1) HarmonyOS(1) 鸿蒙(2) 蓝牙耳机(1)
You might like
re0第二季蕾姆被制作组打入冷宫！艾米莉亚女主扶正，原因唏嘘
2020/04/02 日漫
德生PL550的电路分析
2021/03/02 无线电
用PHP调用数据库的存贮过程！
2006/10/09 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
Laravel 队列使用的实现
2019/01/08 PHP
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
从零学Python之入门（四）运算
2014/05/27 Python
Python多继承原理与用法示例
2018/08/23 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
PHP高级工程师面试问题推荐
2013/01/18 面试题
Python中如何定义一个函数
2016/09/06 面试题
Java模拟试题
2014/11/10 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
自考毕业自我鉴定范文
2013/10/27 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
飞越疯人院观后感
2015/06/09 职场文书
三八妇女节主持词
2015/07/04 职场文书