将 jqGrid 表单编辑文本区域更改为具有字符计数器答案

【问题标题】：Changing a jqGrid form edit text area to have a character counter将 jqGrid 表单编辑文本区域更改为具有字符计数器
【发布时间】：2013-01-03 06:59:59
【问题描述】：

我正在尝试找到一种良好的“jqGrid 友好”方式来更改表单编辑中的文本区域，以包含一个字符计数器，让用户知道他们可以输入多少。

此示例说明如何使用字符计数器定义文本区域。 Character countdown like on twitter

我想弄清楚的是修改表单编辑以包含此内容的最佳方法。具体来说，我需要插入 span 元素，这样我就可以在编辑表单中的文本区域列之后设置剩余的字符文本。

据我所知，jqGrid API 似乎允许在表单中手动插入新行：

jQuery("#grid_id").jqGrid('editGridRow', "new", properties );

我不清楚控制在何处添加该元素的最佳方式。有什么建议吗？

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

您使用 javascript 的 keyup 来创建函数。然后，您使用 jQuery 破解表单的 id 和类。

功能

function updateCounter() {
  var pVal = document.getElementById(your_id).value
  var pCount = pVal.length;
  document.getElementById("counter").firstChild.data = pCount;
}

使用其 id 定位输入以添加属性

$("#"+your_id ).attr("onkeyup","updateCounter()");

通过定位输入的 td 容器来附加跨度

$("#tr_" + your_id + ".CaptionTD .DataTD").append("<span id='counter'></span>");

【讨论】：

也许我把它弄得太复杂了，但关键是要弄清楚如何在后台构建表单编辑对话框时将添加的代码附加到表单编辑对话框中。您的示例通过在一个简单的 html 正文中显示它来回避该任务，对吗？
没有。我知道我在做什么。这是答案。使用 firebug 或在 chrome 上使用 Ctrl+Shift+C 查看类和 ID 的动态变化。然后，修改您的跨度以添加计数器。这是一个 javascript/jQuery hack。既然jqGrid用的是jquery，那不如用吧。
这段代码实际上花了我1个多小时才解决。我检查了jqgrid的属性。然后，发现这是不可能的。由于您必须修改整个 jqgrid 主代码frmgr。最后发现只需要使用jQuery插入即可。