Gridstack.js使用Jquery删除小部件

Question

下面是我正在使用的Jquery函数，我不知道如何使用remove_widget，请帮助:我找不到任何关于删除小工具的帮助，而Knockout.js不是我所用的，因为我没有使用它。

$(function () {
var options = {resizable: {
handles: 'e, se, s, sw, w'
}
};

$('.grid-stack').gridstack(options);

        new function () {
            this.serialized_data = [
                {x: 0, y: 0, width: 2, height: 2},
                {x: 3, y: 1, width: 1, height: 2},
                {x: 4, y: 1, width: 1, height: 1},
                {x: 2, y: 3, width: 3, height: 1},
                {x: 1, y: 4, width: 1, height: 1},
                {x: 1, y: 3, width: 1, height: 1},
                {x: 2, y: 4, width: 1, height: 1},
                {x: 2, y: 5, width: 1, height: 1}
            ];

            this.grid = $('.grid-stack').data('gridstack');

            this.load_grid = function () {
                this.grid.remove_all();
                var items = GridStackUI.Utils.sort(this.serialized_data);
                _.each(items, function (node) {
                    this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
                        node.x, node.y, node.width, node.height);
                }, this);
            }.bind(this);

            this.save_grid = function () {
                this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
                    el = $(el);
                    var node = el.data('_gridstack_node');
                    return {
                        x: node.x,
                        y: node.y,
                        width: node.width,
                        height: node.height
                    };
                }, this);
                $('#saved-data').val(JSON.stringify(this.serialized_data, null, '    '));
            }.bind(this);

            this.clear_grid = function () {
                this.grid.remove_all();
            }.bind(this);
            this.add_grid = function(){
                this.grid.add_widget($('<div><div class="grid-stack-item-content" /><i class=" fa fa-remove"></><div/>'), 0, 0, 3, 2, true);
                $('.fa-remove').click(this.remove_grid);
            }.bind(this);
            this.remove_grid = function(){
                this.grid.remove_widget("What should I use Here", true);
            }.bind(this);
            $('#save-grid').click(this.save_grid);
            $('#load-grid').click(this.load_grid);
            $('#clear-grid').click(this.clear_grid);
            $('#add-grid').click(this.add_grid);
            $('.fa-remove').click($(this).remove_grid);
            this.load_grid();
        };
    });

Answer 1

假设您动态添加项；也假设您有一个具有类“remove”的触发元素；

$('body').on('click', '.remove', function (e) {
    e.preventDefault();
    var grid = $('.grid-stack').data('gridstack'),
        el = $(this).closest('.grid-stack-item')

    grid.remove_widget(el);
});

注意:将上下文缩小到实际的容器并引用它，而不是$('body')

从v0.2.5开始，

函数remove_widget已弃用，并已被removeWidget所取代。它将在v1.0中被完全删除。

Answer 2

我知道这是一个老问题，但我想我应该分享我的方法，这可能会对某些人有所帮助。

var $eGridstack = $(".grid-stack");

$(".btn-delete").click(function ()
{
    let $widget = $(this).closest(".grid-stack-item");

    if (confirm("Are you sure you wish to delete this widget?") == true)
    { 
        $eGridstack.data('gridstack').removeWidget($widget);
    }
}

remove_widget 已被弃用。

从v0.2.5开始，

函数remove_widget已弃用，并已被removeWidget所取代。它将在v1.0中被完全删除。

Answer 3

单击复选框后删除小部件

$("#mycheckbox").click(function () {if (document.getElementById('mycheckbox').checked == false)
                    { 
                        $("#myblockContent").insertAfter("#spantrash");
                        var grid = $('.grid-stack').data('gridstack');
                        el=$('#divGridstackContent').closest('.grid-stack-item');
                        grid.removeWidget(el);
                    }
                    else{
                        var grid = $('.grid-stack').data('gridstack');
                        grid.addWidget($('<div><div class="grid-stack-item-content divscroll" id="divGridstackContent" ><span id="spanContent"></span></div></div>'), {id: "Content", x: "0", y: "6", width: "6", height: "6"});
                        $( "#blockContent" ).insertAfter( "#spanContent" );

                    }
                    });