Php 这种情况下的UI设计挑战

屏幕截图模型：

问题：我有一个有53列的表；一年中每周一次，外加一次用户名。它将有10到80行，这取决于每个区域的用户数量

用户需要每周设置一个“标志”，如年假、培训等

我目前有一个表，每个单元格中都有一个选择框。问题是这适用于5行，但一旦我开始获得20多行，浏览器就无法打开页面，因为选择框太多了

无论选择什么样的新选项，都必须能够被查询，这样我就可以将它们保存在我的数据库中

我想要的是一些关于如何更好地解决这个问题的一般想法（即，不是具体的代码）。一旦我有了一个好主意，我就要开始计算准确的编码

到目前为止，我的想法是： -使用当前选择使所有单元格仅为文本，然后在每个用户旁边都有一个“编辑”选项，该选项将其行作为一个可编辑的模式窗口打开 -使所有单元格都有一个“onClick”事件，从而在单击点生成一个下拉列表

---

但是我很想听听其他人可能会如何处理/解决这个问题。

你可能想看看使用日历功能，我肯定有很多Javascript日历。我最近使用DataTables也取得了很多成功。您可以使用DATABATIOS+JEDIDLE创建一个点击来编辑表表示，当单击时，它会给您一个选择框，但只显示文本。

< P>如果对于许多选择框的选项是相同的，那么您可以考虑使用一个DATALATER来对所有这些选项进行比较，这将更具性能。我猜你可以在每页上看到更多。不幸的是，这是一个HTML5特性，因此它不能向后兼容所有浏览器

---

除此之外，如果你的表超过一定数量的列，你可以考虑对其进行分页。或者像tumbr一样，如果向右滚动足够远，更多的列通过ajax加载。您的想法也应该有效。

也许您可以在页面上有一个隐藏的选择框，单击时将其显示在单元格上，并通过向单元格写入数据属性，或者同时执行XHR来处理单击结果

你也可以有一堆隐藏的表单元素，但那会很糟糕

在实现方面，您可以使用附加到表的单个事件处理程序来实现，每个单元格都具有表示名称和星期的数据属性

---

无论如何，这应该是性能良好的，即使它需要额外的20行左右的js。

也许类似的东西可以为您工作：

var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
    td[i].id='cellID_'+i; 
    td[i].onclick=function()
    {
        //make menu appear on this element id
    }
}

var td=document.getElementsByTagName（'td'）；
对于（var i=0；我认为您的想法可能可行，也许添加一个下拉列表而不是选择也可以，因为您不必担心为每个单元格绑定编辑事件和更改事件……考虑一下，这只是实现不同于“onclick”在每个单元格上。你不应该这样做，但是，你应该将事件附加到表中，并使用事件传播和“target”属性来确定如何执行操作。是的-我想过，但是日历太碍事了，所以表看起来更好。谢谢