时间戳

首页 > 解决方案 > Gridstack 删除特定元素

gridstack - Gridstack 删除特定元素

问题描述

我有以下内容：

<div class="row">
    <div class="col-md-12">
        <div class="trash">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="grid-stack">
            <div class="grid-stack-item" gs-h="1" gs-w="12" gs-x="0" gs-y="0" gs-locked="true" gs-no-move="false" gs-no-resize="true" gs-id="test1" data-isdefault="1" data-isremovable="-1" id="test1">
                <div class="grid-stack-item-content">
                    Announcements
                </div>
            </div>
            <div class="grid-stack-item"  gs-h="2" gs-w="4" gs-x="0" gs-y="1" id="test2" data-default="1">
                <div class="grid-stack-item-content">Tickets</div>
            </div>
            <div class="grid-stack-item" gs-h="2" gs-w="4" gs-x="4" gs-y="1" id="test3" data-default="1">
                <div class="grid-stack-item-content">Alerts</div>
            </div>
            
            <div class="grid-stack-item" gs-h="2" gs-w="4" gs-x="8" gs-y="1" id="test4" data-default="0">
                <div class="grid-stack-item-content">Emails</div>
            </div>
            
        </div>
    </div>
</div>

网格显示得非常好，但我想要某些用户无法删除的元素。我尝试的是检查元素是否具有data属性并将其添加回网格，但我丢失了元素的 html id。有没有更好的方法来做到这一点？

let grids = GridStack.initAll({
    cellHeight: 100,
    acceptWidgets: true,
    
    dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, 
    removable: '.trash'
});

grids[0].on('added removed change', function(e, items) {
    let str = '';
    items.forEach(function(item) {
        if (e.type=='removed' && $('#'+item.el.id).data('default')==1) {
            let is_default = item.el.dataset.isdefault;
            let is_removable = item.el.dataset.isremovable;
            alertify.error('Cannot remove a default widget');
            let wdtg = {
                x: item.x,
                y: item.y,
                w: item.w,
                h: item.h,
                id: item.id,
                content: item.el.firstElementChild.innerHTML

            };
        }
        //maybe there is a way to select the newly created element to add the data- attributes back? and the ID
        str += ' (x,y)=' + item.x + ',' + item.y + ' ' + item.el.id + ' '+item.w +' Extras: '+item.default+' '+item.removable;

    });
});

下面还有另一个网格，但它与这个问题无关，这就是我使用的原因initAll 我希望用户能够移动元素，但其中一些不应该是可移动的。谢谢

标签： gridstack

解决方案

所以我想出了一个可行的解决方案，但我对它不是很有信心。

grids[0].on('added removed change', function(e, items) {
    let str = '';
    var wdgt;
    items.forEach(function(item) {
        if (e.type=='removed' && $('#'+item.el.id).data('isdefault')==1) {
            let is_default = item.el.dataset.isdefault;
            let is_removable = item.el.dataset.isremovable;
            alertify.error('Cannot remove a default widget');
            wdtg = {
                x: item.x,
                y: item.y,
                w: item.w,
                h: item.h,
                id: item.id,
                content: item.el.firstElementChild.innerHTML

            };
            grids[0].addWidget(wdtg);
            //get all items
            let all_items = grids[0].getGridItems();
            //get length of array
            let numberOfElems = all_items.length;
            //add back all attributes to the last element in the array 
            //as it seems that gridstack pushes the new element when using
            //addWidget to its array
            all_items[numberOfElems-1].setAttribute('data-isdefault', $('#'+item.el.id).data('isdefault'));
            all_items[numberOfElems-1].setAttribute('data-isremovable', $('#'+item.el.id).data('isremovable'));
            all_items[numberOfElems-1].setAttribute('id', item.el.id);
        }
        str += ' (x,y)=' + item.x + ',' + item.y + ' ' + item.el.id + ' '+item.w +' Extras: '+item.default+' '+item.removable;
    });
    console.log(e.type + ' ' + items.length + ' items:' + str);
});

推荐阅读