可以使用 html 标签更改 jqgrid 行布局吗?
Changing a jqgrid row layout with html tags possible?
我在我的 Web 应用程序中使用 jqgrid 响应式 bootstrap 版本,没有任何问题。
是否可以将 jqgrid 中的一行格式化为具有 2 行的 html table。
例如,假设我有以下数据:
第 1 列:20 个字符长。
column-2:20 个字符长。
column-3 : 最长 200 个字符(带垂直滚动条的文本区域)
是否可以通过在 jqgrid 行中使用自定义格式化程序来显示我们在 html table 中所做的此类数据?
<table border="1">
<tr>
<td align='center'>Column-1</td>
<td align='center'>Column-2</td>
</tr>
<tr>
<td colspan="2" align='center'>Column-3</td>
</tr>
</table>
table
谢谢。
下面的代码可以满足您的需求。请注意使用 afterInserRow 事件并将 gridview 参数设置为 false:
var mynewdata = [
{id: "id1", Col1 : "data11", Col2: "data12", Col3: "data13"},
{id: "id2", Col1 : "data21", Col2: "data22", Col3: "data23"},
{id: "id3", Col1 : "data31", Col2: "data32", Col3: "data33"},
{id: "id4", Col1 : "data41", Col2: "data42", Col3: "data43"}
];
$(document).ready(function () {
$("#jqGrid").jqGrid({
datatype: "local",
data: mynewdata,
height: 250,
width: 780,
colModel: [
{ name: 'id', hidden: true, key: true},
{ name: 'Col1', width: 75 },
{ name: 'Col2', width: 90 },
{ name: 'Col3', width: 100, hidden: true }
],
gridview : false,
afterInsertRow: function(id, rowdata, curr) {
var newid = id+"1";
var data = '<tr role="row" id="'+newid+'" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content">';
data += '<td colspan="2" role="gridcell" style="text-align:center" title="data11" aria-describedby="jqGrid_Col1">'+rowdata.Col3+'</td>';
data += '</tr>';
$("#"+id).parent().append(data);
}
});
});
我在我的 Web 应用程序中使用 jqgrid 响应式 bootstrap 版本,没有任何问题。
是否可以将 jqgrid 中的一行格式化为具有 2 行的 html table。
例如,假设我有以下数据:
第 1 列:20 个字符长。 column-2:20 个字符长。 column-3 : 最长 200 个字符(带垂直滚动条的文本区域)
是否可以通过在 jqgrid 行中使用自定义格式化程序来显示我们在 html table 中所做的此类数据?
<table border="1">
<tr>
<td align='center'>Column-1</td>
<td align='center'>Column-2</td>
</tr>
<tr>
<td colspan="2" align='center'>Column-3</td>
</tr>
</table>
table
谢谢。
下面的代码可以满足您的需求。请注意使用 afterInserRow 事件并将 gridview 参数设置为 false:
var mynewdata = [
{id: "id1", Col1 : "data11", Col2: "data12", Col3: "data13"},
{id: "id2", Col1 : "data21", Col2: "data22", Col3: "data23"},
{id: "id3", Col1 : "data31", Col2: "data32", Col3: "data33"},
{id: "id4", Col1 : "data41", Col2: "data42", Col3: "data43"}
];
$(document).ready(function () {
$("#jqGrid").jqGrid({
datatype: "local",
data: mynewdata,
height: 250,
width: 780,
colModel: [
{ name: 'id', hidden: true, key: true},
{ name: 'Col1', width: 75 },
{ name: 'Col2', width: 90 },
{ name: 'Col3', width: 100, hidden: true }
],
gridview : false,
afterInsertRow: function(id, rowdata, curr) {
var newid = id+"1";
var data = '<tr role="row" id="'+newid+'" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content">';
data += '<td colspan="2" role="gridcell" style="text-align:center" title="data11" aria-describedby="jqGrid_Col1">'+rowdata.Col3+'</td>';
data += '</tr>';
$("#"+id).parent().append(data);
}
});
});