jquery jqxgrid 自动换行

Question

$('#tGrid').jqxGrid(
    {
        theme: "ui-redmond",
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        showfilterrow: true,
        filterable: true,
        selectionmode: 'multiplecellsextended',
        autorowheight: true,
        columns:
            [{ text: 'Detail', datafield: 'Detail', columntype: 'textbox', sortable: true, filtertype: 'input', width: '45%', cellsrenderer: function (row, column, value, defaultHtml, columnSettings, record)
             {
                        return '<br><div style="word-wrap: break-word;">' + value +'</div><br>';
             }
            }]
    });

我希望详细信息中的整个文本在网格上可见，但它显示如下：

我该如何解决这个问题？

Answer 1

改变

return '<br><div style="word-wrap: break-word;">' + value +'</div><br>';

至

return '<div style="word-wrap: break-word;">' + value +'</div>';

示例：https://jsfiddle.net/ws80yb5m/

html代码：

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <div id="tGrid"></div>
</div>

Javascript代码：

var data = generatedata(100);

for (var i = 0; i < data.length; i++) {
    data[i].Detail = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbb";
}

var source = {
  localdata: data,
  datatype: "array",
  datafields: [
    { name: 'Detail', type: 'string' }
  ],
  updaterow: function (rowid, rowdata) {
       
  }
};

var dataAdapter = new $.jqx.dataAdapter(source);

$('#tGrid').jqxGrid(
    {
        theme: "ui-redmond",
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        showfilterrow: true,
        filterable: true,
        selectionmode: 'multiplecellsextended',
        autorowheight: true,
        columns:
            [{ text: 'Detail', datafield: 'Detail', columntype: 'textbox', sortable: true, filtertype: 'input', width: '45%', cellsrenderer: function (row, column, value, defaultHtml, columnSettings, record)
             {
                        return '<div style="word-wrap: break-word;">' + value +'</div>';
             }
            }]
    });