Question

我无法弄清楚如何使用Django-datatable-view呈现可编辑的表格。我想创建一个完全相同的表：http://django-datatable-view.appspot.com/x-editable-columns/来自模型City，例如。

我已经阅读了文档和教程，但仍然无法弄清楚如何创建表格。

这是我到目前为止所做的：

{% extends "base.html" %}
{% block head %}
    {% load static %}e
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script src="{% static "datatable/js/datatableview.min.js" %}"></script>
    <script>
        datatableview.auto_initialize = false;
        $(function () {
            var xeditable_options = {};
            datatableview.initialize($('.datatable'), {
                fnRowCallback: datatableview.make_xeditable(xeditable_options),
            });
        })
    </script>
{% endblock %}
{% block content %}
    {{ datatable }}
    {{ object_list }}
{% endblock %}

我的观点是：

class ZeroConfigurationDatatableView(dtv_views.XEditableDatatableView):
    model = dolava_models.City

    datatable_options = {
        'columns': [
            'id',
            ("Name", 'name', dtv_helpers.make_xeditable),
            ("Country", 'country', dtv_helpers.make_xeditable),

        ]
    }

不幸的是我的代码呈现了这个：

Answer 1

作为第一步，尝试运行隐藏在的示例项目：

django-datatable-view/datatableview/tests/example_project/example_project/example_app

要执行此操作，请按照项目github页面上的Documentation and Live Demos进行操作，但请确保在开始之前将django>=1.4替换为django==1.8。也就是说，根据我的经验，它与django1.9或1.10不兼容。

完成此操作后，您将拥有一整套工作示例和匹配的文档，这将使一些事情变得简单。您提供的链接已过期。浏览示例（example_app/views.py）和文档。

当您准备离开沙箱时，请遵循以下路线：

开始新的virtualenv
克隆此分支：https://github.com/jangeador/django-datatable-view/（它还有一些提交使其与最新版本的django兼容）和pip install（如果您打算进行更改，请使用-e editable选项）。

从您运行的示例应用中关注此示例Datatable object and Meta。在代码中：

class MyDatatable(Datatable):
    class Meta:
        model = Entry
        columns = ['id', 'headline', 'pub_date', 'n_comments', 'n_pingbacks']
        ordering = ['-id']
        page_length = 5
        search_fields = ['blog__name']
        unsortable_columns = ['n_comments']
        hidden_columns = ['n_pingbacks']
        structure_template = 'datatableview/default_structure.html'

class ConfigureDatatableObjectDatatableView(DatatableView):
    model = Entry
    datatable_class = MyDatatable

如果您不需要，可以删除Datatable课程中的所有属性（它们是可选的）。

除了文档之外，我还必须在DataTableView类上覆盖以下方法才能使其正常工作。

def get_template_names(self):
    return "example_base.html"

这是您的模板文件，需要包含：

<script src="{% static 'path-to/datatables.min.js' %}" type="text/javascript"></script>
<link href="{% static 'your-path-to/datatables.min.css' %}" rel="stylesheet">

<script type="text/javascript" src="{% static 'js/datatableview.js' %}"></script>

{{ datatable }}

<script>
    // Page javascript
    datatableview.auto_initialize = true;
</script>

值得注意的是，django-datatable-view模块（以及随附的datatableview.js）中包含datatableview.auto_initialize = true;。如果您对datatables.js开始感到满意，可以自己进行配置，但是如果您也是django-datatable-view的新手，这可能是最简单的方法。

Answer 2

如果认为您需要此功能来根据需要呈现自定义列

    def render_column(self, row, column):
            # We want to render user as a custom column
            if column == 'user':
              # escape HTML for security reasons
              return escape('{0} {1}'.format(row.customer_firstname, 
              row.customer_lastname))
           else:
             return super(OrderListJson, self).render_column(row, column)

Answer 3

{% block content %}
    {% if instances %}
        <table class='datatable'>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Country</th>
            </tr>
            {% for row in instances %}
                <tr>
                  <th> {{ row.id }}</th>
                  <th> {{ row.name }}</th>
                  <th> {{ row.country }}</th>
                </tr> 
            {% endfor %}
        </table>
    {% else %}
        <p>No data available</p>
    {% endif %}
{% endblock %}

如何在django-datatable-view中呈现表？

3 个答案: