创建自己的jquery表格插件

mfkpum

2015-11-25

在模仿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 table