Как удалить отдельный виджет из gridster.js по его динамически созданному идентификатору

Мне нужно знать, как удалить один виджет gridster.js по его динамически созданному идентификатору с помощью gridster.add_widget. У каждого нового созданного виджета есть собственная кнопка для удаления этого единственного виджета, но я не могу заставить его работать.

Вот мой код

$(document).ready(function(){

var count = 0;
var newid = count + 1;

    $(document).on("click", "#newGrid", function() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.add_widget('<li id="block"'+newid'>Hello, now delete me <span id="remove"'+newid'>x</span></li>',2 ,1);
    });

    $(document).on('click', '#remove'+newid, function() {
    var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget( '#block'+newid );
    });

});

Для добавления виджетов это работает нормально, но я не могу удалить виджеты.


widget jquery gridster
person iamrobertsillo    schedule 20.12.2013    source источник

Ответы (5)


arrow_upward
7
arrow_downward

На самом деле вам не нужен идентификатор для удаления виджета. Пожалуйста, проверьте мой сценарий.

    var gridster = $('.gridster ul').gridster().data('gridster');
    $(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });
person minimal    schedule 20.01.2014

arrow_upward
0
arrow_downward

На самом деле вам просто нужно обернуть '#block'+newid в элемент jQuery, как указано в комментарии к функции:

gridster.remove_widget( $( '#block'+newid ) );

Комментарий к функции (в jquery.gridster.js):

/**
 * Remove a widget from the grid.
 *
 * @method remove_widget

* @param {HTMLElement} el Элемент HTMLElement, заключенный в jQuery, который вы хотите удалить.

 * @param {Boolean|Function} silent If true, widgets below the removed one
 * will not move up. If a Function is passed it will be used as callback.
 * @param {Function} callback Function executed when the widget is removed.
 * @return {Class} Returns the instance of the Gridster Class.
 */
fn.remove_widget = function(el, silent, callback) {...}
person Worst    schedule 23.06.2014

arrow_upward
0
arrow_downward

  • newid var должен быть увеличен после нажатия кнопки «Добавить»
  • Тег li не имел правильного идентификатора

пожалуйста, проверьте код ниже, должно работать с вами

$(document).ready(function(){

var count = 0;
var newid = count + 1;

$(document).on("click", "#newGrid", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.add_widget('<li id="block'+newid+'">Hello, now delete me <span class="remove">x</span></li>',2 ,1);
    newid++;
});

    $(document).on('click', '.remove', function() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget( $(this).parent());
    });
});
person Belal mazlom    schedule 16.07.2014

arrow_upward
0
arrow_downward

Поскольку он работает с объектами jQuery, вам не нужно добавлять какие-либо классы или идентификаторы для идентификации элемента, который вы хотите удалить. Просто создайте событие клика и укажите $(this).

$('body').on( "click", ".gridster ul > li", function() {
     gridster.remove_widget($(this));
});

Или что-то более полезное, где у вас есть «кнопка удаления» внутри li:

$('body').on( "click", ".gridster ul > li .remove", function() {
  gridster.remove_widget($(this).closest('li'));
});
person Jonas Olausson    schedule 23.09.2015

arrow_upward
0
arrow_downward

это работает для меня, я использую метку времени как уникальный идентификатор

ДОБАВИТЬ ПУНКТ:

$( "#addMod").click(function(e) {
   gridster1.add_widget(
        '<li class="crItem" id="' + $.now() +  '">DESCRIPTION
         <i class="fi-wrench"></i>
         <i class="fi-x" id="delItem"></i></li>', 1, 1
      );  
 });

УДАЛИТЬ ЭЛЕМЕНТ:

$('#cashRegisterScreen').on('click', '#delItem', function() {          
    var id=$(this).parent().attr("id");             
    gridster.remove_widget($(".gridster ul").find("[id='" + id + "']"));

});
person Hannes Ledl    schedule 07.03.2016