效果图:
Javascript代码:
;(function($){
// 常量定义
var CACHE_GRID = 'sngrid';
// 创建表格
function createTable(target){
var options = $.data(target, CACHE_GRID).options;
var columns = options.columns;
// 创建表头
var thead = target.createTHead().insertRow();
$.each(columns, function(pos, ele){
var cell = thead.appendChild(document.createElement('th'));
$(cell).html(ele.title).attr('field', ele.field);
if(ele.sortable){
$(cell).addClass('sortable');
}
if(ele.sortable && ele.field == options.sortName){
$(cell).addClass($.trim(options.sortOrder).toLowerCase());
}
// 隐藏列
if(ele.hide){
$(cell).css('display', 'none');
}
});
if(options.lineNumber){
thead.insertBefore(document.createElement('th'), thead.firstChild);
}
// 点击表头排序
$(target).on('click', 'th', function(){
// 非排序字段
if(!$(this).hasClass('sortable')){
return;
}
var target = $(this).closest('table')[0];
var options = $.data(target, CACHE_GRID).options;
var sortName = $(this).attr('field');
var sortOrder = $(this).attr('sortOrder');
if(sortName != options.sortName){
options.sortName = sortName;
sortOrder = 'asc';
}else{
sortOrder = sortOrder == 'asc' ? 'desc' : 'asc';
}
$(this).addClass(sortOrder).removeClass(sortOrder == 'asc' ? 'desc' : 'asc');
options.sortOrder = sortOrder;
$(this).attr('sortOrder', sortOrder).siblings().removeAttr('sortOrder').removeClass('asc desc');
$(target).sngrid('reload');
});
// 释放内存
options = null;
columns = null;
}
// 创建grid面板
function createGridPanel(target){
var options = $.data(target, CACHE_GRID).options;
// 创建外部包裹
var grid_panel = $(target).wrap('<div class="ui-sngrid-grid"></div>').closest('div');
var sngrid = grid_panel.wrap('<div class="ui-sngrid"></div>').closest('div.ui-sngrid');
if(options.width && options.width != 'auto'){
sngrid.outerWidth(options.width);
}
if(options.height && options.height != 'auto'){
sngrid.outerHeight(options.height);
}
if(options.fit){
sngrid.outerWidth(sngrid.parent().width());
sngrid.outerHeight(sngrid.parent().height());
}
// 工具栏
if(options.toolbar.length > 0){
var toolbar = sngrid.prepend('<div class="ui-sngrid-toolbar"></div>').children('.ui-sngrid-toolbar');
// 创建工具按钮
$.each(options.toolbar, function(pos, ele) {
if(typeof ele === 'string'){
toolbar.append('<i>|</i>');
return true;
}
var btn = toolbar.append('<a href="javascript:void(0)">' + ele.text + '</a>').children('a:last');
btn.on('click', ele.handler);
});
}
// 表头
if(options.title){
sngrid.prepend('<div class="ui-sngrid-header"><span class="ui-sngrid-header-title">' +
options.title +
'</span></div>');
}
// 分页面板
if(options.pagination){
sngrid.append('<div class="ui-sngrid-pager"><ul></ul></div>')
.find('.ui-sngrid-pager ul').on('click', 'li', function(){
// 非可用分页按钮
if(!$(this).is('[pagenum]')){
return;
}
// 加载数据
options.pageNum = +$(this).attr('pagenum');
$(target).sngrid('reload');
});
}
}
function loadData(target, data){
var options = $.data(target, CACHE_GRID).options;
var columns = options.columns;
var tbody = target.tBodies;
tbody = (tbody == null || tbody.length == 0) ? target.createTBody() : tbody[0];
// 先删掉原有数据
while(tbody.rows && tbody.rows.length > 0){
tbody.deleteRow(0);
}
var pager = $(target).closest('div.ui-sngrid').find('div.ui-sngrid-pager ul');
// 暂无数据
if(!(data.rows && data.rows.length)){
var cell = tbody.insertRow(0).insertCell(0);
cell.colSpan = columns.length;
cell.appendChild(document.createTextNode(options.nodata));
pager.empty().hide();
return;
}else{
pager.show();
}
$.each(data.rows, function(rowPos, ele) {
var row = tbody.insertRow(rowPos);
// 创建每行的单元格
$.each(columns, function(pos, col){
var cell = row.insertCell(pos);
var html = ele[col.field];
if(typeof col.formatter === 'function'){
html = col.formatter.call(cell, ele, ele[col.field], rowPos, pos);
}
$(cell).html(html);
// 添加单元格样式
style(cell, col);
});
if(options.lineNumber){
var lineCell = document.createElement('td');
$(lineCell).addClass('lineNumber');
lineCell.appendChild(document.createTextNode((options.pageNum - 1) * options.pageSize + rowPos + 1));
row.insertBefore(lineCell, row.firstChild);
}
});
// 隔行变色
if(options.striped){
$(target).find('tr:even').addClass('striped');
}
updatePager(target, data.total);
}
function style(cell, colConfig){
cell = $(cell);
// 单元格宽度
if(colConfig.width !== undefined){
cell.width(colConfig.width);
}
// 单元格对齐方式
if(colConfig.align !== undefined){
cell.css('text-align', colConfig.align);
}
// 隐藏列
if(colConfig.hide){
cell.css('display', 'none');
}
}
function updatePager(target, total){
var options = $.data(target, CACHE_GRID).options;
var pagerPanel = $(target).closest('div.ui-sngrid').find('div.ui-sngrid-pager ul').empty();
var pages = Math.ceil(total / options.pageSize);
var pagenum = options.pageNum;
var p = [];
// 加入上一页
if(pagenum > 1){
p.push({
text : '首页',
pagenum : 1
},{
text : '上一页',
pagenum : pagenum - 1
});
}
var from = Math.max(1, pagenum - 5),
to = Math.min(from + 9, pages);
for(var i = from; i <= to; i++){
p.push({
text : i,
pagenum : i
});
}
// 加入下一页
if(pagenum < pages){
p.push({
text : '下一页',
pagenum : pagenum + 1
},{
text : '尾页',
pagenum : pages
});
}
$.each(p, function(pos, ele) {
if(ele.pagenum == options.pageNum){
pagerPanel.append('<li class="current">' + ele.text + '</li>');
}else{
pagerPanel.append('<li pagenum="' + ele.pagenum + '">' + ele.text + '</li>');
}
});
}
$.fn.sngrid = function(options, params){
// 方法调用
if(typeof options === 'string'){
return $.fn.sngrid.methods[options].call(this, params);
}
// Grid初始化
options = options || {};
return this.each(function(){
// 缓存配置项
options = $.extend(true, {
title:'',
url:'',
method : 'get',
params:{},
columns:[], // {field:'', title:'', hide:false, sortable:false, width:'', formatter:function(){}}
data:{}, // {total:0, rows:[{//参考columns}]}
width:'',
height:'',
lineNumber:true,
pagination:true,
pageSize:10,
pageNum:1,
sortName:'',
sortOrder:'',
striped:true,
nodata:'暂无数据',
toolbar:[] // {text:'', handler:function(){}}
}, options);
$.data(this, CACHE_GRID, {
options : options
});
var target = this;
createGridPanel(target);
createTable(target);
if(options.data.rows){
loadData(target, options.data);
}else{
$(target).sngrid('load');
}
});
};
$.fn.sngrid.methods = {
// 加载本地数据
loadData : function(data){
return this.each(function(){
loadData(this, data);
});
},
// 加载远程数据,pagenum重置为1
load : function(params){
return this.each(function(){
var target = this;
var options = $.data(target, CACHE_GRID).options;
options.pageNum = 1;
$.fn.sngrid.methods.reload.call($(target), params);
});
},
// 与加载远程数据类似,但pagenum不变
reload : function(params){
params = params || {};
return this.each(function(){
var target = this;
var options = $.data(target, CACHE_GRID).options;
// 合并查询参数
$.extend(true, options, {params : params});
$.ajax({
url : options.url,
type : options.method,
data: $.extend(options.params, {
pagenum : options.pageNum,
pagesize : options.pageSize,
sort:options.sortName,
order:options.sortOrder
}),
dataType:'json',
success:function(data){
loadData(target, data);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
}
});
});
}
};
})(jQuery);
.ui-sngrid, .ui-sngrid *{
padding: 0;
margin: 0;
font-size: 12px;
line-height: 20px;
}
.ui-sngrid{
background: #fff;
margin:10px auto;
}
.ui-sngrid-header,
.ui-sngrid-toolbar,
.ui-sngrid-pager,
.ui-sngrid-grid table,
.ui-sngrid-grid tr,
.ui-sngrid-grid th,
.ui-sngrid-grid td{
border:1px solid #d9d9d9;
border-collapse: collapse;
border-spacing: 0;
}
.ui-sngrid-header,
.ui-sngrid-toolbar{
border-bottom:none;
}
.ui-sngrid-pager{
border-top:none;
}
.ui-sngrid-header-title{
line-height: 40px;
padding: 0 10px;
font-size: 14px;
color: #666666;
}
.ui-sngrid-grid table{
width: 100%;
}
.ui-sngrid-grid table,
.ui-sngrid-grid tr,
.ui-sngrid-grid th,
.ui-sngrid-grid td{
padding: 0 10px;
}
.ui-sngrid-grid th,
.ui-sngrid-grid td{
height: 40px;
color: #666;
text-align: left;
}
.ui-sngrid-grid td.lineNumber{
width: 20px;
text-align: center;
color: #666;
background-color: #f5f5f5;
padding: 0 2px;
}
.ui-sngrid-grid th{
background-color: #f5f5f5;
font-weight: normal;
position: relative;
text-align: center;
}
.ui-sngrid-grid th.sortable{
cursor: pointer;
}
.ui-sngrid-grid th.sortable:after{
content: '';
display: inline-block;
margin-left: 5px;
width:8px;
height:9px;
background: url(../img/sort_order.png);
}
.ui-sngrid-grid th.asc:after{
background-position: 16px;
}
.ui-sngrid-grid th.desc:after{
background-position: 8px;
}
.ui-sngrid-grid tr.striped{
background-color: #fafafa;
}
.ui-sngrid-toolbar a{
display: inline-block;
height: 100%;
line-height: 30px;
text-decoration: none;
color: #666666;
padding: 0 10px;
}
.ui-sngrid-toolbar a:hover{
background: #F5F5F5;
}
.ui-sngrid-toolbar i{
display: inline-block;
font-style:normal;
color: #999;
}
.ui-sngrid-pager{
text-align: right;
}
.ui-sngrid-pager li{
list-style: none;
display: inline-block;
margin: 10px 5px;
line-height: 20px;
padding: 0px 7px;
border-radius: 3px;
cursor: pointer;
border: 1px solid #c3c3c3;
}
.ui-sngrid-pager li.current{
color: #ff6602;
font-weight: 700;
}
.ui-sngrid-pager li.disabled{
color: #b0b0b0;
}
Html代码:
<table></table>
调用代码:
$(function(){
$('table').sngrid({
title:'数据表格',
url:'/datagrid/index.html',
sortName:'cell5',
sortOrder:'dEsc ',
columns:[{
field:'cell1',
title:'表头1',
},{
field:'cell2',
title:'表头2',
sortable:true,
formatter:function(rowData, data, rowPos, pos){return '<font color=red>' + data + '</font>'},
},{
field:'cell3',
sortable:true,
title:'表头3'
},{
align:'center',
field:'cell4',
sortable:true,
hide:true,
title:'表头4'
},{
field:'cell5',
sortable:true,
title:'表头5'
},{
field:'cell6',
sortable:true,
title:'表头6'
}],
data:{rows:[{
cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
},{
cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
},{
cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
},{
cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
},{
cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
},{
cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
}],total:61},
striped:true,
toolbar:[{
text:'新增',
handler:function(){alert('add')}
},{
text:'修改',
handler:function(){alert('update')}
}, '' ,{
text:'删除',
handler:function(){alert('delete')}
},{
text:'批量删除',
handler:function(){alert('batchdelete')}
}]
});
});