DataTables表格插件和其他表格插件比較之(DataTables VS EasyUI DataGrid)零配置

DataTable中文網 22 October 2016

Tags: 博客 DataTables使用經驗 DataTables VS EasyUI DataGrid


一直以來都想寫一個 DataTables 和其他表格插件對比的文章,告訴大家該如何選取一款表格插件來解決我們實際遇到的問題。今天 終于有這個機會和大家一起談一談各個表格插件之間的優劣。

2012年的時候接觸到 DataTables,那時的版本還是 1.8 ,現在已經 1.10 了,說實話 DataTables 确實是一款比較強大的表格插件, 我對她情有獨鐘,也在很多情況下推薦别人使用這個表格插件。

不過今天的主角不再是 DataTables 一個了,今天我還要提到 EasyUI DataGrid。說到 EasyUI,大家可能都多多少少知道她, 曾經也是風靡一時的前端解決方案,集成了多個插件,給我們開發者帶了福音,開發效率快了不少。

需要注意的是,今天不是要分清楚到底是 DataTables 強大還是 EasyUI DataGrid 厲害,隻是告訴大家該怎麼去選擇一款适合自己的表格插件。 雖然我在标題裡面加入了vs關鍵字,我不加,你們會點進來看麼?哈哈,允許我任性一回。

下面開始正題吧,今天分以下幾個部分談談兩款插件

  1. 初級入門
  2. 感悟和建議
  3. 讨論

  • 初級入門

拿到一個插件首先要做的就是對着手冊做出實例,看到效果,然後開始下一步工作。

我分别按照文檔使用了兩款插件,用最簡單的代碼實現一個”功能豐富”的表格

現在有如下的表格:

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>

運氣不差的話你會看到如下效果:


Code Name Price
001name12323
002name24612
003name34612
004name44612
005name54612
006name64612
007name74612
008name84612
009name94612
010name104612
011name114612

下面我們看看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>

同樣,運氣不差的話你可以看到如下效果:


First Name Last Name Phone
001name12323
002name24612
003name34612
004name44612
005name54612
006name64612
007name74612
008name84612
009name94612
010name104612
011name114612

  • 感悟和建議

從上面的實際情況來看,如果隻用最簡代碼,我們看看他們分别幫我們解決了什麼問題。

DataTables

  • 分頁
  • 排序
  • 過濾
  • 表格信息顯示
  • 表格分頁數量控制
  • 鼠标移動高亮顯示

EasyUI DataGrid

  • 選中效果(多選)
  • 鼠标移動高亮顯示

雖然 EasyUI DataGrid 用最簡配置給我們的效果不是很好,但是不能否定它就不行,在這一次比較中,我覺得各有優點

比如:

  • EasyUI DataGrid 可以無js代碼就初始化表格,隻需要在table上加上相應的屬性即可打開相應的功能,比較符合大部分人的想法,配置什麼有什麼
  • DataTables 零配置即添加了很多實用的功能,比較便捷,适合懶一點的程序員(偷笑)

從本次實際使用情況,我個人不能明确說那個好那個差,也沒辦法給大家意見,什麼時候用DataTables或者EasyUI DataGrid。

  • 讨論

本篇文章是這個系列中的第一篇,做個引子,我會逐步深入,從簡單的的例子到複雜的例子,讓大家看到兩個插件是如何處理我們平時 需要的功能,從而選出适合自己的插件

同時也希望大家能給予支持,對本文有好的建議歡迎在下面留言,或者右下角的按鈕反饋給我,我會認真采納小夥伴的建議,給你們提供高質量的技術文章,幫助大家答惑解疑

參考:

DataGrid基本例子

DataTables入門教程

如果大家也有小技巧和使用經驗,歡迎給我發郵件 thxopen@juhua782283.cn



http://m.juhua782283.cn|http://wap.juhua782283.cn|http://www.juhua782283.cn||http://juhua782283.cn