jQuery EasyUI datagrid:排序静态数据不起作用

时间:2013-10-14 16:30:02

标签: jquery datagrid jquery-easyui

我有一个非常简单的表使用jQuery EasyUI的最基本功能,它不会为我排序。这是JSFiddle

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css">

    <script src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table class="easyui-datagrid" title="Unallocated Subnets" data-options="singleSelect:true">
        <thead>
            <tr>
                <th data-options="field:'a',width:80,sortable:true">A</th>
                <th data-options="field:'b',width:80,sortable:true">B</th>
                <th data-options="field:'c',width:80,sortable:true">C</th>
                <th data-options="field:'d',width:80,sortable:true">D</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>a</td><td>a</td><td>a</td><td>a</td>
            </tr>
            <tr>
                <td>b</td><td>b</td><td>b</td><td>b</td>
            </tr>
        </tbody>
    </table>
</body>

非常感谢任何帮助。

4 个答案:

答案 0 :(得分:3)

客户端排序所需的只是设置:

remoteSort:false

答案 1 :(得分:0)

我正在查看jquery-easyui上的Sorting示例,看起来它的设计与服务器端(php)数据一起使用。或者从数据库加载到网格中的数据。而不是像你的例子中的硬编码数据。

看看这个例子..并注意它包含的PHP代码。您可以在底部下载示例。

http://www.jeasyui.com/tutorial/datagrid/datagrid8.php

答案 2 :(得分:0)

我正在寻找相同的功能。 您似乎需要根据此帖子定义自己的分拣机 http://www.jeasyui.com/tutorial/datagrid/datagrid14.php

还有一些属性:

  • sortName
  • 中将sortOrder 试一试....

答案 3 :(得分:0)

您可以尝试这样的代码,它的工作

<table class="easyui-datagrid" title="somedata" sortName="a" sortOrder="desc" remoteSort="false">
<thead>
    <tr>
        <th field="a" width="80" sortable="true">A</th>
        <th field="b" width="80">B</th>
        <th field="c" width="80">C</th>
        <th field="d" width="80">D</th>
    </tr>
</thead>

在这里试试http://jsfiddle.net/kapasaja/gyMQr/6/

相关问题