创建自己的jquery表格插件

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/8752

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案