编辑引导程序模板，动态添加jarvisWidget，并在页面加载完毕后重新生成小部件

Question

我正在使用https://wrapbootstrap.com/ 的智能管理面板

他们使用的是非常容易使用的j arvisWidget / smart widget。

我要进入的问题是，页面加载后，我使用jquery函数动态添加一些小部件：

$(".items-container").append('<article class="col-xs-12 col-sm-6 col-md-4 col-lg-3 sortable-grid ui-sortable">
                                        <div class="jarviswidget" id=wid-id-"'+itemId+'">   
                                            <header>
                                                <span class="widget-icon"> <i class="glyphicon glyphicon-search"></i> </span>
                                                <h2>'+ data.title +'</h2>               
                                            </header>   
                                            <div>
                                                <div class="jarviswidget-editbox"> 
                                                    <!-- This area used as dropdown edit box --> 
                                                    <input class="form-control" type="text">    
                                                </div>
                                                <div class="widget-body">
                                                    Here is an item
                                                </div>
                                            </div>
                                        </div>
                                    </article>');

小部件被添加，但作为普通HTML，而不是在HTML页面上重新生成为预定义的小部件。

如何重新初始化当前页面上的所有当前小部件/仅初始化尚未初始化的小部件？

对于我现在发现的一个临时解决方案，就是创建我自己的pageSetUp();方法，并仅在完成将所有小部件动态加载到页面时调用setup_widgets_desktop()。

但我正在寻找更坚实的东西。

Answer 1

我也遇到了同样的问题。我调用了一个ajax方法，将小部件添加为html。调用pageSetUp();和setup_widgets_destop();将重新初始化所有元素，因此最好只重新初始化容器中的小部件。我的解决方案如下：

我正在中插入小部件

$("#div-id").html(widgetsHTML);

我首先使用销毁了现有的小部件

 $("#div-id").jarvisWidgets('destroy');

然后使用重新初始化div中的所有小部件

$("#div-id").jarvisWidgets();

您也可以将默认值传递为：

$("#form-data").jarvisWidgets({
    "fullscreenClass": "fa fa-expand | fa fa-compress",
    "toggleClass": "fa fa-minus | fa fa-plus"
});

我希望这会有所帮助。