信息发布软件,b2b软件,广告发布软件

标题: 利用JS应用的Javascript网格插件 [打印本页]
作者: 信息发布软件    时间: 2016-10-7 09:53
标题: 利用JS应用的Javascript网格插件

表格一直是展示数据的最好方式。以微软的Excel为例，我们可以排序、整理、编辑，甚至几次点击轻松过滤数据。这次，我们看一看JavaScript网格插件，利用JS应用，它转换成普通表到“类Excel”布局，并有加载、操作、查看数据的一堆功能。

　　下面列出7个JavaScript网格插件，他们都有不错的功能和漂亮的UI，一定会非常有用。

FlexiGrid

利用JS应用的Javascript网格插件 b2b软件

　　Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

EditableGrid

利用JS应用的Javascript网格插件 b2b软件

　　EditableGrid是一个JavaScript Library，利用它能够让标准的HTML表格变成可编辑和可排序。这个Library能够让用户自动使用适当的编辑器如textfields、checkbox等来编辑单元格，并内置多各个输入校验器（integer、double、URL、E-mail和Date）。此外EditableGrid还可选集成Open Flash Chart，能够自动将表格中的数据转成图表。

jQGrid

利用JS应用的Javascript网格插件 b2b软件

　　jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。它可以被整合用任何服务器端技术，包括PHP, ASP, Java Servlets, JSP, ColdFusion, 以及Perl。

TableSorter

利用JS应用的Javascript网格插件 b2b软件

　　Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件，无需再次刷新页面，支持多种单元格数据类型，例如数值、字符串、日期和自定义排序。

主要的特点包括：

多列排序 支持文本、URL地址、数值、IP地址、日期类型，以及自定义类型排序 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性 支持第二个隐藏域排序 可扩展外观 程序简小，打包后只有 7.4K

DataTables

利用JS应用的Javascript网格插件 b2b软件

　　DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的

SlickGrid

利用JS应用的Javascript网格插件 b2b软件

　　SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列，调整列宽度，排序，自定义单元格展示格式和编辑器，支持编辑和创建新记录。

Grid from jQuery UI (coming soon)

利用JS应用的Javascript网格插件 b2b软件

　　jQuery UI Team 团队正在开发一个可创建富应用、快速的网格Widget，可加强HTML表格的数据链接、排序、排版、过滤、行选择、插入编辑等。


作者: 信息发布软件    时间: 2016-10-7 09:54
分享一个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
  });
});

作者: 信息发布软件    时间: 2016-10-7 09:59
主要特性
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内容如下：
利用JS应用的Javascript网格插件 b2b软件
<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> 利用JS应用的Javascript网格插件 b2b软件

注意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]。





欢迎光临 信息发布软件,b2b软件,广告发布软件 (http://www.postbbs.com/) Powered by Discuz! X3.2