Créez votre propre table jquery plugin_jquery

En imitant le plug-in de table dataGrid d'easyui, j'en ai encapsulé un moi-même. Réalise le chargement dynamique des données JSON de base, la pagination automatique, tout sélectionner et tout désélectionner, changer de couleur au survol de la souris, changer de couleur sur des lignes alternatives, etc.

Comme l'accès ajax est impliqué, il doit être déployé sur iis pour voir l'effet. Laissez-moi d'abord vous montrer le rendu :

style 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;
}

Fichier 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
   }
  ]
 }

code 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();
  });
 }
})

appel 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>

Cet article ne vous fournit qu'un cadre et des idées. Comment relier ces points de connaissances entre eux vous oblige à étudier et à rechercher soigneusement et à créer votre propre plug-in de table jquery.