jQuery jqGrid TableToGrid 删除一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4364673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jqGrid TableToGrid delete a row
提问by vikmalhotra
I am trying to use tabletogrid function in the jqgrid plugin. My problem is if I delete a row in table then the width attribute of the table cells just disappears. But if the last row is deleted then the delete operation happens as expected. For example, here's my html table -
我正在尝试在jqgrid 插件中使用 tabletogrid 函数。我的问题是，如果我删除表格中的一行，那么表格单元格的宽度属性就会消失。但是如果最后一行被删除，则删除操作会按预期进行。例如，这是我的 html 表 -
<table id="item_table">
<thead>
<tr>
<th width="60">Date</th>
<th width="15">Icon</th>
<th width="80">Shop</th>
<th width="15">Delete</th>
</tr>
<thead>
<tbody>
<tr>
<td width="60" class="col_date">
<div class="date"></div>
</td>
<td width="15" class="col_icon">
<div class="icon"></div>
</td>
<td width="80" class="col_shop">
<div class="shop"></div>
</td>
<td width="25" class="col_delete">
<div class="delete"></div>
</td>
</tr>
</tbody>
</table>
Then I add the contents to the table using an ajax code. After that here's my jqgrid setting.
然后我使用 ajax 代码将内容添加到表中。之后这是我的 jqgrid 设置。
jQuery.extend(jQuery.jgrid.defaults, {
caption: "Shops",
autowidth: true,
height: 24,
hidegrid: false,
onCellSelect: function(rowid, index, contents, target) {
if (index == 3) {
$('#item_table tr:eq(' + rowid + ')').remove();
}
},
colModel:[
{ name: 'date', index: 'date', width: 0, resizable: false },
{ name: 'icon', index: 'icon', width: 0, resizable: false },
{ name: 'shop', index: 'shop', width: 0, resizable: false },
{ name: 'delete', index: 'delete', width: 0, resizable: false }
]
});
tableToGrid("#item_table", {
colNames: ['Date', '', 'Shop', 'Delete']
});
The delete action causes the width attribute to disappear. Why is this happening?
删除操作会导致宽度属性消失。为什么会这样？
The cells in the grid get displayed like this...
网格中的单元格显示为这样...
<TD style="WIDTH: 80px" title="" role=gridcell><DIV class=shop></DIV></TD>
If delete any row except the last row, the cells become like this....
如果删除除最后一行之外的任何行，单元格会变成这样....
<TD title="" role=gridcell><DIV class=shop></DIV></TD>
Width attribute gets removed. What am I missing over here?
宽度属性被移除。我在这里错过了什么？
回答by Oleg
After converting the table to the jqGrid you can use any methodsof jqGrid. The standard way to delete a row in the jqGrid is delRowDatamethod.
将表格转换为 jqGrid 后，您可以使用jqGrid 的任何方法。在 jqGrid 中删除一行的标准方法是delRowData方法。
$('#item_table').jqGrid('delRowData',rowid);
To make the height of the grid automatically adjustable you can add the option height:'100%'. One more setting for the column definition title:falsefor all columns in the colModel, which titleattribute should not be created, can be also helpful for you.
要使网格的高度自动调整，您可以添加选项height:'100%'。title:false中所有列的列定义的另一项设置（不应创建colModel哪个title属性）也对您有所帮助。
One more small remark. Look at the formatter:'actions'or custom formatterwhich is very easy in use but allows you to create and HTML code fragment as the cells content. All the features could be interestring for the 'delete' coulmn.
再说一句小话。查看formatter:'actions'或自定义格式化程序，它非常易于使用，但允许您创建 HTML 代码片段作为单元格内容。对于“删除”选项，所有功能都可能很有趣。
回答by Erick S. Escalante Olano
gridPreSeleccion: id grid
gridPreSeleccion：id 网格
this grid is multiselect true call with an event jquery
此网格是带有事件 jquery 的多选 true 调用
//Funcion que elimina los multiselect de un jqgrid seleccionados
function eliminarSeleccionados() {
var idsContribuyentesSelect = jQuery("#gridPreSeleccion").jqGrid('getGridParam', 'selarrrow');
if(idsContribuyentesSelect.length == 0) {
jQuery.MessageAlertSath("Es necesario seleccionar una fila.")
} else {
var ids = jQuery("#gridPreSeleccion").jqGrid('getDataIDs');
var a = ids.length;
var j = 0;
while(j == 0) {
if(jQuery("#gridPreSeleccion").jqGrid('getGridParam', 'selarrrow').length <= 0) {
j = 1;
} else {
for(var i = 0; i < a; i++) {
if(idsContribuyentesSelect[0] == ids[i]) {
jQuery('#gridPreSeleccion').delRowData(ids[i]);
break;
}
}
}
}
}
}
