利用JS应用的Javascript网格插件

信息发布软件

	表格一直是展示数据的最好方式。以微软的Excel为例，我们可以排序、整理、编辑，甚至几次点击轻松过滤数据。这次，我们看一看JavaScript网格插件，利用JS应用，它转换成普通表到“类Excel”布局，并有加载、操作、查看数据的一堆功能。 　　下面列出7个JavaScript网格插件，他们都有不错的功能和漂亮的UI，一定会非常有用。 FlexiGrid 　　Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 EditableGrid 　　EditableGrid是一个JavaScript Library，利用它能够让标准的HTML表格变成可编辑和可排序。这个Library能够让用户自动使用适当的编辑器如textfields、checkbox等来编辑单元格，并内置多各个输入校验器（integer、double、URL、E-mail和Date）。此外EditableGrid还可选集成Open Flash Chart，能够自动将表格中的数据转成图表。 jQGrid 　　jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。它可以被整合用任何服务器端技术，包括PHP, ASP, Java Servlets, JSP, ColdFusion, 以及Perl。 TableSorter 　　Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。 主要的特点包括： 多列排序 支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性 支持第二个隐藏域排序 可扩展外观 程序简小，打包后只有 7.4K DataTables 　　DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点： 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 SlickGrid 　　SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列，调整列宽度，排序，自定义单元格展示格式和编辑器，支持编辑和创建新记录。 Grid from jQuery UI (coming soon) 　　jQuery UI Team 团队正在开发一个可创建富应用、快速的网格Widget，可加强HTML表格的数据链接、排序、排版、过滤、行选择、插入编辑等。

信息发布软件

	分享一个jQuery动态网格布局插件：Masonry 在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下： 在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使用Masonry处理后，间隔变小。 Javascript 首先倒入类库，如下： <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script> 然后，针对元素容器执行masonry，如下： $(function(){   $('#container').masonry({     // options     itemSelector : '.item',     columnWidth : 240   }); }); HTML<div id="container">   <div class="item">...</div>   <div class="item">...</div>   <div class="item">...</div>   ... </div>CSS.item {   width: 220px;   margin: 10px;   float: left; } 如果你加载的元素中有图片的话，那么需要确保Masonry在所有图片都加载完后才执行，需要调用如下代码： var $container = $('#container'); $container.imagesLoaded(function(){   $container.masonry({     itemSelector : '.item',     columnWidth : 240   }); });

信息发布软件

	主要特性 1.只依赖jQuery 2.支持元素的添加和删除 3.文档比较全 4.拥有测试用例，你可以查看你的浏览器的测试结果 5.比较适合开发益智游戏 如何使用 引入类库，包括jQuery和gridster.js： <script src="http://工/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/jquery.gridster.min.js"></script> 然后导入gridstrer的css文件： <link type="text/css" href="css/jquery.gridster.min.css"> HTML内容如下： <div>   <ul>    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>     <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>    <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>    <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>    <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>   </ul>  </div> 注意gridster.js使用HTML5的data属性来定义相关的拖放元素属性，data-row为行号，data-col为列号，data-sizex为X轴元素宽度，datasizey为Y轴元素宽度。 最后调用插件js，代码如下： $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140]}); 这里是通过创建的属性来设定每一个区域的大小及定位,所涉及的属性如下： data-row:数据行，元素所存在的行数。 data-col:数据列，元素所存在的列数。 data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值） data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值） 例：widget_base_dimensions: [150, 150] 那么每个元素块的宽/高分别为150px/150px 注：元素块合并时的宽度并不只是两个元素块之和 即宽度={data-sizex=”2″}=元素块X2+右侧的边距==150*2+4=304px 高度={data-sizey=”1″}=元素块X1==150*1=150px 这里我们只需要设定两个数值，宽高/边距；如 widget_margins: 设置网格之间的外边距；所传的数值是实际像素的2倍，如[2,2]==[4px,4px]=[右边距，下边距]。 widget_base_dimensions: 设置网格的宽高；所传的数值=实际像素，如[150,150]==[150px,150px]=[width,height]。