资源: 优秀插件收集-布局,表格,分页,树形

本文概览了各种用于网页布局与交互设计的热门jQuery插件与工具,包括拖放布局、响应式标签、表格插件、分页、排序等功能,涵盖前端开发、移动开发、游戏开发等多个技术领域,旨在提供一站式解决方案,助开发者提高工作效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[color=red][b]拖放布局:[/b][/color]
[color=red]jQuery拖拽布局插件Portal[/color] [url]http://www.jq22.com/jquery-info364[/url], 一些说明在[url]http://www.jqcool.net/jquery-portalyi.html[/url],IE9以下的就不要用了,看不到效果。
jQuery Protlets: [url]http://sonspring.com/journal/jquery-portlets[/url],详解:[url]http://a151555.iteye.com/blog/1853184[/url]
jQuery 部件布局插件 Gridstack [url]http://troolee.github.io/gridstack.js/[/url]
[color=red]可拖放的布局插件 gridster.js[/color] [url]http://gridster.net/[/url]
gridster.js 这是神话般的拖动和拖放多列网格已经到来。Gridster是一个jQuery插件,允许建立直观的拖动的布局元素跨越多个列。[url]http://gridster.net/[/url], [color=red]Internet Explorer 9+, Firefox, Chrome, Safari and Opera.[/color]
[color=red]shapeshift[/color] [url]http://mcpants.github.io/jquery.shapeshift/[/url]
jQuery拖放插件集合 [url]http://www.jb51.net/article/30069.htm[/url]
[color=red][b]UI Layout[/b][/color] [url]http://layout.jquery-dev.net/demos.cfm[/url],参数说明:[url]http://feiboo.blog.163.com/blog/static/16118349201122984652548/[/url]
freetile.js Freetile是一个jQuery的插件,使该组织的网页内容在一个高效,动态和响应布局。[url]http://yconst.com/web/freetile/[/url]
有用的jQuery布局插件推荐 [url]http://www.zhangjiaojiao.cn/jquery/184.html[/url]
采用jquery ui的sorttable拖动排序插件实现拖动效果 [url]http://www.helloweba.com/view-blog-72.html[/url]
JavaScript 拖放库 Dragula [url]http://www.oschina.net/p/dragula[/url]
[color=red]dad.js[/color] 是一个简单易用的 jQuery 拖放插件,无需 jQuery UI 库支持,兼容 Bootstrap 表格布局。[url]http://konsolestudio.com/dad/[/url]
[color=red]流式布局[/color]
jQuery Nested [url]http://suprb.com/apps/nested/[/url]
Masonry:一款很好用的jquery网页瀑布流布局插件 [url]http://www.open-open.com/lib/view/open1337310504197.html[/url], 问题:[url]http://blog.youkuaiyun.com/wcl1598593/article/details/8190285[/url]


[b][color=red]静态布局[/color][/b]
jLayout不错的布局 [url]http://www.bramstein.com/projects/jlayout/jquery-plugin.html[/url]
网格布局 Mason.js [url]http://masonjs.com/[/url]
6款强大的创建和加强网站布局的jQuery插件[url]http://developer.51cto.com/art/201106/266708.htm[/url]
8个实用的页面布局和用户界面jQuery插件[url]http://blog.ui90.com/eight-practical-jquery-plugin-page-layout-and-user-interface.html[/url]
[color=red]网格布局[/color] [url]http://www.360doc.com/content/13/0322/11/21412_273182608.shtml[/url]
[color=red]MasonJS[/color] – 创建完美的砌体结构网页布局 [url]http://www.cnblogs.com/lhb25/p/create-perfect-grid-elements-with-mason.html[/url]
Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置。Salvattore 根据您指定的列数组织你的 HTML 元素。容器中的每一个项目会一个接一个被放置在列内,只需要简单地添加一个 data-columns 属性。[url]http://www.cnblogs.com/lhb25/p/salvattore-a-css-driven-jquery-masonry.html[/url]
[color=red]动态列和无间隙网格布局Mason.js[/color] [url]http://www.gbtags.com/gb/share/1388.htm[/url]
[color=red]标签插件[/color] TabbedContent [url]http://www.oschina.net/p/tabbedcontent[/url]
jQuery [color=red]响应标签插件[/color] TurboTabs [url]http://www.oschina.net/p/turbotabs[/url]
网格布局 Minigrid 类似门户表格布局 [url]http://henriquea.github.io/minigrid/[/url]


[b][color=darkblue]Grid表格[/color][/b]:
18个最好的 jQuery 表格插件 [url]http://www.oschina.net/news/16973/18-best-jquery-data-table-plugin[/url]
jQuery treetable [url]http://plugins.jquery.com/treetable/[/url], demo: [url]http://ludo.cubicphuse.nl/jquery-treetable/[/url]
[color=red]jqGrid[/color] [url]http://www.trirand.com/blog/jqgrid/jqgrid.html[/url]
jQuery Grid Plugin [url]http://paramquery.com/demos[/url]
columnHover [url]http://p.sohei.org/jquery-plugins/columnhover/[/url]jQuery插件,可以当鼠标悬停时,可以高亮表格中的整个列。
Sigma Grid(纯javascript开发的Ajax数据表格,[color=red]超级强大[/color]) [url]http://www.cnblogs.com/ly5201314/archive/2009/07/21/1528009.html[/url]
[color=red]datatables [/color][url]http://datatables.net/examples/index[/url]
Jquery动态表格插件 AppendGrid [url]http://appendgrid.apphb.com/[/url]
jQuery 的 Grid 插件 jquery.bsgrid [url]http://www.oschina.net/p/jquery-bsgrid[/url]
[color=red]国人写的jquery.bsgrid[/color],还不错 [url]http://git.oschina.net/bs2004/jquery.bsgrid[/url]
jQuery 扩展插件 jQuery Grid Plugin [url]http://www.oschina.net/p/jquery-grid-plugin[/url]
[color=red]jquery表格合并分组[/color]插件 jquery.gridgroup [url]http://www.oschina.net/p/jquery-gridgroup[/url]
PivotTable.js 是 JavaScript Pivo 表格 (又称为 Pivot网格,Pivot 图标,[color=red]交叉表[/color]) 库,在 jQuery/jQueryUI 上带有拖拽功能。可以[color=red]多维展示[/color][url]http://www.open-open.com/lib/view/open1398344224656.html[/url]
jQuery Tabledit 是用于 HTML 列表的[color=red]行内编辑器[/color],且兼容 Bootstrap 。它可以在行内进行编辑,就像一个电子表格,或者是一个可以在编辑模式和视图模式进行转换的按钮。 [url]http://www.oschina.net/p/tabledit[/url]
jQuery [color=red]头条固定插件[/color] Freezeheader [url]http://www.oschina.net/p/freezeheader[/url]
StickySort 插件可以在你的列表中创建有[color=red]粘性的表头[/color] [url]http://www.oschina.net/p/stickysort[/url]
表格布局内可视化 JavaScript 编辑器 Grid Editor [url]https://github.com/Frontwise/grid-editor[/url]
AppendGrid 16.0 发布,jQuery [color=red]动态表格插件[/color] [color=blue]很优秀[/color][url]https://appendgrid.apphb.com/Demo[/url]
[color=red]列高调整插件 jColumn[/color] [url]http://www.oschina.net/p/jcolumn[/url]
管理表插件 KingTable [url]https://github.com/RobertoPrevato/jQuery-KingTable[/url]
AG-Grid是一个[color=red]企业级[/color]的Javascript数据网格。[url]http://www.oschina.net/p/ag-grid[/url], 官方, [url]https://www.ag-grid.com/example.php[/url], 文档里面很多例子
[color=red]响应式表格控件[/color] DLShouWen Grid [url]http://os.dlshouwen.com/grid/doc/i18n/zh-cn/example.html[/url]


[color=red][b]对Grid的独立排序工具[/b][/color]
table sorter ,此插件可以将带有THEAD和TBODY标签的标准HTML表转化成可排序表,而无需刷新页面。Table sorter可以成功地解析多种类型的数据并进行排序。
源码http://tablesorter.com/docs//演示 http://tablesorter.com/docs/#Demo
jQuery Table,这是一个操作简单的jQuery插件,可帮助你将数据创建成可排序的表格。
源码http://codecanyon.net/item/jquery-table/2392027?ref=lvraa/演示http://codecanyon.net/item/jquery-table/full_screen_preview/2392027?ref=lvraa
Beautiful Data,这是个了不起的方法,可以为枯燥的HTML表增加分页和排序功能。此插件也可以用于指定了源文件的CSV和JSON数据。
源码http://codecanyon.net/item/beautiful-data/132137?ref=lvraa/演示http://codecanyon.net/item/beautiful-data/full_screen_preview/132137?ref=lvraa
jQuery columnManager 插件,此插件可以切换表中纵列内容的可见性(折叠和展开它们),并且保存数据直到下次访问。
源码http://p.sohei.org/jquery-plugins/columnmanager//演示http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html


[color=red][b]Excel表格[/b][/color]
Handsontable 类似excel: http://handsontable.com/
7个跟excel相关的插件:7+ JQUERY MICROSOFT EXCEL TYPE PLUGINS
http://www.jquery4u.com/plugins/7-jquery-microsoft-excel-type-plugins/
dhtmlxSpreadsheet http://www.dhtmlx.com/docs/products/dhtmlxSpreadsheet/
jQuery.sheet http://www.visop-dev.com/Project+jQuery.sheet
Table Generator http://www.tablesgenerator.com/


[color=red][b]分页插件[/b][/color]
jQuery实现ul-li自动分页,自动标签功能 [url]http://www.funet8.com/2096.html[/url]
[color=red]jPages[/color] [url]http://blog.youkuaiyun.com/leixiaohua1020/article/details/12650563[/url] 官方[url]http://luis-almeida.github.io/jPages/index.html[/url]
jQuery[color=red]分页插件[/color] JqueryPagination [url]http://mricle.com/JqueryPagination/Demo[/url]
### 如何在 Excel 中制作或使用树形图 要在 Excel 中创建或使用树形图,可以采用多种方法。以下是几种常见的技术及其具体实现方式: #### 方法一:通过手动设置分级显示数据 可以通过调整行缩进和分组的方式,在 Excel 中模拟树形图的效果。这种方法适合用于简单的层次结构展示。 - 首先按照层级关系排列好数据。 - 使用 `Alt` 键配合鼠标拖动来调整每一级的数据缩进程度[^4]。 - 接着利用 Excel 的“分类汇总”功能或者手动对不同级别的数据进行折叠/展开操作。 这种做法的优点在于不需要额外插件支持,并且可以直接编辑原始数据;缺点则是当数据量较大时维护起来较为复杂。 #### 方法二:借助条件格式化生成视觉上的状表示 如果希望得到更直观的图形化表现形式,则可以考虑运用Excel内置图表类型之一——状图(也叫Treemap),或者是依靠自定义形状加连线构建传统意义上的组织架构图样式。 对于前者而言只需要准备好相应的维度字段以及度量值之后便能快速生成一张反映各部分占比情况的地图视图[^2];而后者则可能需要用到SmartArt图形库中的"层次结构"类别下的模板来进行定制设计[^1]. 另外还有一种折衷方案就是应用VBA宏编程或是第三方加载项如Power Query & Power Pivot 来处理更加复杂的多层嵌套逻辑并最终呈现为交互式的仪表板界面供用户查询分析之用. #### 方法三:利用Python脚本自动化生成含图表的工作簿文件 当面临频繁更新的大规模数据集需求场景下, 可以尝试编写一段基于xlsxwriter库的小程序来自动生成带有指定样式的Excel文档连同其中所包含的各种统计报表一起打包导出给相关人员审阅.[^3] 下面给出一个简单例子演示如何向现有电子表格里插入柱状图对象: ```python import xlsxwriter workbook = xlsxwriter.Workbook('chart.xlsx') worksheet = workbook.add_worksheet() data = [[10, 20, 30], ['Category A', 'Category B', 'Category C']] for i in range(len(data)): worksheet.write_column(i, 0, data[i]) chart = workbook.add_chart({'type': 'column'}) chart.add_series({ 'categories': '=Sheet1!$B$1:$B$3', 'values': '=Sheet1!$A$1:$A$3' }) worksheet.insert_chart('D1', chart) workbook.close() ``` 以上代码片段展示了怎样创建一个新的Excel工作薄并将一组基本条目转化为垂直方向堆叠型别的直方图组件附加至特定单元格区域内.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值