Таблицу мы будем делать используя jQuery-плагин «FlexiGrid».
Более чем уверен, что опытные программисты уже знакомы с этим плагином, но как показывает опыт, некоторые все же не знают о подобных вещах.
Это собственно аналог всем известного плагина jqGrid для jQuery.
Вот его основные функции описанные создателем:
По своей сути тоже самое, что и популярный jqGrid, только в другом интерфейсе. Тут уже выбор зависит от того, какой плагин больше глаз радует =) хотя отличия все же есть, но о них можно узнать если использовать какие-либо более сложные функции или нужна более тонкая кастомизация.
Плагин был протестирован в следующих браузерах: IE6/IE7, Firefox 2, Opera 9.x, Safari 3.0
![image](http://451f.com.ua/img/2008/07/flexgrid.png)
Очень понравилась возможность генерации FlexGrid из обычной HTML-таблицы:
К примеру есть у насодин могильничек одна таблица:
Для этого достаточно такого кода:
Для того, чтобы использовать эту фичу нужно:
Ну а вот вам рабочий пример с реализацией на PHP
PHP-код там довольно тривиальный и далёк от идеала, но общий принцип просматривается.
и PHP-код:
Код взял из примера, сам не переделывал, много что можно переделать, особенно неудобную сборку json-строки. Гораздо удобнее использовать функцию json_encode().
Подобного рода таблицы как правило не очень-то расшияемы, но например страницы админ-панелей делать очень удобно, а главное быстро ;)
PS: Кросспост из моего блога
Более чем уверен, что опытные программисты уже знакомы с этим плагином, но как показывает опыт, некоторые все же не знают о подобных вещах.
Это собственно аналог всем известного плагина jqGrid для jQuery.
Вот его основные функции описанные создателем:
- Ресайзинг колонок
- Ресайзинг таблицы
- Сортировка данных по заголовкам
- Красивая тема оформления
- Можно конвертировать обычную таблицу
- Использование AJAX — источника данных (XML и JSON)
- Постраничная навигация
- Показ/скрытие колонок
- Панель инструментов
- Поиск
- Доступный API
- Скрытие/показ таблицы
- Динамическое добавление/изменение GUI
По своей сути тоже самое, что и популярный jqGrid, только в другом интерфейсе. Тут уже выбор зависит от того, какой плагин больше глаз радует =) хотя отличия все же есть, но о них можно узнать если использовать какие-либо более сложные функции или нужна более тонкая кастомизация.
Плагин был протестирован в следующих браузерах: IE6/IE7, Firefox 2, Opera 9.x, Safari 3.0
![image](http://451f.com.ua/img/2008/07/flexgrid.png)
Очень понравилась возможность генерации 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.
Для того, чтобы использовать эту фичу нужно:
Ну а вот вам рабочий пример с реализацией на PHP
PHP-код там довольно тривиальный и далёк от идеала, но общий принцип просматривается.
- $("#flex1").flexigrid
-
- (
- {
- url: 'post2.php',
- dataType: 'json',
- colModel : [
- {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
- {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
- {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
- {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
- {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
- {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
- ],
- buttons : [
- {name: 'Add', bclass: 'add', onpress : test},
- {name: 'Delete', bclass: 'delete', onpress : test},
- {separator: true},
- {name: 'A', onpress: sortAlpha},
- {name: 'B', onpress: sortAlpha},
- {name: 'C', onpress: sortAlpha},
- {name: 'D', onpress: sortAlpha},
- {name: 'E', onpress: sortAlpha},
- {name: 'F', onpress: sortAlpha},
- {name: 'G', onpress: sortAlpha},
- {name: 'H', onpress: sortAlpha},
- {name: 'I', onpress: sortAlpha},
- {name: 'J', onpress: sortAlpha},
- {name: 'K', onpress: sortAlpha},
- {name: 'L', onpress: sortAlpha},
- {name: 'M', onpress: sortAlpha},
- {name: 'N', onpress: sortAlpha},
- {name: 'O', onpress: sortAlpha},
- {name: 'P', onpress: sortAlpha},
- {name: 'Q', onpress: sortAlpha},
- {name: 'R', onpress: sortAlpha},
- {name: 'S', onpress: sortAlpha},
- {name: 'T', onpress: sortAlpha},
- {name: 'U', onpress: sortAlpha},
- {name: 'V', onpress: sortAlpha},
- {name: 'W', onpress: sortAlpha},
- {name: 'X', onpress: sortAlpha},
- {name: 'Y', onpress: sortAlpha},
- {name: 'Z', onpress: sortAlpha},
- {name: '#', onpress: sortAlpha}
- ],
- searchitems : [
- {display: 'ISO', name : 'iso'},
- {display: 'Name', name : 'name', isdefault: true}
- ],
- sortname: "id",
- sortorder: "asc",
- usepager: true,
- title: 'Countries',
- useRp: true,
- rp: 10,
- showTableToggleBtn: true,
- width: 700,
- height: 255
- }
- );
- });
-
- function sortAlpha(com)
- {
- jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
- jQuery("#flex1").flexReload();
- }
-
- function test(com,grid)
- {
- if (com=='Delete')
- {
- if($('.trSelected',grid).length>0){
- if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
- var items = $('.trSelected',grid);
- var itemlist ='';
- for(i=0;i<items.length;i++){
- itemlist+= items[i].id.substr(3)+",";
- }
- $.ajax({
- type: "POST",
- dataType: "json",
- url: "delete.php",
- data: "items="+itemlist,
- success: function(data){
- alert("Query: "+data.query+" - Total affected rows: "+data.total);
- $("#flex1").flexReload();
- }
- });
- }
- } else {
- return false;
- }
- }
- else if (com=='Add')
- {
- alert('Add New Item Action');
- }
-
- }
* This source code was highlighted with Source Code Highlighter.
и PHP-код:
- <?php
- function countRec($fname,$tname,$where) {
-
- $sql = "SELECT count($fname) FROM $tname $where";
-
- $result = runSQL($sql);
-
- while ($row = mysql_fetch_array($result)) {
-
- return $row[0];
-
- }
-
- }
-
-
- $page = $_POST['page'];
-
- $rp = $_POST['rp'];
-
- $sortname = $_POST['sortname'];
-
- $sortorder = $_POST['sortorder'];
-
-
-
- if (!$sortname) $sortname = 'name';
-
- if (!$sortorder) $sortorder = 'desc';
-
- if($_POST['query']!=''){
-
- $where = "WHERE `".$_POST['qtype']."` LIKE '%".$_POST['query']."%' ";
-
- } else {
-
- $where ='';
-
- }
-
- if($_POST['letter_pressed']!=''){
-
- $where = "WHERE `".$_POST['qtype']."` LIKE '".$_POST['letter_pressed']."%' ";
-
- }
-
- if($_POST['letter_pressed']=='#'){
-
- $where = "WHERE `".$_POST['qtype']."` REGEXP '[[:digit:]]' ";
-
- }
-
- $sort = "ORDER BY $sortname $sortorder";
-
-
-
- if (!$page) $page = 1;
-
- if (!$rp) $rp = 10;
-
-
-
- $start = (($page-1) * $rp);
-
-
-
- $limit = "LIMIT $start, $rp";
-
-
-
- $sql = "SELECT id,iso,name,printable_name,iso3,numcode FROM country $where $sort $limit";
-
- $result = runSQL($sql);
-
-
-
- $total = countRec('iso','country',$where);
-
-
-
- header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
-
- header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
-
- header("Cache-Control: no-cache, must-revalidate" );
-
- header("Pragma: no-cache" );
-
- header("Content-type: text/x-json");
-
-
- $json = "";
-
- $json .= "{\n";
-
- $json .= "page: $page,\n";
-
- $json .= "total: $total,\n";
-
- $json .= "rows: [";
-
- $rc = false;
-
- while ($row = mysql_fetch_array($result)) {
-
- if ($rc) $json .= ",";
-
- $json .= "\n{";
-
- $json .= "id:'".$row['id']."',";
-
- $json .= "cell:['".$row['id']."','".$row['iso']."'";
-
- $json .= ",'".addslashes($row['name'])."'";
-
- $json .= ",'".addslashes($row['printable_name'])."'";
-
- $json .= ",'".addslashes($row['iso3'])."'";
-
- $json .= ",'".addslashes($row['numcode'])."']";
-
- $json .= "}";
-
- $rc = true;
-
- }
-
- $json .= "]\n";
-
- $json .= "}";
-
- echo $json;
-
- ?>
* This source code was highlighted with Source Code Highlighter.
Код взял из примера, сам не переделывал, много что можно переделать, особенно неудобную сборку json-строки. Гораздо удобнее использовать функцию json_encode().
Подобного рода таблицы как правило не очень-то расшияемы, но например страницы админ-панелей делать очень удобно, а главное быстро ;)
PS: Кросспост из моего блога