Jquery开发datagird表格插件

最新推荐文章于 2024-09-19 16:28:34 发布

原创最新推荐文章于 2024-09-19 16:28:34 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义Datagrid插件实现方法，包括分页、表格配置及事件处理等功能。通过实例展示了如何使用该插件来创建一个具有动态加载数据、格式化单元格内容和响应键盘输入等功能的数据表格。

半成品源代码：

（基本的都可以用，事件响应没有做，因为我没有啥需要，所以就没有写）

(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);
					}
				});
			}
  	  	}