Question

我有一个html表。有很多列适合，许多列显示图像来表示数据。我一直在使用jeditable来允许用户点击图像并从下拉列表中选择或在文本框中输入文本并更新该字段（然后在返回的内容中呈现相应的图像。（效果很好）

一个问题是某些列的宽度非常小，因此当您单击图像时，您将获得文本框，但是它的方式会变小（因为它受到表格布局的约束）。你没有足够的空间容纳文本框（它只有大约1/8英寸宽），我会在某种程度上像文本框弹出桌面（可能在一个小对话框或其他东西）所以我有更多的宽度允许有人输入更长的文字。

有什么建议吗？

Answer 1

jeditable的cssclass或style设置可以做你想要的 - 如果jeditable创建的表单具有绝对定位，表格将不会扩展。

如果你用css得到的东西还不够，那么创建你自己的任何jquery插件的自定义版本相当容易 - 只需找到创建表单的部分

var form = $('<form />');

并将其设置为生成您需要的任何html。大小和定位调整应该相对简单，但如果您显着修改结构，可能需要更改代码的其他部分，例如通过集成对话框插件。

Answer 2

您可以将实际可编辑的DIV隐藏在列上方的绝对位置，并使标题触发可编辑的

像这样的东西（非工作代码，只是为了说明这个想法而张贴）

<div class="jeditable" id="firstcol">jEditable field</div>
<th><span class="jeditable-activate">Edit me</span></td>

在jQuery中：

$('.jeditable-activate').click(function() {
    $(this).prev().show().click();
});

Answer 3

jEditable具有宽度设置，可以设置为“自动”（默认），“无”或多个像素。所以，如果你做这样的事情：

  $(".click").editable(url, {
      indicator : "<img src='img/indicator.gif'>",
      tooltip   : "Click to edit...",
      width     : 400,
      style  : "inherit"
  });

您可以根据需要调整编辑宽度。这当然会扩展表格，但我不认为这是一个问题。我相信这比弹出一个对话框更受欢迎，因为毕竟这就是编辑就绪的所有内容。

是否可以使用jeditable弹出窗口而不是内联

3 个答案: