(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>记录 "); code.push("当前<span class=current>"); code.push(page); code.push("</span>"); code.push("/<span class=pagecount>"); code.push(pagecount); code.push("</span>页 "); code.push("<span class=changepage>"); code.push("<span class=first"); if(page == 1){ code.push(" disabled=disabled"); } code.push(">首页</span> "); code.push("<span class=pre"); if(page == 1){ code.push(" disabled=disabled"); } code.push(">上一页</span> "); code.push("<span class=next"); if(page == pagecount){ code.push(" disabled=disabled"); } code.push(">下一页</span> "); code.push("<span class=last"); if(page == pagecount){ code.push(" disabled=disabled"); } code.push(">尾页</span> "); 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 是一个基于 jQuery 的数据网格插件,用于在网页中展示和操作表格数据。它提供了丰富的功能,如分页、排序、过滤、编辑等,适用于各种数据密集型的Web应用。这个压缩包包含了关于 Sigma Grid 的使用指南和...
UltimateGrid是一款强大的MFC(Microsoft Foundation Class Library)控件,完全使用C++语言编写,专为商业级应用设计。这款控件以其优秀的性能、高度的可定制性和丰富的功能,深受开发者喜爱。与同类产品如GridCtrl...
Ag-Grid是一款强大的数据网格组件,常用于JavaScript和TypeScript项目中,特别是在处理大量数据时,它提供了丰富的功能和优秀的性能。在这个"Ag-Grid Demo2.7z"压缩包中,你将找到一个示例项目,展示了如何在实际...
本篇文章将深入探讨两种流行的JavaScript表格组件——GT-Grid和EXT-Grid,并通过对比分析它们的特点、功能和使用场景,以帮助开发者选择最适合项目需求的组件。 GT-Grid与EXT-Grid都是用于构建高性能、可定制的表格...
网格布局(Grid布局)是CSS3中的一个强大工具,它为网页设计提供了二维的、基于网格的布局系统,使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...
在.NET框架中,`PropertyGrid`控件是一个强大的工具,用于显示和编辑对象的属性。这个控件在设计时和运行时都非常有用,因为它能够自动生成一个用户界面,该界面可以展示任何对象的属性,并允许用户进行交互式编辑。...
在Windows Forms应用程序开发中,`PropertyGrid`控件是一个强大的工具,它允许用户以图形化的方式查看和修改对象的属性。这个控件主要用于提供一种直观的界面,让用户能够配置对象的属性,通常用于设置控件的外观和...
在.NET Framework中,`PropertyGrid`控件是一个非常强大的工具,用于在用户界面中显示对象的属性,并允许用户进行交互式编辑。这个控件广泛应用于各种应用程序的设置或配置界面,因为它可以自动根据对象的属性生成一...
在Delphi编程环境中,开发自定义Grid控件是一项常见的任务,尤其对于那些希望对界面有更高定制需求的开发者来说。Grid控件是用于显示二维数据的常见组件,它提供了直观的方式来展示表格形式的信息。在本篇文章中,...
标题中的“Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_”提到了几个关键元素,分别是“Draw-Grid”,“CATIA 插件”,“catia车线”以及“下载”。这表明我们要讨论的是一个用于CATIA软件的...
在Windows Presentation Foundation(WPF)中,`PropertyGrid`是一个非常有用的控件,它允许开发者以网格的形式展示和编辑对象的属性。这个控件通常用于创建用户友好的配置界面或编辑器,使得用户可以直观地修改对象...
**JsGrid离线版文档详解** JsGrid是一款轻量级的JavaScript数据网格插件,它提供了丰富的功能,用于在Web应用中展示和编辑数据。这个离线版文档包含了所有关于JsGrid的重要信息,使得开发者无需互联网连接也能查阅...
《jQuery网页表格插件PQGrid 2.4.1详解》 在Web开发中,数据展示是不可或缺的一部分,尤其在大数据量、多列信息的场景下,一个强大的表格插件能够极大地提升用户体验。PQGrid就是这样一款优秀的jQuery表格插件,它...
本文将深入探讨五种广泛使用的表格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是一款...
在.NET框架中,`PropertyGrid`控件是一个强大的工具,用于在运行时或设计时展示对象的属性,并允许用户交互式地修改这些属性。它在Windows Forms开发中尤其常见,帮助开发者快速创建用户友好的配置界面。下面我们将...
PropertyGrid控件是.NET框架中一个非常实用的组件,它主要用于在Windows Forms应用程序中展示对象的属性,并允许用户进行交互式编辑。这个控件通常用于创建配置或设置界面,因为它可以自动生成一个可定制的、易于...
.net C# PropertyGrid 显示下拉列表 在本文中,我们将讨论如何在 .NET 中使用 PropertyGrid 控件来显示下拉列表,并实现编辑表的各种属性。我们将通过一个自定义控件 CheckedListBoxUC 来实现这个功能。 Property...
在Windows Presentation Foundation (WPF) 中,`Grid`控件是一种布局管理器,常用于创建二维网格结构,其中可以放置其他UI元素。在处理大量数据时,为了提高可读性,我们经常会在`Grid`中实现隔行换色的效果,就像...
《sigma_grid与gt_grid API 使用手册教程全解析》 在当今的数据分析和处理领域,高效且易用的工具是至关重要的。"sigma_grid" 和 "gt_grid" 是两个备受推崇的库,它们提供了强大的数据网格处理功能。这篇教程将深入...