0

我正在使用 jQueryEasyUI 数据网格视图：http: //www.jeasyui.com/extension/datagridview.php

在默认格式化程序中，我正在定义我的 textarea，它将成为我的 jHTMLArea：

detailFormatter: function(rowIndex, rowData){
    var x = rowIndex + 1;
    html = '<table>'+
           '    <tr>' +
           '       <td style="border:0">' +
           '           <textarea id="text_'+x+'" cols="125" rows="25">'+rowData.text+'</textarea>' +
           '           <button type="submit" class="btn btn-primary" onclick="save();">Save</button>'+
           '           <button type="submit" class="btn btn-info" onclick="discard();">Discard</button>'+
           '       </td>' +
           '   </tr>'+
           '</table>';
    $('#text_'+ x).htmlarea({
        css: 'style/jHtmlArea.Editor.css',
        toolbar: [
            ["bold", "italic", "underline"],
            ["p", "h3"],
            ["link", "unlink"]
        ]
    });
    $('#text_'+ x).hide();

现在，当我展开行以显示详细信息时，我加载了 jHTMLArea：

onExpandRow: function(rowIndex, rowData) {
    var x = rowIndex + 1;
    window.index = x;
    window.gk_text = rowData.text;
    setHTML(x, rowData.text);
}

和：

function setHTML(rel, text) {
        var html = text;
        html = html.replace(/\[/g, '<').replace(/\]/g, '>');
        $('#text_'+ rel).htmlarea('html', html);
}

这是一个数据示例：

{"totals": 2, 
 "rows": [{ id: 0, prg_code: "ABC", state: "OL", text: "[h3]Important Information[/h3][p]This is a notice.[/p]"},
          { id: 0, prg_code: "DEF", state: "WB", text: "[h3]Important Information[/h3][p]This is a another notice.[/p]"}]
}

如您所见，我将工具栏按钮设置为仅显示：

["bold", "italic", "underline"],
["p", "h3"],
["link", "unlink"]

但是，当我展开该行时，编辑器具有所有默认按钮。

任何想法如何做到这一点并使编辑器100％适合编辑器区域？注意：保存和放弃按钮按预期工作。

哦，另一件事，当与 Bootstrap 结合使用时，Bootstrap .h？类覆盖 jHTMLArea 类并导致工具栏混乱。

还想获得带有选项 OL (val:0)、CR (val:1) 和 WB (val:2) 的类型的选择编辑器

小提琴：http: //jsfiddle.net/Mrbaseball34/qdt8t7jr/

4

1 回答 1

1

您的问题是您正在尝试在尚不存在htmlarea的情况下运行该功能。textarea该detailFormatter函数返回将要呈现的 html，但不会将其添加到 dom。

等待并运行htmlarea函数中的onExpandRow函数，工具栏将正确设置。

    detailFormatter: function(rowIndex, rowData){
        var x = rowIndex + 1;   html = '<table style="width:100%">'+
               '    <tr>' +
            '       <td style="border:0;margin:0;padding:0;width:100%">' +
            '           <textarea id="text_'+x+'" style="width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" rows="25">'+rowData.text+'</textarea>' +
               '           <button type="submit" class="btn btn-primary uppercase" onclick="save();">Save</button>'+
               '           <button type="submit" class="btn btn-info uppercase" onclick="discard();">Discard</button>'+
               '       </td>' +
               '   </tr>'+
               '</table>';
       return html;
    },
    onExpandRow: function(rowIndex, rowData) {
        var x = rowIndex + 1;
        window.index = x;
        window.gk_text = rowData.text;
        html = rowData.text.replace(/\[/g, '<').replace(/\]/g, '>');
        $('#text_'+ x).htmlarea({
            toolbar: [
                ["bold", "italic", "underline"],
                ["p", "h3"],
                ["link", "unlink"]
            ]
        });
        $('#text_'+ x).htmlarea('html', html);
    }

http://jsfiddle.net/qdt8t7jr/10/

于 2015-04-21T21:53:01.677 回答