Плагин для отображения таблицы с данными. FlexiGrid

Таблицу мы будем делать используя jQuery-плагин «FlexiGrid».
Более чем уверен, что опытные программисты уже знакомы с этим плагином, но как показывает опыт, некоторые все же не знают о подобных вещах.

Это собственно аналог всем известного плагина jqGrid для jQuery.

Вот его основные функции описанные создателем:

• Ресайзинг колонок
• Ресайзинг таблицы
• Сортировка данных по заголовкам
• Красивая тема оформления
• Можно конвертировать обычную таблицу
• Использование AJAX — источника данных (XML и JSON)
• Постраничная навигация
• Показ/скрытие колонок
• Панель инструментов
• Поиск
• Доступный API
• Скрытие/показ таблицы
• Динамическое добавление/изменение GUI

По своей сути тоже самое, что и популярный jqGrid, только в другом интерфейсе. Тут уже выбор зависит от того, какой плагин больше глаз радует =) хотя отличия все же есть, но о них можно узнать если использовать какие-либо более сложные функции или нужна более тонкая кастомизация.
Плагин был протестирован в следующих браузерах: IE6/IE7, Firefox 2, Opera 9.x, Safari 3.0



Очень понравилась возможность генерации FlexGrid из обычной HTML-таблицы:
К примеру есть у нас один могильничек одна таблица:

<table class="our_tbl">
    <thead>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>CATEGORY</th>
        <th>DATE</th>
      </tr>
  </thead>
  <tbody>
        <tr>
        <td>This is data 1 with overflowing content</td>
        <td>This is data 2</td>
        <td>This is data 3</td>
        <td>This is data 4</td>
      </tr>
  </tbody>
</table>

* This source code was highlighted with Source Code Highlighter.

Для этого достаточно такого кода:

$('.our_tbl').flexigrid();

* This source code was highlighted with Source Code Highlighter.

Для того, чтобы использовать эту фичу нужно:

• Сам jQuery
• FlexiGrid

Ну а вот вам рабочий пример с реализацией на PHP

PHP-код там довольно тривиальный и далёк от идеала, но общий принцип просматривается.

1. $("#flex1").flexigrid
2.  
3.       (
4.       {
5.       url: 'post2.php',
6.       dataType: 'json',
7.       colModel : [
8.         {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
9.         {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
10.         {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
11.         {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
12.         {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
13.         {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
14.         ],
15.       buttons : [
16.         {name: 'Add', bclass: 'add', onpress : test},
17.         {name: 'Delete', bclass: 'delete', onpress : test},
18.         {separator: true},
19.         {name: 'A', onpress: sortAlpha},
20.         {name: 'B', onpress: sortAlpha},
21.         {name: 'C', onpress: sortAlpha},
22.         {name: 'D', onpress: sortAlpha},
23.         {name: 'E', onpress: sortAlpha},
24.         {name: 'F', onpress: sortAlpha},
25.         {name: 'G', onpress: sortAlpha},
26.         {name: 'H', onpress: sortAlpha},
27.         {name: 'I', onpress: sortAlpha},
28.         {name: 'J', onpress: sortAlpha},
29.         {name: 'K', onpress: sortAlpha},
30.         {name: 'L', onpress: sortAlpha},
31.         {name: 'M', onpress: sortAlpha},
32.         {name: 'N', onpress: sortAlpha},
33.         {name: 'O', onpress: sortAlpha},
34.         {name: 'P', onpress: sortAlpha},
35.         {name: 'Q', onpress: sortAlpha},
36.         {name: 'R', onpress: sortAlpha},
37.         {name: 'S', onpress: sortAlpha},
38.         {name: 'T', onpress: sortAlpha},
39.         {name: 'U', onpress: sortAlpha},
40.         {name: 'V', onpress: sortAlpha},
41.         {name: 'W', onpress: sortAlpha},
42.         {name: 'X', onpress: sortAlpha},
43.         {name: 'Y', onpress: sortAlpha},
44.         {name: 'Z', onpress: sortAlpha},
45.         {name: '#', onpress: sortAlpha}
46.         ],
47.       searchitems : [
48.         {display: 'ISO', name : 'iso'},
49.         {display: 'Name', name : 'name', isdefault: true}
50.         ],
51.       sortname: "id",
52.       sortorder: "asc",
53.       usepager: true,
54.       title: 'Countries',
55.       useRp: true,
56.       rp: 10,
57.       showTableToggleBtn: true,
58.       width: 700,
59.       height: 255
60.       }
61.       ); 
62. });
63.  
64. function sortAlpha(com)
65.       {
66.       jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
67.       jQuery("#flex1").flexReload();
68.       }
69.  
70. function test(com,grid)
71. {
72.   if (com=='Delete')
73.     {
74.       if($('.trSelected',grid).length>0){
75.       if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
76.       var items = $('.trSelected',grid);
77.       var itemlist ='';
78.       for(i=0;i<items.length;i++){
79.         itemlist+= items[i].id.substr(3)+",";
80.       }
81.       $.ajax({
82.         type: "POST",
83.         dataType: "json",
84.         url: "delete.php",
85.         data: "items="+itemlist,
86.         success: function(data){
87.           alert("Query: "+data.query+" - Total affected rows: "+data.total);
88.         $("#flex1").flexReload();
89.         }
90.        });
91.       }
92.       } else {
93.         return false;
94.       }
95.     }
96.   else if (com=='Add')
97.     {
98.       alert('Add New Item Action');
99.     }      
100.  
101. }

* This source code was highlighted with Source Code Highlighter.

и PHP-код:

1. <?php
2. function countRec($fname,$tname,$where) {
3.  
4.   $sql = "SELECT count($fname) FROM $tname $where";
5.  
6.   $result = runSQL($sql);
7.  
8.   while ($row = mysql_fetch_array($result)) {
9.  
10.     return $row[0];
11.  
12.   }
13.  
14. }
15.  
16.  
17. $page = $_POST['page'];
18.  
19. $rp = $_POST['rp'];
20.  
21. $sortname = $_POST['sortname'];
22.  
23. $sortorder = $_POST['sortorder'];
24.  
25.  
26.  
27. if (!$sortname) $sortname = 'name';
28.  
29. if (!$sortorder) $sortorder = 'desc';
30.  
31.     if($_POST['query']!=''){
32.  
33.       $where = "WHERE `".$_POST['qtype']."` LIKE '%".$_POST['query']."%' ";
34.  
35.     } else {
36.  
37.       $where ='';
38.  
39.     }
40.  
41.     if($_POST['letter_pressed']!=''){
42.  
43.       $where = "WHERE `".$_POST['qtype']."` LIKE '".$_POST['letter_pressed']."%' ";  
44.  
45.     }
46.  
47.     if($_POST['letter_pressed']=='#'){
48.  
49.       $where = "WHERE `".$_POST['qtype']."` REGEXP '[[:digit:]]' ";
50.  
51.     }
52.  
53. $sort = "ORDER BY $sortname $sortorder";
54.  
55.  
56.  
57. if (!$page) $page = 1;
58.  
59. if (!$rp) $rp = 10;
60.  
61.  
62.  
63. $start = (($page-1) * $rp);
64.  
65.  
66.  
67. $limit = "LIMIT $start, $rp";
68.  
69.  
70.  
71. $sql = "SELECT id,iso,name,printable_name,iso3,numcode FROM country $where $sort $limit";
72.  
73. $result = runSQL($sql);
74.  
75.  
76.  
77. $total = countRec('iso','country',$where);
78.  
79.  
80.  
81. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
82.  
83. header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
84.  
85. header("Cache-Control: no-cache, must-revalidate" );
86.  
87. header("Pragma: no-cache" );
88.  
89. header("Content-type: text/x-json");
90.  
91.  
92. $json = "";
93.  
94. $json .= "{\n";
95.  
96. $json .= "page: $page,\n";
97.  
98. $json .= "total: $total,\n";
99.  
100. $json .= "rows: [";
101.  
102. $rc = false;
103.  
104. while ($row = mysql_fetch_array($result)) {
105.  
106.   if ($rc) $json .= ",";
107.  
108.   $json .= "\n{";
109.  
110.   $json .= "id:'".$row['id']."',";
111.  
112.   $json .= "cell:['".$row['id']."','".$row['iso']."'";
113.  
114.   $json .= ",'".addslashes($row['name'])."'";
115.  
116.   $json .= ",'".addslashes($row['printable_name'])."'";
117.  
118.   $json .= ",'".addslashes($row['iso3'])."'";
119.  
120.   $json .= ",'".addslashes($row['numcode'])."']";
121.  
122.   $json .= "}";
123.  
124.   $rc = true;
125.  
126. }
127.  
128. $json .= "]\n";
129.  
130. $json .= "}";
131.  
132. echo $json;
133.  
134. ?>

* This source code was highlighted with Source Code Highlighter.

Код взял из примера, сам не переделывал, много что можно переделать, особенно неудобную сборку json-строки. Гораздо удобнее использовать функцию json_encode().

Подобного рода таблицы как правило не очень-то расшияемы, но например страницы админ-панелей делать очень удобно, а главное быстро ;)

PS: Кросспост из моего блога