JQgrid 的 CustomFormatter 更新 td 的 title 属性而不是添加 html

Question

我在为我的一个单元格创建自定义格式化程序时遇到了一些问题。我正在尝试为特定单元格添加进度条，但似乎 html 代码/ javascript 代码被抛在标题中而不是实际的 body td.

这是自定义格式化程序的代码。

{ name: 'StudyCacheStatus', index: 'StudyCacheStatus', width: 15, align: 'center', formatter: CacheStatusFormatter}],

function CacheStatusFormatter(cellValue, options, rowObject) {
    if (typeof cellValue === 'string') { return cellValue; }
    var cellValueHtml = cellValue.text;
    //obviously we are adding a button
    if (cellValue.buttonText) {
        var buttonHtml = ' <input type="button" value="' + cellValue.buttonText + '" onclick="' + cellValue.buttonCallBack + '"/>';
        cellValueHtml += buttonHtml;
    }
    else if (cellValue.progressBarValue)
    {
        var progressBarHtml = '<div id="progress-bar-' + cellValue.Uid + '>' + cellValue.progressBarValue +'</div>';
        + '<script> $( "#progress-bar-' + cellValue.Uid + '").progressbar({value:' + cellValue.progressBarValue + '});</script>';
        cellValueHtml += progressBarHtml;
    }
    return cellValueHtml;
}

奇怪的是，输入按钮 html 已正确添加到单元格中，即使它们的填充方式相同。

<td role="gridcell" style="text-align:center;" title=" " aria-describedby="list_StudyCacheStatus"> 
     <input type="button" value="Cache on Server" onclick="CacheStudy('12345');">
</td>

然而进度条html最后变成这样

<td role="gridcell" style="text-align:center;" title="<div id='progress-bar-12345>5" aria-describedby="list_StudyCacheStatus"></td>

我认为这可能是由于试图在 customformatter 中将 javascript 函数强制为运行，所以我注释掉了脚本标记，但我得到了相同的结果。我到底做错了什么？感谢您的帮助！

Answer 1

the custom formatter 的目标是提供自定义 HTML 片段 作为字符串 。从自定义格式化程序返回的值将用作 <td> 元素的内容。

我建议您将自定义格式化程序的代码减少到 return <input type="button" value="' + $.jgrid.htmlEncode(cellValue.buttonText) + '"/>'; 或 return <button type="button">' + $.jgrid.htmlEncode(cellValue.buttonText) + '</button>';。要实现 onclick 逻辑，我建议您使用 beforeSelectRow 回调。有关详细信息，请参阅 and this one。如果你想在单元格中显示进度条如果用户点击单元格中的按钮那么你可以在beforeSelectRow回调中隐藏单元格中的按钮，创建并将 <div> 动态地 放在单击的单元格内并调用 .progressbar(...)。您可以考虑完全不将进度放在单元格内，而是使用 position:absolute 作为 div 并将进度条 放置在整个网格 上。有许多实施方案。您可以自己决定哪一个更符合您的要求。我只想强调，不应该将 <script> 放在 <td> 中，也不需要使用和 onclick 属性。

JQgrid 的 CustomFormatter 更新 td 的 title 属性而不是添加 html

CustomFormatter for JQgrid updates title attribute of td instead of adding html

html

javascript

jquery

jqgrid