Использование плагина Flexigrid для jQuery в таблице HTML, а не в файле XML - PullRequest
Новая
       27

Использование плагина Flexigrid для jQuery в таблице HTML, а не в файле XML

1 голос
/ 06 октября 2010

Я пытаюсь использовать плагин Flexigrid для jQuery, который кажется идеальным для того, что меня просят сделать.

Теперь я работаю с таблицей HTML,и у меня нет возможности изменить это.На приведенном выше сайте есть три примера.Первые два, кажется, применяют Flexgrid к существующим таблицам, что мне и нужно, но у них нет опции сортировки.

Это код, указанный для первой: 

$('.flexme').flexigrid();

с таблицей HTML: 

<table class="flexme">
    <thead>
            <tr>
                <th width="100">Col 1</th>
                <th width="100">Col 2</th>
                <th width="100">Col 3 is a long header name</th>
                <th width="300">Col 4</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>

И я подумал, что мог бы просто добавить следующее: 

{sortable : true}

, заканчиваясь на: 

$('.flexme').flexigrid( {sortable : true});

Ноэто не работает.

Как я могу это сделать?

1 Ответ

0 голосов
/ 24 июля 2013

После копания я нашел и использую дополнительную библиотеку JS с именем: jquery.tablesorter, которую вы можете найти здесь: http://tablesorter.com/

Это работает тогда с flexigrid по прозрачному пути. Я не проверял все возможности, но, похоже, он работает для базовой сортировки.

Вот мой пример кода. Вам нужно будет изменить путь к разным библиотекам 

<html>
<head>
<title>Channels List</title>

<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid.pack.css" />
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="flexigrid/js/flexigrid.pack.js"></script>
<script type="text/javascript" src="tablesorter/jquery.tablesorter.js"></script> 

<script type="text/javascript">
    $(document).ready(function() 
    { 
        $("#MyTable1").tablesorter(); 
    } 
); 
</script>
</head>

<body>

<br><b><u>Channels List</b></u><br>
<table id='MyTable1' class="flexme">
    <thead>
            <tr>
                <th width="100">Col1</th>
                <th width="100">Col2</th>
                <th width="100">Col3</th>
                <th width="300">Col4</th>
            </tr>

    </thead>
    <tbody>
            <tr>
                <td>This is data 1a</td>
                <td>This is data 2a</td>
                <td>This is data 3a</td>
                <td>This is data 4a</td>
            </tr>
            <tr>
                <td>This is data 1b</td>
                <td>This is data 2b</td>
                <td>This is data 3b</td>
                <td>This is data 4b</td>
            </tr>
            <tr>
                <td>This is data 1c</td>
                <td>This is data 2c</td>
                <td>This is data 3c</td>
                <td>This is data 4c</td>
            </tr>
            <tr>
                <td>This is data 1d</td>
                <td>This is data 2d</td>
                <td>This is data 3d</td>
                <td>This is data 4d</td>
            </tr>

    </tbody>
</table>

    <script type="text/javascript">
        $('.flexme').flexigrid({
        title: 'This is a my test',
        height:150,striped:false, 
        }
        );
    </script>

</body>
</html>
...