Grid：实用的网格/表格(Grid/Table)控件

最新推荐文章于 2023-05-28 21:05:22 发布
最新推荐文章于 2023-05-28 21:05:22 发布
阅读量5.6k 收藏 2
点赞数
分类专栏： web(asp.net) 文章标签： 网格 jquery插件 mootools jquery javascript datatables
 Flexigrid 
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

Flexigrid

 jQuery  

 SortableTable 
基于Mootools开发，具有排序与过滤功能的Table。

SortableTable

 Mootools  

 dhtmlxGrid  
dhtmlxGrid是一个Ajax-enabled JavaScript Grid。支持多种数据源包括：XML，JSON，CSV，JS数组和HTML表格。提供的功能有： 列宽大小调整，排序，拖动列，过滤，搜索，分组，分页等。
dhtmlxGrid

dhtmlxGrid

 

 Ingrid 
这个jQuery DataGrid提供的功能有：可以拖动调整列宽，分页，排序，设置行/列样式等。

Ingrid

 jQuery  

 Yahoo! UI Library: DataTable 
该DataTable控件提供的功能有：排序、列宽调整、分页、inline editing、row selection等。

Yahoo! UI Library: DataTable

 YUI  

 Table widget 
这个控件能够将正常的HTML Table转成可排序，固定表头的Table。

Table widget

 Widgets  

 GT-Grid 
GT-Grid 一个功能丰富,简单易用的列表组件. 它可能不是最好的,但也许是你最需要的。

GT-Grid

 

 jQuery Grid 
jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能，添加、编辑、删除和搜索表中记录，支持多种数据类型输入：XML，JSON，Array等，多行选择，支持子表格，集成日期选择控件等等。 Demo

jQuery Grid

 jQuery  

 JQuery.Resizer 
一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。

JQuery.Resizer

 jQuery  

 tablesorter 
tablesorter这个jQuery插件能够将带THEAD与TBODY标签的标准HTML Table转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序，支持二级隐藏排序，支持多种浏览器：IE6.0+、FF2+、Safari2.0+、Opera9.0+。

tablesorter

 jQuery  

 

 

 

 JavaScript Table Sorter 
这是一个能够将标准Table转换成可排序 Grid的JavaScript程序。它能够自动识别每列的数据类型，指定需要排序的列。

JavaScript Table Sorter

 

 JxLib 
JxLib是一个基于Mootools开发的Web UI库。类似于jQuery UI、Ext JS或Dijit。拥有丰富文档和示例。提供的主要UI控件包括：
 DataTables 
DataTables是一个jQuery插件，能够让html表格很方便地实现分页、过滤和多栏排序等功能。DataTables可以使用本身自带的CSS样式，但还可以按自己的需要自定义CSS样式。它具有以下特征：
  • 自适应列宽
  • 可保存表格状态
  • 可隐含列
  • 动态创建表格
  • Ajax自动装载数据
  • 丰富的分页类型
  • 多栏排序和高亮显示

    DataTables

     jQuery  

 TinyTable 
这个表格控件提供的功能包括：排序，分页，列或行加亮显示，自动识别数据类型，格式化日期和链接。

TinyTable

 

 Sigma Grid 
Sigma Grid是一个采用纯javascript开发的Ajax数据表格。特性包括：
1.基于CSS控制外观，内置Classic、Vista、Mac、XP四种风格。
2.提供单元格直接编辑功能，可以自定义编辑器，为单元格设置数学计算公式，自定义单元格表现方式。
3.提供灵活的表头控制功能比如：锁定表头，排序，拖动调整列宽。
4.支持分页，数据过滤，根据数据生成柱状图，饼状图，曲线图。
5.支持从多种数据源加载数据： JSON、XML、CSV等。
6.支持多种浏览器：IE6.0+/FireFox2.0+/Safari3.0+/Opera9.0+。

Sigma Grid

 

 JQuery.Spreadsheet UI 
这是一个采用jQuery开发的Web电子表格。经测试支持的浏览器包括：Firefox2/3、 IE7/8、Epiphony2、Opera9、Safari3。

JQuery.Spreadsheet UI

 jQuery  

 KeyTable 
KeyTable是一个轻量级jQuery插件(约5kb左右)，用于为任意html表格添加键盘导航选择支持。该插件提供一种类似于Excel的导航选择方式和单击单元格可以编辑功能。此外KeyTable还可以与 DataTables结合使用。

KeyTable

 jQuery  

 OmniGrid 
OmniGrid是一个采用Mootools1.2开发的表格控件与 FlexGrid jQuery和 SortableTable相似。具有分页，排序，Ajax数据加载，添加/修改/删除表格数据功能等。

OmniGrid

 Mootools  

 moodgets Grid 
moodgets Grid是一个基于Mootools框架开发，易于使用，可扩展的表格控件。拖动调整表格列宽，排序，多行或单行选择，单击表格单元格可编辑，分页，通过Ajax加载数据。
moodgets.jpg

moodgets Grid

 Mootools  

 JQTreeTable 
JQTreeTable这个jQuery插件能够将普通的HTML表格转换成带有嵌有Tree控件的表格。
JQTreeTable.jpg

JQTreeTable

 jQuery Tree  


 

 MyTableGrid 
MyTableGrid是一个基于是Prototype框架开发的DataGrid控件，用于以一种更易于浏览和更灵活的方式来展示数据。它提供Ajax支持的快速分页和数据排序功能，可以拖动调整数据列宽度，隐藏不需要显示的列。
MyTableGrid.jpg

MyTableGrid

 Prototype Script.aculo.us  

 Drag and drop table content with JavaScript 
利用这个JavaScript Lib只需少量代码就能够实现表格内容的拖曳。可以将单元格中的内容拖至其它单元格或其它表格中。
Drag_drop_table.jpg

Drag and drop table content with JavaScript

 

 jExpand 
jExpand是一个可以让表格具备可伸缩功能的jQuery插件。利用这个功能可以帮助你更好地组织表格，让表格承载更多的消息比如图片，列表，图表和其它元素。
jExpand.jpg

jExpand

 jQuery  

 jQuery Fixed Table Header Plugin 
这是一个可以固定表头的jQuery插件。当表格向下滚动时，表头不会跟着动。
Header-Plugin.jpg

jQuery Fixed Table Header Plugin

 jQuery  

 TableGear 
TableGear是一个MooTools插件用于为标准Html Table添加扩展功能包括：可以对表格中的数据进行排序，分页。通过Ajax删除，添加，修改数据。为行/列添加样式。该插件还支持通过键盘移动当前选中的单元格。
TableGear.jpg

TableGear

 Mootools  

 Chromatable JQuery Plugin 
利用jQuery创建一个表头固定的简单HTML表格。在滚动条向下滚动时，表头不变化。
Chromatable.jpg

Chromatable JQuery Plugin

 jQuery  

 DHX Quick Tables 
这个PHP脚本提供一个向导用于根据数据库中的表格快速生成基于 DhtmlxGrid的前台展示界面。
DHX-Quick-Tables.jpg
DHX-Quick-Tables1.jpg
DHX-Quick-Tables2.jpg

DHX Quick Tables

 Php  

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

SlickGrid

 jQuery  

Lijinlin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jqGrid：jQuery网格插件
02-02
jqGrid jQuery网格插件jqGrid是启用AjaxJavaScript控件，它提供用于表示和处理Web上表格数据的解决方案。 由于网格是客户端解决方案，可以通过Ajax回调动态加载数据，因此可以将其与任何服务器端技术集成，包括PHP，...
grid+table列合并（体现一对多关系）
xieedeni的博客
04-27 3509
结果如下图:table列合并,前4列合并。JS代码如下：/** *tbl:table对应的dom元素 *beginRow:从第几行开始合并（从0开始） *endRow:合并到哪一行，负数表示从底下数几行不合并 (为0时，则到table最后一行) *colIdxes:合并的列下标的数组，如[0,1]表示合并前两列，[0]表示只合并第一列 * by whb 20180427 **/ function...
实战wxPython：043 - 高级控件之表格Grid
最新发布
seniorwizard的专栏
05-28 2389
wx.grid.Grid及其相关类用于显示和编辑表格数据。它们提供了一组丰富的功能，用于显示、编辑和与各种数据源交互。 wx.grid.Grid是一个功能强大的但是又稍微有一些复杂的窗口类,它用来显示表格类型的数据。可以使用wx.Grid来作为一个包含名称和值两栏的属性编辑器。或者是通过代码使其作为一个一般意义上的表格,用来显示一个数据库或者是应用程序产生的特定统计数据。
Grid实现table表格布局
weixin_30371469的博客
07-02 2604
HTML　　　　　　<div class="table"> <div class="th"> <div>日期</div> <div>时间</div> <div>主题</...
Css练习---Grid Table
diansunyu4787的博客
04-23 286
table header渐变色 table row交替色 large table宽度770px，small table宽度400px 定义表格css,保存为GridTable.css .largetable/**//*largetable*/ {}{ width:770px; clear:both; ove...
一个典型的GridTableBase样例
lshgly的博客
09-24 483
一个典型的 GridTableBase 样例。
react-datasheet：React的类似于Excel的数据网格（表）组件
02-03
React数据表一个简单的react组件来创建电子表格。 演示在这里： : 示例位于 当前功能： 选择单元格，剪切，复制和粘贴单元格使用键盘按键导航使用键盘键删除onCellsChanged，valueRenderer（可见数据）的回调...
SlickGrid-master
01-18
SlickGrid是一个简单的、快速、灵活的表格控件。可以隐藏/显示列，调整列宽度，排序，自定义单元格展示格式和编辑器，支持编辑和创建新记录。
TreeGrid DHTML的表格控件
04-19
TreeGrid是一个DHTML的表格控件，它完全使用JavaScript语言编写，用以实现HTML页面上的table, grid, tree view 或者 grid with tree里的数据地展示和编辑。EJS TreeGrid还提供了强大的甘特图功能，能够满足您把项目...
TreeGrid试用版:一款功能强大的纯JavaScript树型表格控件，完全的跨平台和跨浏览器
07-17
TreeGrid是一个DHTML树形表格控件，它完全使用JavaScript语言编写，用以实现HTML页面上的table, grid, tree view 或者 grid with tree里的数据地展示和编辑。EJS TreeGrid还提供了强大的甘特图功能，能够满足您把...
自定义GridTable(可以用来研究自定义控件的实现)
10-24
自定义GridTable(可以用来研究自定义控件的实现)
grid table固定表头
xieedeni的博客
01-31 1087
用于固定grid的表头，竖向滚动条，如图：   var str = '&lt;style&gt;.wrapper{width:960px;margin:20px auto}.clear{clear:both}.gridView{width:100%;clear:both;margin:10px 0;border:medium none!important;border-co...
echarts的grid——图表的位置配置
热门推荐
杜永康的博客
12-24 1万+
数学里的笛卡尔坐标系分为直角坐标系 和斜坐标系。而grid只适用于直角坐标系！ grid: { show: true, //是否显示图表背景网格 left: '0%', //图表距离容器左侧多少距离 right: '40%', //图表距离容器右侧侧多少
好看的table-css样式
qq_45450789的博客
04-13 5485
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
grid 制作表格
Yuoliku的博客
07-08 1539
使用grid制作一个简单表格 思考的问题 1.如何实现行列根据数据动态变化【先行后列】 2.如何实现标题行 开始实现 初始数据 data:[{name:'张三',age:'24',height:'1.78'},{name:'李四',age:'20',height:'1.78'},{name:'王五',age:'21',height:'1.74'}], label:['姓名','年龄','身高'] ---------------------
Grid布局详细教程-转载
yuanhongkun的博客
05-08 1472
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
ExtJS学习(三)Grid表格
chenyan6557的博客
05-05 244
表格说明 Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格...
html5动态grid 表格,[CSS]Grid表格总结
weixin_39944638的博客
06-09 611
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？Css网格平常用到的时候还是蛮多的，并且十分的灵活的，但是我不太熟悉它的使用，而且总是忘记，所以在此稍微的记一下。一、对网格容器进行设置1.将HTML元素化为网格容器display: grid;你还可以将网格中的单元格也化成网格容器，形成网格中的网格。2.在网格中添加行或列grid-template-columns: 5...
CSS Grid表格布局 基础知识
不凡乃大的博客
12-10 389
CSS Grid表格布局 基础知识
python 表格控件
05-19
3. wxPython 中的 wx.grid.Grid：wxPython 是一个跨平台的 GUI 库，其中的 wx.grid.Grid 控件可以用来显示数据表格。该控件需要安装 wxPython 模块。 以上三种控件都提供了丰富的功能，可以根据不同的需求选择使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值