一直以来都想写一个 DataTables 和其他表格插件对比的文章,告诉大家该如何选取一款表格插件来解决我们实际遇到的问题。今天 终于有这个机会和大家一起谈一谈各个表格插件之间的优劣。
2012年的时候接触到 DataTables,那时的版本还是 1.8
,现在已经 1.10
了,说实话 DataTables 确实是一款比较强大的表格插件, 我对她情有独钟,也在很多情况下推荐别人使用这个表格插件。
不过今天的主角不再是 DataTables 一个了,今天我还要提到 EasyUI DataGrid。说到 EasyUI,大家可能都多多少少知道她, 曾经也是风靡一时的前端解决方案,集成了多个插件,给我们开发者带了福音,开发效率快了不少。
需要注意的是,今天不是要分清楚到底是 DataTables 强大还是 EasyUI DataGrid 厉害,只是告诉大家该怎么去选择一款适合自己的表格插件。 虽然我在标题里面加入了vs
关键字,我不加,你们会点进来看么?哈哈,允许我任性一回。
下面开始正题吧,今天分以下几个部分谈谈两款插件
-
初级入门
拿到一个插件首先要做的就是对着手册做出实例,看到效果,然后开始下一步工作。
我分别按照文档使用了两款插件,用最简单的代码实现一个”功能丰富”的表格
现在有如下的表格:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <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
1 2 3 4 5 6 | <!--样式文件--> <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
1 2 3 | <table id="example" class="display"> …… </table> |
第三步:初始化
1 2 3 4 5 | <script> $(function () { $('#example').DataTable(); }); </script> |
运气不差的话你会看到如下效果:
下面我们看看EasyUI DataGrid怎么把上面的表格变得漂亮和强大
第一步:引入 EasyUI DataGrid 的js和css
1 2 3 4 5 6 7 8 | <!--核心样式文件--> <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和表头配置
1 2 3 4 5 6 7 8 9 10 | <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。