Question

屏幕截图样机： http://tinypic.com/r/y2qex/5

问题：我的表有53列;一年中每周一个，加上一个用户名。它将具有10到80行之间的任何位置，具体取决于每个区域的用户数。

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

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

无论选择哪种新选项都必须能够被查询，因此我可以将它们保存在我的数据库中。

我所追求的是关于如何更好地解决这个问题的一些通用想法（即非特定代码）。一旦我得到了一个好主意，我就会完成编码。

到目前为止我的想法： - 使用当前选择使所有单元格仅显示文本，然后在每个用户旁边都有一个“编辑”选项，将其行打开为可以编辑的模态窗口 - 使所有单元格都有“onClick”事件，从而导致在单击

时生成下拉列表

但我很想知道其他人如何处理/解决这个问题？

Answer 1

你可能想看看使用日历功能，我确定那里有大量的Javascript日历。最近我使用DataTables也获得了很多成功。您可以使用DataTables + jEditable创建单击以编辑表格表示，单击该表格时会显示一个选择框，但只显示文本。

Answer 2

如果许多选择框的选项相同，你可以考虑为所有选项使用一个数据列表，这样会更高效，我猜你可以让每页更多。不幸的是，这是一个HTML 5功能，因此它不会向后兼容所有浏览器。

http://www.w3schools.com/html5/tag_datalist.asp

除此之外，如果超过一定数量的列，您可以考虑对表进行页面调度。或者做一个简单的事情，如果他们向右滚动到更远的列，更多的列通过ajax加载。你的想法也应该有用。

Answer 3

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

你也可能只有一堆隐藏的表单元素，但这很糟糕。

实现方面，您可以使用附加到表的单个事件处理程序来执行此操作，每个单元格都具有表示名称和周的数据属性。

无论如何，这应该是高效的，即使它需要额外的20行js。

Answer 4

也许这样的事情对你有用：

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
    }
}

UI设计挑战这种情况

4 个答案: