`

grid

 
阅读更多
(function($){        
	$.fn.Grid = function(method) {
		if (typeof method == 'string') {
			return arguments.callee.methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return arguments.callee.methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist');
        }
    };
	$.fn.Grid.methods = {
		init: function(options) {
			var defaults = {
				title:'Grid',
				columns:[],
				pager:true
			};
			var settings = $.extend({}, defaults, options);
			return this.each(function(){
				$(this).data('options', settings);
				var el = $(this).addClass('grid');
				function ds(url, page, pagesize){
					var param = {page: page, pagesize: pagesize};
					var ds = {total:0, data:[]};
					$.ajax({
						url:url,
						type: 'post',
						cache: false,
						async: false,
						data: param,
						dataType: 'json',
				        success: function(result){
				        	ds = result;
						}
					});
					return ds;
				}
				function header(){
					var code = new Array();
					code.push("<div class='header'><strong>" + settings.title + "</strong><span class=icon-grid></span></div>");
					var toolbar = el.attr('toolbar');
					if(toolbar){
						code.push("<div class='toolbar'></div>");
					}
					code.push("<table class='dataview'>");
					code.push("<thead><tr>");
					if(settings.selector&&(settings.selector == 'm')){
						code.push("<th align=center width=30><input type=checkbox name='checkall' hideFocus></th>");
					}
					else if(settings.selector&&(settings.selector == 's')){
						code.push("<th align=center width=30></th>");
					}
					$(settings.columns).each(function(){
						var h = this.header;
						var w = this.width;
						code.push("<th");
						if(w){
							code.push(" width=" + w);
						}
						code.push(">" + h + "</th>");
						
					});
					code.push("</tr></thead>");
					return code.join('');
				}
				function body(records){
					var code = new Array();
					var span = $('<span>');
					$(records).each(function(){
						var r = this;
						code.push("<tr>");
						if(settings.selector&&(settings.selector == 'm')){
							code.push("<td align=center width=30><input type=checkbox hideFocus></td>");
						}
						else if(settings.selector&&(settings.selector == 's')){
							code.push("<td align=center width=30><input type=radio hideFocus name=ids></td>");
						}
						$(settings.columns).each(function(){
							var f = this.field;
							var align = this.align;
							var v = r[f];
							code.push("<td title='" + v + "'");
							if(align){
								code.push(" align='" + align + "'");
							}
							code.push(">" + span.text(v).html() + "</td>");
						});
						code.push("</tr>");
					});
					span.remove();
					return code.join('');
				}
				function pager(total, page, pagesize){
					var code = new Array();
					var pagecount = Math.ceil(total/pagesize);
					code.push("总共<span class=total>");
					code.push(total);
					code.push("</span>记录&nbsp;&nbsp;");
					code.push("当前<span class=current>");
					code.push(page);
					code.push("</span>");
					code.push("/<span class=pagecount>");
					code.push(pagecount);
					code.push("</span>页&nbsp;&nbsp;");
					code.push("<span class=changepage>");
					code.push("<span class=first");
					if(page == 1){
						code.push(" disabled=disabled");
					}
					code.push(">首页</span>&nbsp;&nbsp;");
					code.push("<span class=pre");
					if(page == 1){
						code.push(" disabled=disabled");
					}
					code.push(">上一页</span>&nbsp;&nbsp;");
					code.push("<span class=next");
					if(page == pagecount){
						code.push(" disabled=disabled");
					}
					code.push(">下一页</span>&nbsp;&nbsp;");
					code.push("<span class=last");
					if(page == pagecount){
						code.push(" disabled=disabled");
					}
					code.push(">尾页</span>&nbsp;&nbsp;");
					code.push("</span>");
					return code.join('');
				}
				el.data('page', 1);
				el.data('pagesize', 10);
				var data = new Array();
				if(settings.url){
					el.data('url', settings.url);
					data = ds(settings.url, 1, 10);
				}else{
					data = settings.data;
				}
				el.data('ds', data);
				el.data('total', data.total);
				var html = new Array();
				html.push(header());
				html.push("<tbody>");
				html.push(body(data.data));
				html.push("</tbody>");
				html.push("</table>");
				if(settings.pager){
					var total = parseInt(el.data('total'));
					html.push("<div class='pagebar'>");
					html.push(pager(total, 1, 10));
					html.push("</div>");
				}
				el.append(html.join(''));
				
				$('table.dataview tr').live('mouseenter', function(){
					$(this).addClass('strips');
				}).live('mouseleave', function(){
					$(this).removeClass('strips');
				});
				$(':checkbox[name=checkall]', el).click(function(){
					$('table.dataview tr :checkbox', el).attr("checked",this.checked);
				});
				
				$('.changepage', el).live('click',function(e){
					$(':checkbox[name=checkall]', el).attr("checked",false);
					var p = 1;
					var page = parseInt(el.data('page'));
					var pagesize = parseInt(el.data('pagesize'));
					var total = parseInt(el.data('total'));
					var url = el.data('url');
					var t = e.target;
					if($(t).is('.first')){
						p = 1;
					}
					if($(t).is('.pre')){
						p = page - 1;
					}
					if($(t).is('.next')){
						p = page + 1;
					}
					if($(t).is('.last')){
						p = Math.ceil(total/pagesize);
					}
					el.data('page', p);
					var dd = ds(url, p, pagesize);
					el.data('ds', dd);
					var pp = parseInt(el.data('page'));
					var ps = parseInt(el.data('pagesize'));
					$('table.dataview tbody',el).empty();
					$('table.dataview tbody',el).append(body(dd.data));
					$('.pagebar',el).empty();
					$('.pagebar',el).append(pager(dd.total, pp, ps));
				});
			});
        },
        reload: function(data){
        	return this.each(function(){
        		var url = $(this).data('options').url;
        		alert(url);
        	});
        },
        getSelected: function(){
        	var ret = [];
        	var rows = null;
        	var grid = $(this);
        	this.each(function(){
        		rows = $('table.dataview tbody :checkbox:checked', this).parent().parent();
        	});
        	rows.each(function() {   
        		var rowIndex = this.rowIndex - 1;   
        		ret.push(grid.data('ds').data[rowIndex]);   
        	});  
        	return ret;
        }
	}; 
})(jQuery);

 

body{
	margin:10px;
	padding:10px;
	font-size:13px;
}
.grid{
	border: 0px solid #d2d2d2;
}

.grid .dataview{
	width:100%;
	height:100%;
	border-collapse:collapse;
	border: 1px solid #d2d2d2;
	table-layout:fixed;
}

.grid .dataview th{
	border: 1px solid #d2d2d2;
	height:24px;
	font-size:13px;
	padding-left:3px;
	background:url(../images/datagrid_header_bg.gif);
}

.grid .dataview tr{
	background:#lightsmock;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

.grid .dataview td{
	border-right:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	height:22px;
	font-size:13px;
	padding-left:3px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	
}

.grid .header{
	border-right: 1px solid #d2d2d2;
	border-top: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	background:#fafafa url(../images/datagrid_title_bg.png);
	height:30px;
	line-height:30px;
	padding-left:5px;
}

.icon-grid{
	background: url(../images/grid.png) no-repeat center;
	width:16px;
	height:16px;
	margin-top:7px;
	float:left;
}

.grid .toolbar{
	border-right: 1px solid #d2d2d2;
	border-top: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	height:28px;
	line-height:28px;
	background:url(../images/datagrid_header_bg.gif);
	padding-left:2px;
}

.grid .pagebar{
	border-right: 1px solid #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	border-left: 1px solid #d2d2d2;
	height:35px;
	line-height:35px;
	padding-left:5px;
	background:#efefef url(../images/datagrid_header_bg.png);
}

.grid .pagebar .first, .pre, .next, .last{
	cursor:pointer;
}

.strips{
	background:#D0E5F5;
}

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    Sigma-Grid.zip_grid_grid jquery_html jquery_jquery grid

    Sigma Grid 是一个基于 jQuery 的数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、过滤、编辑等,适用于各种数据密集型的Web应用。这个压缩包包含了关于 Sigma Grid 的使用指南和...

    UltimateGrid 7.3.zip

    UltimateGrid是一款强大的MFC(Microsoft Foundation Class Library)控件,完全使用C++语言编写,专为商业级应用设计。这款控件以其优秀的性能、高度的可定制性和丰富的功能,深受开发者喜爱。与同类产品如GridCtrl...

    Ag-Grid Demo2.7z

    Ag-Grid是一款强大的数据网格组件,常用于JavaScript和TypeScript项目中,特别是在处理大量数据时,它提供了丰富的功能和优秀的性能。在这个"Ag-Grid Demo2.7z"压缩包中,你将找到一个示例项目,展示了如何在实际...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    本篇文章将深入探讨两种流行的JavaScript表格组件——GT-Grid和EXT-Grid,并通过对比分析它们的特点、功能和使用场景,以帮助开发者选择最适合项目需求的组件。 GT-Grid与EXT-Grid都是用于构建高性能、可定制的表格...

    Grid布局综合Demo案例

    网格布局(Grid布局)是CSS3中的一个强大工具,它为网页设计提供了二维的、基于网格的布局系统,使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...

    propertyGrid 属性处理演示demo

    在.NET框架中,`PropertyGrid`控件是一个强大的工具,用于显示和编辑对象的属性。这个控件在设计时和运行时都非常有用,因为它能够自动生成一个用户界面,该界面可以展示任何对象的属性,并允许用户进行交互式编辑。...

    WinForm PropertyGrid用法

    在Windows Forms应用程序开发中,`PropertyGrid`控件是一个强大的工具,它允许用户以图形化的方式查看和修改对象的属性。这个控件主要用于提供一种直观的界面,让用户能够配置对象的属性,通常用于设置控件的外观和...

    propertygrid显示事件

    在.NET Framework中,`PropertyGrid`控件是一个非常强大的工具,用于在用户界面中显示对象的属性,并允许用户进行交互式编辑。这个控件广泛应用于各种应用程序的设置或配置界面,因为它可以自动根据对象的属性生成一...

    Delphi自定义Grid控件

    在Delphi编程环境中,开发自定义Grid控件是一项常见的任务,尤其对于那些希望对界面有更高定制需求的开发者来说。Grid控件是用于显示二维数据的常见组件,它提供了直观的方式来展示表格形式的信息。在本篇文章中,...

    Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_

    标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...

    WPF PropertyGrid的资料合集

    在Windows Presentation Foundation(WPF)中,`PropertyGrid`是一个非常有用的控件,它允许开发者以网格的形式展示和编辑对象的属性。这个控件通常用于创建用户友好的配置界面或编辑器,使得用户可以直观地修改对象...

    JsGrid官网离线版/离线文档

    **JsGrid离线版文档详解** JsGrid是一款轻量级的JavaScript数据网格插件,它提供了丰富的功能,用于在Web应用中展示和编辑数据。这个离线版文档包含了所有关于JsGrid的重要信息,使得开发者无需互联网连接也能查阅...

    jquery网页表格插件pqgrid-2.4.1.zip

    《jQuery网页表格插件PQGrid 2.4.1详解》 在Web开发中,数据展示是不可或缺的一部分,尤其在大数据量、多列信息的场景下,一个强大的表格插件能够极大地提升用户体验。PQGrid就是这样一款优秀的jQuery表格插件,它...

    5种最流行好用的表格grid控件

    本文将深入探讨五种广泛使用的表格grid控件,分别是Telerik Kendo UI Grid、jQuery Grid(jqGrid)、Guriddo jqGrid、jqGrid 4.4.3以及Grid JS 2.0.5。 1. **Telerik Kendo UI Grid** Telerik Kendo UI Grid是一款...

    PropertyGrid的三种使用方法

    在.NET框架中,`PropertyGrid`控件是一个强大的工具,用于在运行时或设计时展示对象的属性,并允许用户交互式地修改这些属性。它在Windows Forms开发中尤其常见,帮助开发者快速创建用户友好的配置界面。下面我们将...

    PropertyGrid控件使用教程

    PropertyGrid控件是.NET框架中一个非常实用的组件,它主要用于在Windows Forms应用程序中展示对象的属性,并允许用户进行交互式编辑。这个控件通常用于创建配置或设置界面,因为它可以自动生成一个可定制的、易于...

    .net C# PropertyGrid 显示下拉列表

    .net C# PropertyGrid 显示下拉列表 在本文中,我们将讨论如何在 .NET 中使用 PropertyGrid 控件来显示下拉列表,并实现编辑表的各种属性。我们将通过一个自定义控件 CheckedListBoxUC 来实现这个功能。 Property...

    WPF Grid 隔行换色

    在Windows Presentation Foundation (WPF) 中,`Grid`控件是一种布局管理器,常用于创建二维网格结构,其中可以放置其他UI元素。在处理大量数据时,为了提高可读性,我们经常会在`Grid`中实现隔行换色的效果,就像...

    sigma_grid api使用手册 教程示例

    《sigma_grid与gt_grid API 使用手册教程全解析》 在当今的数据分析和处理领域,高效且易用的工具是至关重要的。"sigma_grid" 和 "gt_grid" 是两个备受推崇的库,它们提供了强大的数据网格处理功能。这篇教程将深入...

Global site tag (gtag.js) - Google Analytics