Question

我终于在我的网络应用程序中达到了这一点，实现简单的要求变得势不可挡。我猜是时候进行一次很好的重构或简单的垃圾和重做。

以下是我需要在桌面上实现的简单要求：

1）使列可排序 2）冻结2个标题行和前3个列

现在让我解释为什么它变得如此复杂。该表不是简单的2维表。前3列是名称，电子邮件和角色，之后有一个未定义的列数，表示每天3种类型的数据。换句话说，用户将定义他想要的天数，每天将由3列表示，我们称之为data1，data2和data3。

不熟练的ASCII表示形式如下：

                         01/01/1970                 01/02/1970                 total
name    email    role    data1    data2    data3    data1    data2    data3    data1    data2    data3 

toto    t@t.com  boss     23      test     54       10       test1    54

这是一个非常差的表示，但这应该让你模糊了输出应该是什么样子。所以我需要在第一行显示日期，但是3列偏移，然后是3个第一个标题被修复的标题，但是下面的列是相同3个标题的重复，每天一个，最后我需要全部数据在正确的地方......

现在我正在使用JSP和来自控制器的自定义数据结构正确显示（没有排序和冻结），我以不同的方式迭代以显示所有元素。

现在你可能已经开始理解我的头痛......有很多东西是定制的，也许不一定以正确/有效的方式完成我将如何添加这些新功能？排序和冻结？

我确实查看了一些jquery数据网格和其他javascript组件，但它们似乎都不够灵活，不允许2行标题，第2行基于第一行分组。

有什么想法吗？

感谢。

Answer 1

这是一个非常自定义的GUI，所以我会使用一个相当本土的解决方案。我将问题分解为几个步骤，让浏览器负责大部分工作（ergo JavaScript）。

首先，您希望对象表示数据。基于这个问题，我建议你有一个三层对象结构：一个代表用户（示例中的每一行）;此对象中的子数组将保存每天的数据;并且数组的每个成员都是一个包含用户选择的单元格的对象。 JSP将负责编写这个数据结构，但JavaScript会从那里获取它。这是构造函数的样子：

function DayOfData(dateString, dataObject) {
    this.date = Date.parse(dateString); //storing a Date is cleaner separation of presentation & data
    this.dataCells = dataObject;
}
function User(name, email, role) {
    this.name = name; //and so on
    this.data = [];
    this.addData = function(date, dataSet) {
        this.data.push( new DayOfData(date, dataObject) );
    }
}

由JSP（或中间层中的任何内容）编写的实例化将如下所示：

var users = [];    //a global to hold it all
users[someId] = new User("foo", "foo@something.org", "boss");
users[someId].addData("1/1/1970", {"label 1": 23, "label 2": "test"} );
//...and so on

请注意存储用户选择显示的数据单元格的JSON对象。在这个匿名对象中，我将视觉标签与值相关联;这比创建另一个子对象更简单，以从一些唯一ID中抽象标签。如果确实有必要，你可以采取额外的步骤，但它是层次结构中的另一个级别，所以我认为最好采用更简单的方法。

（当然，你想要正确命名所有这些...我使用裸全局变量来简化语法。对于一个非常强大的系统，我也使用私有成员。）

我会在显示阶段使用TrimPath（在JSP写出此结构中的数据之后）。只需将users数组传递给一个看起来像这样的模板（在TrimPath处理后，它将被显示代码放在一个表中）：

<tbody>
    {for user in user}
        <tr>
            <td>${user.name}</td> <!-- and so on -->
            {for day in user.data}
                {for datum in day}
                    <td>${datum}</td>
                {/for}
            {/for}
        </tr>
    {for}
</tbody>

您需要对此模式稍作修改才能编写标题行，尽管您可能在服务器端代码中更容易实现，因为它不是GUI的动态部分。要使标签行在表格顶部“冻结”（它将在THEAD元素中），只需使用CSS设置TBODY的高度，然后将overflow-y设置为“滚动”。这应该达到你想要的效果。

要重新排序列，您实际上会根据用户点击的列重新排序用户数组（请参阅Array.sort的说明）。然后，清除TBODY并使用TrimPath重新处理模板。

这听起来很复杂而且很复杂，但事实并非如此。您希望避免更改布局变得困难，因此分离数据和演示文稿是关键。如上所述，仅与数据相关的JavaScript对象与TrimPath（或类似）模板相结合的集合实现了良好的MVC模式，并且通过将其分解为离散步骤使问题更简单。管理可排序的数据表（更不用说水平分组到主要部门的数据） - 如果没有良好的MVC，这几乎是不可能的。

Answer 2

到目前为止，我见过的最好的UI框架是ExtJs。您可以访问：http://extjs.com/deploy/dev/examples/grid/array-grid.html查看他们的网格。它非常易于使用和支持。

对于Web UI大师

2 个答案: