欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

創(chuàng)建自己的jquery表格插件

 更新時(shí)間:2015年11月25日 16:49:33   作者:不想當(dāng)碼農(nóng)  
這篇文章主要介紹了一個(gè)自己創(chuàng)建的jquery表格插件,實(shí)現(xiàn)了基本的json數(shù)據(jù)的動(dòng)態(tài)加載,自動(dòng)分頁,全選全不選,鼠標(biāo)懸浮變色,隔行變色等,感興趣的小伙伴們可以參考一下

在模仿easyui的dataGrid表格插件的同時(shí),自己去封裝了一個(gè)。實(shí)現(xiàn)了基本的json數(shù)據(jù)的動(dòng)態(tài)加載,自動(dòng)分頁,全選全不選,鼠標(biāo)懸浮變色,隔行變色等

由于涉及到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": "自定義特性(如:皮膚風(fēng)格選擇等)部分",
    "descrtion":"描述自定義特性(如:皮膚風(fēng)格選擇等)",
    "Price": 5500
   },
    { 
     "ID": 3,
    "name": "具體定義及實(shí)現(xiàn)部分",
    "descrtion":"描述具體定義及實(shí)現(xiàn)部分",
    "Price": 150
   },
   {
    "ID": 4,
    "name": "對(duì)外開放部分",
    "descrtion":"描述對(duì)外開放部分",
    "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 開始計(jì)數(shù)",
    "descrtion":"從 0 開始計(jì)數(shù)",
    "Price": 650
   },
    {
    "ID": 9,
    "name": "公共js和公共css樣式部分",
    "descrtion":"描述公共js和公共css樣式部分",
    "Price": 950
   },
   {
    "ID": 10,
    "name": "自定義特性(如:皮膚風(fēng)格選擇等)部分",
    "descrtion":"描述自定義特性(如:皮膚風(fēng)格選擇等)",
    "Price": 5500
   },
    { 
     "ID": 11,
    "name": "具體定義及實(shí)現(xiàn)部分",
    "descrtion":"描述具體定義及實(shí)現(xiàn)部分",
    "Price": 150
   },
   {
    "ID": 12,
    "name": "對(duì)外開放部分",
    "descrtion":"描述對(duì)外開放部分",
    "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 開始計(jì)數(shù)",
    "descrtion":"從 0 開始計(jì)數(shù)",
    "Price": 650
   }
  ]
 }

jquery代碼

// JavaScript Document
$(function () {
 var dataGrid = function (ele, opt) {
  this.defaults = {
   //id
   id: "",
   //請(qǐng)求url
   url: null,
   //表頭格式
   columns: null,
   //是否分頁
   pagination: false,
   //是否隔行變色
   isoddcolor: false,
   //是否搜索欄
   searchnation:false,
   //頁顯示
   pagesize: 5,
   //頁索引
   pageindex: 1,
   //總頁數(shù)
   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();
   //初始化動(dòng)態(tài)行
   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();
   //添加跳轉(zhuǎn)事件
   this.registerSkipPage();
   //添加鼠標(biāo)懸浮事件
   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>");
  },
  //循環(huán)添加表頭
  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>");
   }
  },
  //循環(huán)添加行
  createTableBody: function (pn) {
   var columns = _op.settings.columns;
   var json = this.getAjaxDate( _op.settings.url, null);
   //總頁數(shù)=向上取整(總數(shù)/每頁數(shù))
    _op.settings.totalpage = Math.ceil((json.total) / _op.settings.pagesize);
   //開始頁數(shù)
   var startPage = _op.settings.pagesize * (pn - 1);
   //結(jié)束頁數(shù)
   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'>跳轉(zhuǎn)</span>";
   footHtml += "</td></tr>";
   $("table[id='" + this._id + "'] tfoot").append(footHtml);
   $("table[id='" + this._id + "'] tfoot tr td").attr("colspan", "5");
  },
  //添加鼠標(biāo)懸浮事件
  registermousehover: function () {
   //添加鼠標(biāo)懸浮事件
   $("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("已經(jīng)是第一頁了");
     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("已經(jīng)是最后一頁了");
     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);
   });
  },
  //添加頁數(shù)跳轉(zhuǎn)事件
  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("超出頁總數(shù)");
    } else alert("請(qǐng)輸入數(shù)字");
   });
  },
  //添加異步ajax事件
  getAjaxDate: function (url, parms) {
   //定義一個(gè)全局變量來接受$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調(diào)用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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: '編號(hào)', width:100, align: 'center'},
       { field: 'name', title: '名稱', width: 150, align: 'left' },
       { field: 'descrtion', title: '描述', width: 350, align: 'left' },
       { field: 'Price', title: '價(jià)格', 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>

本文只是為大家提供了一個(gè)框架、思路,如何將這些知識(shí)點(diǎn)串連在一起,還需要大家認(rèn)真的學(xué)習(xí)研究,動(dòng)手創(chuàng)建一個(gè)屬于自己的jquery表格插件。

相關(guān)文章

最新評(píng)論