jqGrid TableToGrid删除一行

vik*_*tra 3 jquery jqgrid

我试图在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>
Run Code Online (Sandbox Code Playgroud)

然后我使用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']
    });
Run Code Online (Sandbox Code Playgroud)

删除操作会导致width属性消失.为什么会这样?

网格中的单元格显示如下...

<TD style="WIDTH: 80px" title="" role=gridcell><DIV class=shop></DIV></TD>
Run Code Online (Sandbox Code Playgroud)

如果删除除最后一行之外的任何行,则单元格变为这样....

<TD title="" role=gridcell><DIV class=shop></DIV></TD>
Run Code Online (Sandbox Code Playgroud)

Width属性被删除.我在这里错过了什么?

Ole*_*leg 16

将表转换为jqGrid后,您可以使用jqGrid的任何方法.删除jqGrid中的行的标准方法是delRowData方法.

$('#item_table').jqGrid('delRowData',rowid);
Run Code Online (Sandbox Code Playgroud)

要使网格的高度自动调整,您可以添加选项高度:'100%'.title:false对于所有列的列定义的另一个设置,不应该创建colModel哪个title属性,对您也有帮助.

还有一个小小的评论.查看格式化程序:'actions'自定义格式化程序,它非常易于使用,但允许您创建HTML代码片段作为单元格内容.所有的功能都可以是'delete'coulmn的interestring.