创建自己的jquery表格插件

前端之家收集整理的这篇文章主要介绍了创建自己的jquery表格插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在模仿easyui的dataGrid表格插件的同时,自己去封装了一个。实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等

由于涉及到ajax访问,所以必须部署到iis上才能看出效果,先给大家看一下效果图:

css样式

SEOver { background-color: #EAF2FF; color: #000; }

JSON文件

自定义特性(如:皮肤风格选择等)部分","descrtion":"描述自定义特性(如:皮肤风格选择等)","Price": 5500 },{ "ID": 3,"name": "具体定义及实现部分","descrtion":"描述具体定义及实现部分","Price": 150 },{ "ID": 4,"name": "对外开放部分","descrtion":"描述对外开放部分","Price": 650 },{ "ID": 5,{ "ID": 6,"name": "匹配所有大于给定索引值的元素","descrtion":"描述匹配所有大于给定索引值的元素",{ "ID": 7,"name": "查找第二第三行,即索引值是1和2,也就是比0大","descrtion":"描述查找第二第三行,即索引值是1和2,也就是比0大",{ "ID": 8,"name": "从 0 开始计数","descrtion":"从 0 开始计数",{ "ID": 9,{ "ID": 10,{ "ID": 11,{ "ID": 12,{ "ID": 13,{ "ID": 14,{ "ID": 15,{ "ID": 16,"Price": 650 } ] }

jquery代码

分页 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("<tr></tr>");
},//循环添加表头
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("");
else $("table[id='" + this._id + "'] thead tr").append("<th width=" + headcols[i].width + " align=" + headcols[i].align + ">" + headcols[i].title + "");
}
},//循环添加
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 += '' + 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 += "1/" + _op.settings.totalpage + "页";
footHtml += "首页";
footHtml += "上一页";
footHtml += "下一页";
footHtml += "末页";
footHtml += "跳转";
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",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",function () {
_op.settings.pageindex = _op.settings.totalpage;
_op.createTableBody( _op.settings.totalpage);
});
},//添加页数跳转事件
registerSkipPage: function () {
$("table").delegate("#skippage",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调用

<Meta charset="utf-8"> 无<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

本文只是为大家提供了一个框架、思路,如何将这些知识点串连在一起,还需要大家认真的学习研究,动手创建一个属于自己的jquery表格插件

猜你在找的jQuery相关文章