在模仿easyui的dataGrid表格插件的同时&＃xff0c;自己去封装了一个。实现了基本的json数据的动态加载&＃xff0c;自动分页&＃xff0c;全选全不选&＃xff0c;鼠标悬浮变色&＃xff0c;隔行变色等
由于涉及到ajax访问&＃xff0c;所以必须部署到iis上才能看出效果&＃xff0c;先给大家看一下效果图&＃xff1a;
![]()
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": "自定义特性(如&＃xff1a;皮肤风格选择等)部分",
"descrtion":"描述自定义特性(如&＃xff1a;皮肤风格选择等)",
"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": "查找第二第三行&＃xff0c;即索引值是1和2&＃xff0c;也就是比0大",
"descrtion":"描述查找第二第三行&＃xff0c;即索引值是1和2&＃xff0c;也就是比0大",
"Price": 150
},
{
"ID": 8,
"name": "从 0 开始计数",
"descrtion":"从 0 开始计数",
"Price": 650
},
{
"ID": 9,
"name": "公共js和公共css样式部分",
"descrtion":"描述公共js和公共css样式部分",
"Price": 950
},
{
"ID": 10,
"name": "自定义特性(如&＃xff1a;皮肤风格选择等)部分",
"descrtion":"描述自定义特性(如&＃xff1a;皮肤风格选择等)",
"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": "查找第二第三行&＃xff0c;即索引值是1和2&＃xff0c;也就是比0大",
"descrtion":"描述查找第二第三行&＃xff0c;即索引值是1和2&＃xff0c;也就是比0大",
"Price": 150
},
{
"ID": 16,
"name": "从 0 开始计数",
"descrtion":"从 0 开始计数",
"Price": 650
}
]
}
jquery代码
// Javascript Document
$(function () {
var dataGrid &＃61; function (ele, opt) {
this.defaults &＃61; {
//id
id: "",
//请求url
url: null,
//表头格式
columns: null,
//是否分页
pagination: false,
//是否隔行变色
isoddcolor: false,
//是否搜索栏
searchnation:false,
//页显示
pagesize: 5,
//页索引
pageindex: 1,
//总页数
totalpage: null
}
this.settings &＃61; $.extend({}, this.defaults, opt);
}
dataGrid.prototype &＃61; {
_id:null,
_op:null,
init: function () {
this._id&＃61;this.settings.id;
_op&＃61;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 &＃61; this.settings.id;
$("#"&＃43;this._id).empty().append("
");
},
//循环添加表头
createTableHead: function () {
var headcols &＃61; this.settings.columns;
for (var i &＃61; 0; i
if (headcols[i].field &＃61;&＃61; &＃39;ck&＃39;) $("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] thead tr").append("
");
else $("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] thead tr").append("
" &＃43; headcols[i].title &＃43; "");
}
},
//循环添加行
createTableBody: function (pn) {
var columns &＃61; _op.settings.columns;
var json &＃61; this.getAjaxDate( _op.settings.url, null);
//总页数&＃61;向上取整(总数/每页数)
_op.settings.totalpage &＃61; Math.ceil((json.total) / _op.settings.pagesize);
//开始页数
var startPage &＃61; _op.settings.pagesize * (pn - 1);
//结束页数
var endPage &＃61; startPage &＃43; _op.settings.pagesize;
var rowsdata &＃61; "";
for (var row &＃61; startPage; row if (row &＃61;&＃61; json.rows.length) break;
rowsdata &＃43;&＃61; "
";for (var colindex &＃61; 0; colindex if (columns[colindex].field &＃61;&＃61; &＃39;ck&＃39;) rowsdata &＃43;&＃61; &＃39;
&＃39;else rowsdata &＃43;&＃61; &＃39;
&＃39; &＃43; json.rows[row][columns[colindex].field] &＃43; &＃39;&＃39;;}
rowsdata &＃43;&＃61; "
";}
$("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] tbody").empty().append(rowsdata);
$("#currentpageIndex").html(pn);
this.registermousehover();
},
//初始化分页
createTableFoot: function () {
var footHtml &＃61; "
";footHtml &＃43;&＃61; "第1/" &＃43; _op.settings.totalpage &＃43; "页";
footHtml &＃43;&＃61; "首页";
footHtml &＃43;&＃61; "上一页";
footHtml &＃43;&＃61; "下一页";
footHtml &＃43;&＃61; "末页";
footHtml &＃43;&＃61; "跳转";
footHtml &＃43;&＃61; "
";$("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] tfoot").append(footHtml);
$("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] tfoot tr td").attr("colspan", "5");
},
//添加鼠标悬浮事件
registermousehover: function () {
//添加鼠标悬浮事件
$("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] tbody tr").mouseover(function () {
$(this).addClass("mouseover");
}).mouseleave(function () {
$(this).removeClass("mouseover");
});
},
//添加隔行变色事件
registerchangebgcolor: function () {
//添加隔行变色
if (this.settings.isoddcolor) $("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] tr:odd").css("background-color", "#A77C7B").css("color", "#fff");
},
//添加全选全不选事件
registercheckall: function () {
//添加全选全不选事件
$("input[name&＃61;&＃39;chkall&＃39;]").click(function () {
if (this.checked) {
$("input[name&＃61;&＃39;chk&＃39;]").each(function () {
$(this).attr("checked", true);
});
} else {
$("input[name&＃61;&＃39;chk&＃39;]").each(function () {
$(this).attr("checked", false);
});
}
});
},
//添加首页事件
registerFirstPage: function () {
$("#firstPage").click(function(){
_op.settings.pageindex &＃61; 1;
_op.createTableBody( _op.settings.pageindex);
});
},
//添加上一页事件
registerUpPage: function () {
$("table").delegate("#UpPage", "click",
function () {
if ( _op.settings.pageindex &＃61;&＃61; 1) {
alert("已经是第一页了");
return;
}
_op.settings.pageindex &＃61; _op.settings.pageindex - 1;
_op.createTableBody(_op.settings.pageindex);
});
},
//添加下一页事件
registerNextPage: function () {
$("table").delegate("#nextPage", "click",
function () {
if (_op.settings.pageindex &＃61;&＃61; _op.settings.totalpage) {
alert("已经是最后一页了");
return;
}
_op.settings.pageindex &＃61; _op.settings.pageindex &＃43; 1;
_op.createTableBody(_op.settings.pageindex);
});
},
//添加尾页事件
registerlastPage: function () {
$("table").delegate("#lastPage", "click",
function () {
_op.settings.pageindex &＃61; _op.settings.totalpage;
_op.createTableBody( _op.settings.totalpage);
});
},
//添加页数跳转事件
registerSkipPage: function () {
$("table").delegate("#skippage", "click",
function () {
var value &＃61; $("table[id&＃61;&＃39;" &＃43; this._id &＃43; "&＃39;] tfoot tr td input").val();
if (!isNaN(parseInt(value))) {
if (parseInt(value) <&＃61; _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 &＃61; data;
}
});
return result;
}
}
$.fn.grid &＃61; function (options) {
var grid &＃61; new dataGrid(this, options);
return this.each(function () {
grid.init();
});
}
})
html调用
无标题文档$(function(){
$("#dg").grid({
id:"dg",
url:"data.json",
columns: [
{field:&＃39;ck&＃39;,checkbox:true},
{ field: &＃39;ID&＃39;, title: &＃39;编号&＃39;, width:100, align: &＃39;center&＃39;},
{ field: &＃39;name&＃39;, title: &＃39;名称&＃39;, width: 150, align: &＃39;left&＃39; },
{ field: &＃39;descrtion&＃39;, title: &＃39;描述&＃39;, width: 350, align: &＃39;left&＃39; },
{ field: &＃39;Price&＃39;, title: &＃39;价格&＃39;, width: 100, align: &＃39;left&＃39; }
],
isoddcolor:false,
pagination:true,
searchnation:true,
pagesize:5
});
});
本文只是为大家提供了一个框架、思路&＃xff0c;如何将这些知识点串连在一起&＃xff0c;还需要大家认真的学习研究&＃xff0c;动手创建一个属于自己的jquery表格插件。
京公网安备 11010802041100号