我有以下jsfiddle
我希望能够将我的自定义组件粘贴到特定的网格中(例如"")
现在没有Angular2,我只是使用:
var el = $.parseHTML("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);
问题是,我不知道我怎么能这样做:
var el = $.parseAndCompileHTMLWithComponent("<div><div class=\"grid-stack-item-content\" data-id=\""+id+"\"/><fancy-button></fancy-button><div/>");
this.grid.add_widget(el, 0, 0, 6, 5, true);
在angular1中,我知道有一个编译,但在angular2中,没有这样的东西.
我的花哨按钮组件很简单,如下所示:
@Component({
selector: 'fancy-button',
template: `<button>clickme</button>`
})
export class FancyButton {}
如何动态添加花式按钮组件？
我正在使用Ractive.js和gridstack.js创建示例应用程序,但无法弄清楚如何将gridstack添加为装饰器.我认为这是向ractive.js添加jQuery元素的正确方法,请告知是否不是.
在我创建了一个装饰器并将其分配给Dashboard组件后,它实际上不起作用,并且事件来自组件gridstackDecorator中没有缓存Dashboard.
我用不起作用的代码创建了这个小提琴,源代码如下:
Ractive.js组件树将如下所示:
- App
|--- Dashboard <-- GridstackDecorator
|--- Widget
|--- Widget container components
|--- ...
|--- Widget
|--- Other components
HTML模板看起来像:
<div id="app"></div>
<script>
window.__APP_INITIAL_STATE__ = {
widgets: [
{id: 1, name: "First widget", x:0, y:0, width:2, height:2},
{id: 2, name: "Second widget", x:5, y:0, width:2, height:2},
{id: 3, name: "Third widget", x:10, y:0, width:2, height:2},
],
};
</script>
我尝试分配给Dashboard组件的gridstack装饰器如下所示:
该update和teardown方法不会被调用,这是为什么？ …
我有一些Angular 1经验,但我们需要在Angular 2项目中使用gridstack.js.
我们熟悉gridstack-angular项目,但该项目是在Angular 1中.我认为我遇到的最大问题是Angular 2概念.
任何帮助,将不胜感激.
我正在尝试设置 gridstack.js 以使用我的 vue 组件，就像在这个淘汰赛示例中一样：https : //github.com/troolee/gridstack.js#use-with-knockoutjs/。
这是我所拥有的代码笔：https ://codepen.io/nyoung697/pen/BperoZ
从上到下删除它们效果很好（看起来如此）。最新的元素在顶部，因为 gridstack 将它添加到顶部。所以这是数组中的最后一个元素。
Gridstack 变得混乱并在页面上交换元素。我不知道它为什么这样做。有人可以帮我解决这个问题吗？几个星期以来，我一直在兜圈子，尝试了很多不同的东西。
我添加了一些控制台日志来显示正在引用的 id。当您按照添加的最后一个元素的顺序删除元素时，“销毁”方法中的 id 与所有其他方法/钩子相同。但是，如果您尝试以随机顺序删除它们，则在销毁方法中打印的 id 是不同的。
摧毁：
Vue.component('ntextbox', {
template: '#textboxtemplate',
props: ['component'],
created () {
console.log('created textbox control');
},
methods: {
removeWidget: function(){
console.log('child remove: ' + $(this.$el).attr('id'));
this.$emit('remove');
}
},
destroyed () {
console.log('textbox control destroyed');
var grid = $('.grid-stack').data('gridstack');
console.log(grid);
console.log($(this.$el).attr('id'));
grid.removeWidget(this.$el);
//console.log(grid);
}
});
设置:[gridstack]我正在使用"0.4.0"从开发分支合并到"1.0.0-dev".
我有一个插件/小部件列,我将拖动到网格上,所以基本上我使用jQueryUI for droppable和draggable.
刚刚发现一个问题,同时调整和拖动项目周围和一段时间后尝试将另一个项目拖入网格生成并出现错误"Uncaught TypeError:无法设置属性'_grid of undefined"第933行"node._grid = self;".屏幕截图已附上.
此外,"ui-draggable-handle"还附加了一个名为"ui-draggable-dragging"的附加类.它完全打破了插件,您需要刷新页面以使所有功能恢复正常,但每个其他dragstop事件.
<div id="sidebar">
<div class="item ui-draggables"><span>{json-config}</span></div>
</div>
<div id="grid1" class="grid-stack">
<div class="grid-stack-item">//loaded from draggables with json config</div>
</div>
我正在尝试创建此行为，并且不确定Gridstack是否支持它。我有3个Gridstack网格：Grid1，Grid2和Grid3。 Grid1是一个独立的网格，Grid3嵌套在Grid2内。我需要能够将小部件从Grid1拖动到Grid2（外部网格）和Grid3（嵌套网格）中。按照示例，我能够在2个顶级网格之间拖动小部件并创建一个嵌套网格，但不能将这2个网格组合在一起。如果支持，则不建议使用任何指针。
注意：将代码段扩展到全屏
$(document).ready(function() {
$('.grid-stack').gridstack();
});.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack .grid-stack {
/*margin: 0 -10px;*/
background: rgba(255, 255, 255, 0.3);
}
.grid-stack .grid-stack .grid-stack-item-content {
background: lightpink;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>
<div class="container-fluid">
<h1> Multilevel …真的是菜鸟问题，但是我不明白我在这里做错了什么吗？
<head>
<link rel="stylesheet" type="text/css" href="gridstack.js/dist/gridstack.css">
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"> azazfaz</div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>
<script type="text/javascript">
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
});
</script>
我收到此错误：
gridstack.js:391 Uncaught TypeError: undefined is not a function
指向gridstack中的这一行：
var is_nested = this.container.closest('.' + opts.item_class).size() > …我正在处理一个 Angular6 项目，我需要使用 gridstack.js，我应该如何在这个版本的项目中使用它
我检查过像 gridster 这样的库，但它们不支持嵌套功能。
我需要与 gridstack 提供的相同功能以及嵌套支持。需要帮助吗？