Question

我在项目中使用jQuery EasyUI，我需要删除Datagrid中的子行，但我不知道如何在datagrid中找到这条记录。

以下是执行任务的布局和代码段。

Imgur

使用您的子项创建datagrid：

<script type="text/javascript">
$(function() {
                $('#dg').datagrid({
                    view: detailview,
                    detailFormatter: function(index, row) {
                        return '<div style="padding:2px;"><table class="ddvclass" id="ddv"></table></div>';
                    },
                    onExpandRow: function(index, row) {
                        var ddv = $('#dg').datagrid('getRowDetail', index).find('table.ddvclass');
                        ddv.datagrid({
                            url: 'get_sub_items.php?itemid=' + row.PROD_ID,
                            fitColumns: true,
                            singleSelect: true,
                            rownumbers: true,
                            loadMsg: '',
                            height: 'auto',
                            columns: [[
                                    {field: 'SUBPROD_ID', title: 'ID', width: 80},
                                    {field: 'SUBPROD_NOME', title: 'Sub product', width: 80},
                                    {field: 'SUBPROD_DESCR', title: 'Description', width: 100},
                                    {field: 'action', title: 'Action', width: 35, align: 'center',
                                        formatter: function(value, row, index) {
                                            var a = '<a href="#" style="color: black;" onclick="deleteSubItems(this)"><b>Delete</b></a>';
                                            return a;
                                        }
                                    }
                                ]],
                            onResize: function() {
                                $('#dg').datagrid('fixDetailRowHeight', index);
                            },
                            onLoadSuccess: function() {
                                setTimeout(function() {
                                    $('#dg').datagrid('fixDetailRowHeight', index);
                                }, 0);
                            }
                        });
                        $('#dg').datagrid('fixDetailRowHeight', index);
                    }
                });
            });
</script>

删除子项目

function deleteSubItems(target) {
            $.messager.confirm('Confirmation', 'Are you sure?', function(r) {
                if (r) {
                    var row = $('#ddv').datagrid('getSelected');    <<<<<<<< HOW GET AND DELETE SUB ITEM (SUB ROW)? THIS IS NOT WORKING.
                    $.post('delete_sub_items.php', {id: row.SUBITEM_ID}, function(result) {
                        if (result.success) {
                            $('#ddv').datagrid('reload');
                        } else {
                            $.messager.show({
                                title: 'Erro',
                                msg: result.msg
                            });
                        }
                    }, 'json');
                }
            });
        }

谢谢

Answer 1

使用edatagrid extension

可以轻松实现

在onLoadSuccess下方，您可以添加如下所示的事件处理程序：

handler: function(){
    ddv.edatagrid('destroyRow');
}

您需要在网址下面加入desTroyUrl

ddv.edatagrid({
         url: 'get_sub_items.php?itemid=' + row.PROD_ID,
         destroyUrl: 'delete_sub_items.php',

但仍然有另一种解决方案，即使用您的方法：试试这个：

function formatDetail(value,row){
    return '<a href="#" class="easyui-linkbutton" 
    iconCls="icon-remove"  row-id="'+row.id+'">Delete</a>';
}

然后您的格式化程序将变为：

formatter:'formatDetail'

最后你必须改变你的onLoadSuccess，如下所示：

onLoadSuccess: function() {
    setTimeout(function() {
        $('#dg').datagrid('fixDetailRowHeight', index);
    }, 0);
    $(this).datagrid('getPanel').find('.easyui-linkbutton').each(function(){
        $(this).linkbutton({
            onClick:function(){
                var id = $(this).attr('row-id');
// destroy using your delete function excluding var row line.
//$.post('delete_sub_items.php', {id: id},....
            }
        })
    })
}

使用jQuery EasyUI删除datagrid中的子行

1 个答案: