Jquery开发datagird表格插件
浏览数：65 /
时间：2015年06月09日
半成品源代码：
（基本的都可以用，事件响应没有做，因为我没有啥需要，所以就没有写）
(function($) {
$.fn.datagrid = function(param) {
var table = new Table(param, $(this));
table.init();
return table;
}
})(jQuery);
/*
var field={
text:‘‘,
field:‘‘,
hidden:false,
algin:‘center‘,
width:‘100px‘
};
*/
function Table(param, obj) {
this.params = {
pagination : [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],
title : ‘数据列表‘,
action : ‘‘,
colunms : [],
pageField : ‘page‘,
rowField : ‘row‘,
row:10,
page:1,
total:0,
formParam:{},//表单参数
onLoadComplete : function(data) {},
onClickRow : function(index,row) {},
onDblClickRow : function(index,row) {},
onNextPage : function(target) {
},
onPrevPage : function(target) {
},
onSelectPage : function(target) {
},
onChangePage : function(target) {
}
};
this.getCurrentPage=function(){
return this.params.page;
}
this.getTotalPage=function(total){
var page=0;
if(total%this.params.row==0){
page=total/this.params.row;
}else{
page=parseInt(total/this.params.row)+1;
}
return page;
}
// 处理参数
for ( var item in param) {
this.params[item] = param[item];
}
this.init = function() {
var target=this;
var html = ‘‘;
html += ‘<div class="widget-title"><span class="icon"><i class="icon-th"></i></span><h5>‘ + this.params.title + ‘</h5>‘;
html += ‘</div>‘;
html += ‘<div class="content">‘;
html += ‘<table class="table">‘;
html += ‘<thead>‘;
html += ‘<tr>‘;
// 追加表头
if (this.params.colunms && this.params.colunms.length > 0) {
for ( var i = 0; i < this.params.colunms.length; i++) {
var align=‘ style="‘;
if(this.params.colunms[i].align){
align+=‘text-align:‘+this.params.colunms[i].align+‘;‘;
}
if(this.params.colunms[i].width){
align+=‘width:‘+this.params.colunms[i].width+‘;‘;
}
align+=‘ "‘;
html += ‘<th ‘+align+‘ field="‘ + this.params.colunms[i].field + ‘">‘
+ this.params.colunms[i].text + ‘</th>‘;
}
}
html += ‘</tr>‘;
html += ‘</thead>‘;
html += ‘<tbody class="tb-body">‘;
// 内容
html += ‘</tbody>‘;
html += ‘</table>‘;
html += ‘‘;
html += ‘<div style="padding: 0px 10px;">‘;
html += ‘<div style="float: left;">‘;
html += ‘<span>条数：</span>‘;
html += ‘<select class="select" style="height: 25px;line-height: 25px;width: 60px;">‘;
// 追加页码
if (this.params.pagination && this.params.pagination.length > 0) {
for ( var i = 0; i < this.params.pagination.length; i++) {
if(this.params.pagination[i]==this.params.row){
html += ‘<option selected="selected" value=‘ + this.params.pagination[i] + ‘>‘
+ this.params.pagination[i] + ‘</option>‘;
}else{
html += ‘<option value=‘ + this.params.pagination[i] + ‘>‘
+ this.params.pagination[i] + ‘</option>‘;
}
}
}
html += ‘</select>‘;
html += ‘</div>‘;
html += ‘<div class="pagination" style="float: right;">‘;
html += ‘<div style="float: left;">‘;
html += ‘<input type="text" name="page" style="height: 12px;line-height:12px;width: 30px;text-align: right;margin-top: 5px;" class="current" value="1">/<label><span class="total">0</span></label>页‘;
html +=‘<label style="margin:0px 10px;">总数：<span class="dataTotal">0</span></label>‘;
html += ‘</div>‘;
html += ‘<ul>‘;
html += ‘<li><a href="javascript:;" class="start-page">首页</a></li>‘;
html += ‘<li><a href="javascript:;" class="prev-page">上一页</a></li>‘;
html += ‘<li><a href="javascript:;" class="next-page">下一页</a></li>‘;
html += ‘<li><a href="javascript:;" class="end-page">尾页</a></li>‘;
html += ‘</ul>‘;
html += ‘</div>‘;
html += ‘<div class="clear"></div>‘;
html += ‘</div>‘;
html += ‘</div>‘;
$(obj).html(html);
html = ‘‘;
load(this);
// 注册事件
$(".select").change(function() {
target.onSelectPage($(this));
target.params.row=parseInt($(this).val());
load(target);
});
//首页和末页
$(".start-page").click(function(){
target.params.page=1;
load(target);
});
$(".end-page").click(function(){
target.params.page=target.getTotalPage(target.params.total);
load(target);
});
//上一页和下一页
$(".prev-page").click(function(){
target.params.page-=1;
if(target.params.page<1){
target.params.page=1;
}
load(target);
});
$(".next-page").click(function(){
target.params.page+=1;
var totalPage=target.getTotalPage(target.params.total);
if(target.params.page>totalPage){
target.params.page=totalPage;
}
load(target);
});
$(".current").keyup(function(event){
if(event.keyCode==13){
var page=parseInt($(this).val());
if(page){
if(page<=0){
page=1;
}
var totalPage=target.getTotalPage(target.params.total);
if(page>totalPage){
page=totalPage;
$(this).val(page);
}
target.params.page=page;
load(target);
}else{
alert(‘请输入有效的页码！‘);
}
}
});
}
function load(target) {
var params=target.params;
// 加载初始数据
var html=‘‘;
var formParam=target.params.formParam;
formParam.row=params.row;
formParam.page=params.page;
$.post(params.action, formParam, function(d) {
var json = $.parseJSON(d);
var rows = json.rows;
params.total=json.total;
for ( var i = 0; i < rows.length; i++) {
html += ‘<tr row="‘+i+‘">‘;
// 字段
for ( var item in params.colunms) {
var key = params.colunms[item].field;
var align=params.colunms[item].align;
var formater = params.colunms[item].formater;
var value = rows[i][key];
if (formater) {
// 调用
value = formater(value, i, rows[i]);
}
var alignStr=‘‘;
if(align){
alignStr=‘ style="text-align:‘+align+‘"‘;
}
//判断值
if(typeof value=="undefined"){
value="";
}
html += ‘<td ‘+alignStr+‘>‘ + value + ‘</td>‘;
}
html += ‘</tr>‘;
}
$(".tb-body").html(html);
params.onLoadComplete(json);
//改变页码
var total=target.getTotalPage(parseInt(json.total));
$(".dataTotal").text(json.total);
$(".total").text(total);
$(".current").val(target.getCurrentPage());
if(!json.total||!json||json.total==0){
$(".tb-body").html("<tr><td colspan=‘"+params.colunms.length+"‘ style=‘text-align:center;‘>没有找到数据！</td></tr>");
}
target.onLoadComplete(json);
$(".tb-body tr").click(function(){
var row=$(this).attr("row");
target.params.onClickRow(row,json.rows[row]);
});
$(".tb-body tr").dblclick(function(){
var row=$(this).attr("row");
target.params.onClickRow(row,json.rows[row]);
});
});
//上一页和下一页
html=‘‘;
}
this.reload=function(){
load(this);
}
this.loadData=function(params){
this.params.page=1;
this.params.formParam=params;
load(this);
}
// 加载数据
this.onLoadComplete = function(data) {
}
this.onClickRow = function(target) {
}
this.onNextPage = function(target) {
}
this.onPrevPage = function(target) {
}
this.onSelectPage = function(target) {
}
this.onChangePage = function(target) {
}
}使用实例：
var state={"0":"<span style=‘color: #28B779‘>显示</span>","1":"<span style=‘color:red;‘>隐藏</span>"};
var datagrid={};
$(function(){
datagrid=$(".table-box").datagrid({
title:‘分类列表‘,
action:‘${basePath}/manage/adManageAction.do?method=allData‘,
colunms:[{
text:‘编号‘,
field:‘id‘,
align:‘left‘
},{
text:‘广告类型‘,
field:‘adPositionName‘
},{
text:‘标题‘,
field:‘title‘
},{
text:‘状态‘,
field:‘status‘,
formater:function(value,index,row){
return state[value];
}
},{
text:‘排序号‘,
field:‘orderNum‘
},{
text:‘广告图片‘,
field:‘advImage‘,
formater:function(value,index,row){
return "<img src=‘${basePath}/image?url=/"+value+"&w=200&h=50&s=false‘ style=‘width:200px;‘/>";
}
},{
text:‘广告连接‘,
field:‘link‘,
formater:function(value,index,row){
return "<a href=‘"+value+"‘>打开链接</a>";
}
},{
text:‘开始时间‘,
field:‘beginTime‘,
formater:function(value,index,row){
return value.split(" ")[0];
}
},{
text:‘结束时间‘,
field:‘endTime‘,
formater:function(value,index,row){
return value.split(" ")[0];
}
},{
text:‘添加时间‘,
field:‘createTime‘
},{
text:‘添加人‘,
field:‘nickname‘
},{
text:‘操作‘,
field:‘action‘,
formater:function(value,index,row){
return "<a href=‘javascript:;‘ onclick=‘edit("+row.id+")‘>编辑</a> "+"<a href=‘javascript:;‘ onclick=‘del("+row.id+")‘>删除</a> ";
}
}],
onDblClickRow:function(index,row){
alert(row.link);
}
});
$(".content input[type=‘text‘]").keyup(function(event){
if(event.keyCode==13){
search();
}
});
});
function search(){
var params=$(".content").getParams();
datagrid.loadData(params);
}
function edit(id){
window.location.href="${basePath}/manage/adManageAction.do?method=edit&id="+id;
}
function del(id){
if(confirm("确认删除吗？")){
$.post("${basePath}/manage/adManageAction.do?method=delete",{id:id},function(r){
var json=$.parseJSON(r);
if(json.success){
datagrid.reload();
}else{
alert(json.msg);
}
});
}
}郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
