如何解决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
我希望用户能够移动元素,但其中一些元素不应该是可移动的。
谢谢
解决方法
所以我想出了一个有效的解决方案,但我对它不是很有信心。
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);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。