2

我尝试使用用于 jQuery 的Flexigrid插件，这对于我被要求做的事情来说似乎是完美的。

现在我正在使用的是一个 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});

但这不起作用。

我怎样才能做到这一点？

4

1 回答 1

0

挖掘后，我发现并使用了一个名为 jquery.tablesorter 的额外 JS 库，您可以在此处找到：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>
于 2013-07-24T08:31:53.320 回答