4

我需要知道如何通过他使用 gridster.add_widget 动态创建的 id 来删除单个 gridster.js 小部件。创建的每个新小部件都有一个自己的按钮来删除该单个小部件，但我无法使其工作。

这是我的代码

$(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 );
    });

});

对于添加小部件，它工作正常，但我无法删除小部件。

4

5 回答 5

7

实际上，您不需要 ID 即可删除小部件。请检查我的脚本。 

    var gridster = $('.gridster ul').gridster().data('gridster');
    $(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });
于 2014-01-20T13:30:55.613 回答
0

事实上，您只需将您'#block'+newid的 jQuery 元素包装起来，如函数注释中所述：

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

函数注释（在 jquery.gridster.js 中）：

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

* @param {HTMLElement} el 要删除的 jQuery 包装的 HTMLElement。

 * @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) {...}
于 2014-06-23T09:10:21.943 回答
0
  • 点击添加后应该增加newid var
  • li 标签没有正确的 id

请检查下面的代码，应该与您合作

$(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());
    });
});
于 2014-07-16T10:29:48.350 回答
0

这对我有用，我使用时间戳作为唯一 ID

添加一个项目：

$( "#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 + "']"));

});
于 2016-03-07T21:09:37.510 回答
0

由于它适用于 jQuery 对象，因此您无需添加任何类或 id 来标识要删除的项目。只需创建一个点击事件并引用 $(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'));
});
于 2015-09-23T09:23:30.277 回答