DataTables表格插件和其他表格插件比较之(DataTables VS EasyUI DataGrid)零配置
来源:互联网 发布:生成对抗网络理解 编辑:程序博客网 时间:2024/05/22 12:56
一直以来都想写一个 DataTables 和其他表格插件对比的文章,告诉大家该如何选取一款表格插件来解决我们实际遇到的问题。今天 终于有这个机会和大家一起谈一谈各个表格插件之间的优劣。
2012年的时候接触到 DataTables,那时的版本还是 1.8
,现在已经 1.10
了,说实话 DataTables 确实是一款比较强大的表格插件, 我对她情有独钟,也在很多情况下推荐别人使用这个表格插件。
不过今天的主角不再是 DataTables 一个了,今天我还要提到 EasyUI DataGrid。说到 EasyUI,大家可能都多多少少知道她, 曾经也是风靡一时的前端解决方案,集成了多个插件,给我们开发者带了福音,开发效率快了不少。
需要注意的是,今天不是要分清楚到底是 DataTables 强大还是 EasyUI DataGrid 厉害,只是告诉大家该怎么去选择一款适合自己的表格插件。 虽然我在标题里面加入了vs
关键字,我不加,你们会点进来看么?哈哈,允许我任性一回。
下面开始正题吧,今天分以下几个部分谈谈两款插件
- 初级入门
- 感悟和建议
- 讨论
初级入门
拿到一个插件首先要做的就是对着手册做出实例,看到效果,然后开始下一步工作。
我分别按照文档使用了两款插件,用最简单的代码实现一个”功能丰富”的表格
现在有如下的表格:
1234567891011121314151617181920212223242526272829303132333435363738394041424344<table> <thead> <tr> <th>Code</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> <tr> <td>003</td><td>name3</td><td>4612</td> </tr> <tr> <td>004</td><td>name4</td><td>4612</td> </tr> <tr> <td>005</td><td>name5</td><td>4612</td> </tr> <tr> <td>006</td><td>name6</td><td>4612</td> </tr> <tr> <td>007</td><td>name7</td><td>4612</td> </tr> <tr> <td>008</td><td>name8</td><td>4612</td> </tr> <tr> <td>009</td><td>name9</td><td>4612</td> </tr> <tr> <td>010</td><td>name10</td><td>4612</td> </tr> <tr> <td>011</td><td>name11</td><td>4612</td> </tr> </tbody> </table>
平时我们在开发的时候经常会有展示数据的功能,一般我们都会选择用table
标签来处理,在配上css想有多漂亮就有多美丽。不过这下我们 的身份是菜鸟,我不懂css,也不太会js,做不出绚丽的表格,也不会处理数据分页,什么都不会。
这时候插件就该发挥这些优势了,先看 DataTables 是怎么把上面的表格变得漂亮和强大
第一步:引入 DataTables 的js和css
123456<!--样式文件--> <link rel="stylesheet" type="text/css" href="plugin/datatables/jquery.dataTables.min.css"> <!--jquery js--> <script src="plugin/datatables/jquery.js"></script> <!--DataTables 核心 js--> <script src="plugin/datatables/jquery.dataTables.min.js"></script>
第二步:给表格加上id
123<table id="example" class="display"> …… </table>
第三步:初始化
12345<script> $(function () { $('#example').DataTable(); }); </script>
运气不差的话你会看到如下效果:
下面我们看看EasyUI DataGrid怎么把上面的表格变得漂亮和强大
第一步:引入 EasyUI DataGrid 的js和css
12345678<!--核心样式文件--> <link rel="stylesheet" type="text/css" href="/assets/easyui/easyui.css"> <!--图标css--> <link rel="stylesheet" type="text/css" href="/assets/easyui/icon.css"> <!--颜色样式--> <link rel="stylesheet" type="text/css" href="/assets/easyui/color.css"> <!--核心js--> <script type="text/javascript" src="/assets/easyui/jquery.easyui.min.js"></script>
第二步:给表格加上class和表头配置
12345678910<table class="easyui-datagrid"> <thead> <tr> <th field="firstname">First Name</th> <th field="lastname" >Last Name</th> <th field="phone">Phone</th> </tr> </thead> ……</table>
同样,运气不差的话你可以看到如下效果:
感悟和建议
从上面的实际情况来看,如果只用最简代码,我们看看他们分别帮我们解决了什么问题。
DataTables:
- 分页
- 排序
- 过滤
- 表格信息显示
- 表格分页数量控制
- 鼠标移动高亮显示
EasyUI DataGrid:
- 选中效果(多选)
- 鼠标移动高亮显示
虽然 EasyUI DataGrid 用最简配置给我们的效果不是很好,但是不能否定它就不行,在这一次比较中,我觉得各有优点
比如:
- EasyUI DataGrid 可以无js代码就初始化表格,只需要在table上加上相应的属性即可打开相应的功能,比较符合大部分人的想法,配置什么有什么
- DataTables 零配置即添加了很多实用的功能,比较便捷,适合懒一点的程序员(偷笑)
从本次实际使用情况,我个人不能明确说那个好那个差,也没办法给大家意见,什么时候用DataTables或者EasyUI DataGrid。
- DataTables表格插件和其他表格插件比较之(DataTables VS EasyUI DataGrid)零配置
- JQuery表格插件之Datatables
- Jquery 表格插件DataTables
- datatables 前端表格插件 初始化表格插件
- jQuery dataTables表格插件入门
- jQuery的表格插件datatables
- 插件介绍: DataTables 表格分页
- 【JQuery,前端】JQuery表格插件介绍:Flexigrid和DataTables
- jquery表格插件datatables应用实例
- jquery表格插件datatables应用实例
- jquery表格插件dataTables的详细使用说明
- Datatables学习笔记--jquery表格插件
- JQuery表格插件datatables用法详解
- JQuery表格插件datatables用法详解
- 【转】 jQuery的表格插件datatables学习总结(一)
- jquery表格插件Datatables的使用学习(一)
- jquery插件之DataTables
- jquery插件之DataTables
- 过滤器及监听器
- 8.终端
- Linux中的用户管理
- 【大数据部落】电信公司churn数据客户流失knn预测分析(一)
- 77&周末总结
- DataTables表格插件和其他表格插件比较之(DataTables VS EasyUI DataGrid)零配置
- 极大似然估计 最大后验概率估计
- 安卓USB开发教程 <四> 安卓 AOA
- 关于 DataTables 本地储存那点事,又爱又恨 (stateSave参数应用)
- linux里如何查看文件大小
- 从 Windows 到 Linux: 艰难迈出第一步
- option stateSaveParams 状态数据保存操作回调函数
- 软件比较
- Java 异常