3

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

一个问题是某些列的宽度非常小，因此当您单击图像时，您会看到文本框，但它会变小（因为它受表格布局的限制）。你没有足够的空间来放置文本框（它只有大约 1/8 英寸宽），我希望文本框在桌子上方弹出（可能在一个小对话框或其他东西中）所以我有更多的宽度来允许某人输入更长的文本。

有什么建议么？

4

3 回答 3

2

jeditable 的 cssclass 或样式设置可以满足您的要求 - 如果 jeditable 创建的表单具有绝对定位，则表格不会被扩展。

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

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

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

于 2010-02-02T02:22:58.057 回答
0

您可以将实际的可编辑 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();
});
于 2010-01-15T18:54:41.097 回答
0

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

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

您可以调整编辑宽度以满足您的需要。这当然会扩大表格，但我不认为这是一个问题。我相信这比弹出对话框更可取，因为毕竟这就是就地编辑的意义所在。

于 2010-02-01T08:39:14.880 回答