Question

在我使用django的应用程序中，我正在显示gridster小部件。当我直接运行HTML / Javascript页面时，小部件按HTML代码编写。但是当我在django应用程序中使用相同的网页时，将其放在模板中将静态文件（gridster.js和某些css）保存在相应的文件夹中所有小部件只需加载一行

以下是我的HTML代码

<!doctype html>
<html>
<head>
<title>Demo &raquo; Add Delete Widget &raquo; gridster.js</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'js/jquery.gridster.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/jquery.gridster.min.js' %}" 
type="text/javascript" charset="utf-8"></script>
</head>

<body>

<h1>Add and Remove Widget Dynamically</h1>

<p>When you remove a widget,the widget below it will always remain in the 
same column.Widget from next column wont come in place of widget 
removed.Gridster is designed that way</p>
<a href="https://github.com/ducksboard/gridster.js/issues/338" 
target="_blank"> Click to know more</a>


<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>1</h3></li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>2</h3></li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>3</h3></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>4</h3></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>5</h3></li>
        <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>6</h3></li>
        <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>7</h3></li>
        <li data-row="2" data-col="4" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>8</h3></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>9</h3></li>
        <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>10</h3></li>
        <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>11</h3></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><button 
class="delete-button" style="float: right;">-</button><h3>12</h3></li>
</div>


<button class="add-button" style="float:top;">Add Widget</button>


 <script type="text/javascript">
    var gridster;

        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 100],
            widget_margins: [5, 5],
            helper: 'clone'
        }).data('gridster');



$(document).on( "click",".delete-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());
});



$(document).on( "click",".add-button", function() {
var gridster = $(".gridster ul").gridster().data('gridster');      
gridster.add_widget('<li><button class="delete-button" style="float: 
right;">-</button><h3></h3></li>',1,1);
});

</script>
</body>
</html>

上面的代码在我的django项目的模板文件夹中，当我在浏览器中正常运行时（通过替换head部分中的css和js路径），它运行得很好。

我的url.py有点像这样

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'gridster', views.gridster, name='gridster'),
]

我的views.py就像这样

from django.core.files.storage import default_storage
from django.core.files.base import ContentFile
from django.shortcuts import render, redirect
from django.utils import timezone
from django.utils.encoding import smart_str
from django.http import HttpResponse

from os import path

from .models import Test, IntermediateFile
from .forms import IntermediateFileForm


 def gridster(request):

 return render(request, 'myapp/gridster.html')

请注意，在views.py中我导入了许多其他模块，我需要用于其他目的可能与此问题无关

Gridster小部件在django网页中垂直出现

0 个答案: