「Python + Django + SlickGrid で一覧表示」で、gridライブラリを使った一覧表示を試してみましたが、Slick Gridより、簡単に実装できる「ag-grid」というライブラリに出会ったので、Djangoと連携する例を投稿しておきます。

1.インストール

ag-gridは、javascript, angular, react, vueなどで使用できると書いてありますが、今回は、javascript版を使用します。

(1)ダウンロード

GitHUBからダウンロードします。必要なcss, jsファイルは、distフォルダの中にあります。

(2)アプリケーションを作成する。

Djangoなので、サンプルアプリケーションを作成します。

今回のメインとなるアプリケーションを作成する

python manage.py startapp hellojson2

db用のアプリケーションを使います。

Python+DjangoでDBの検索処理をモジュール化してみる

python manage.py startapp commons

model用のアプリケーション

modelはすべてのアプリケーションで使うので、別でアプリケーションを作成しておきます。

python manage.py startapp entities

アプリケーションの構成

以下のようなファイル構成になります。

staticフォルダの下のcss, jsフォルダに、ダウンロードしたag-gridのcss, jsを配置します。
※ ag-gridのほかに、JQueryも使います。bootstrapは好みに合わせて配置してください。

myproject
│  db.sqlite3
│  manage.py
│
├─commons
・・・
│  │  dbutils.py
・・・
│          
├─entities
│  │  admin.py
│  │  models.py
・・・
├─hellojson2
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  urls.py
│  │  views.py
・・・
├─myproject
│  │  settings.py
│  │  urls.py
│  │  wsgi.py
│  │  __init__.py
・・・
├─static
・・・
│  ├─css
│  │      ag-grid.css
│  │      ag-theme-balham.css
│  │      bootstrap.min.css
│  │      bootstrap.min.css.map
・・・
│  ├─js
│  │      ag-grid-community.min.noStyle.js
│  │      bootstrap.bundle.min.js
│  │      bootstrap.bundle.min.js.map
│  │      jquery-3.3.1.min.js
・・・

2.アプリケーションの概要

従業員マスタのメールアドレスを一括更新するアプリケーションです。
画面に、従業員マスタの一覧を表示し、ユーザは、更新対象とする行をチェックして更新します。
初期表示時は、一覧は表示されません。検索ボタンで表示します。
更新ボタンを押すと、従業員マスタのメールアドレスを「bbb@localhost.com」に変更します。

3.実装

(1)model

modelの作成

entities\models.py

from django.db import models

# Register your models here
class Department(models.Model):
    """
    所属マスタ
    """
    deptid = models.CharField(max_length=16)
    deptname = models.CharField(max_length=64)
    upperdeptid = models.CharField(max_length=16)
    def __str__(self):
        return self.deptname

class Employee(models.Model):
    """
    従業員マスタ
    """
    empid = models.CharField(max_length=16)
    empname = models.CharField(max_length=64)
    deptid = models.CharField(max_length=16)
    mailaddress = models.CharField(max_length=128)
    def __str__(self):
        return self.empname

プロジェクトにアプリケーションを追加する

myproject\settings.py

INSTALLED_APPS = [
・・・
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap4', #追加
    'entities', #追加
    'hellojson2', #追加
]

migrate

python manage.py makemigrations entities
python manage.py migrate entities

(2)HTML

htmlのコメントにポイントを入れています。

hellojson2\templates\hellojson2\index.html

{% extends 'commons/base.html' %}

{% load static %}

{% block links %}
<link rel="stylesheet" href="{% static 'css/ag-grid.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/ag-theme-balham.css' %}" type="text/css"/>
<style media="screen">
  .form-control{border: none !important;}
</style>
<script src="{% static 'js/ag-grid-community.min.noStyle.js' %}"></script>
{% endblock %}

{% block headertitle %}
一括更新 サンプル
{% endblock %}

{% block content %}
<br/>
<div class="form-control">
  <p>選択した行のメールアドレスを一括更新します。</p>
</div>
<div class="form-control text-right">
  <button class="btn btn-sm btn-primary" onclick="search(); return false;">検索</button>
  <button class="btn btn-sm btn-primary" onclick="sendData(); return false;">更新</button>
</div>
<div id="myGrid" style="height: 600px; width:100%; margin-top:10px;" class="ag-theme-balham"></div>

<script type="text/javascript">

  // ※DjangoとAjax通信するときは、CSRF対策をしておく必要がある。
  // django CSRF対策 ここから
  function getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie != '') {
          var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
              var cookie = jQuery.trim(cookies[i]);
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) == (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }

  var csrftoken = getCookie('csrftoken');

  function csrfSafeMethod(method) {
      // these HTTP methods do not require CSRF protection
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }

  $.ajaxSetup({
      crossDomain: false, // obviates need for sameOrigin test
      beforeSend: function(xhr, settings) {
          if (!csrfSafeMethod(settings.type)) {
              xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
      }
  });
  // django CSRF対策 ここまで

  //検索ボタン
  function search(){
    //fetchを
    fetch("{% url 'hellojson2:getlist' %}").then(function(response) {
      return response.json();
    }).then(function(data) {
      gridOptions.api.setRowData(data);
    })
  }

  //更新ボタン
  function sendData() {

    //ag-grid:選択した行の一覧を取得する。
    var selectedNodes = gridOptions.api.getSelectedNodes()
    var selectedData = selectedNodes.map( function(node) { return node.data })

    if (selectedData.length == 0) {
      alert("選択してください。")
      return;
    }
    //fetchではなく、JQuery Ajaxを使う例。
    $.ajax('/hellojson2/senddata/',
      {
        type: 'post',
        data: { query: JSON.stringify(selectedData) },
        'dataType': 'json'
      }
    )
    // 更新成功時に{"status": "OK"}が返ってくる
    .done(function(data) {
      alert(JSON.stringify(data));
    })
    // 検索失敗時には、その旨をダイアログ表示
    .fail(function( jqXHR, textStatus, errorThrown ) {
      window.alert('通信エラーが発生しました。 status=' + textStatus);
    })
    .always(function( jqXHR, textStatus ) {
    });

  }

  // ag-grid: 列定義
  // empidにcheckboxSelectionをセットすることで、checkboxを表示
  // headerCheckboxSelectionは、ヘッダにcheckboxを表示
  // empidは、リンクボタンで表示するようにしています。
  var columns = [
    {headerName: "従業員コード", field: "empid", headerCheckboxSelection: true, checkboxSelection: true, filter: true, editable: true,
      cellRenderer: function(params) {
        //将来的には、詳細表示などのURLをセットする。ひとまずgoogleのサイトを開く
        return '<a href="https://www.google.com" target="_blank">'+ params.value+'</a>'
      },
    },
    {headerName: "氏名", field: "empname", filter: true},
    {headerName: "メールアドレス", field: "mailaddress", filter: true},
    {headerName: "所属コード", field: "deptid", filter: true},
    {headerName: "所属名", field: "deptname", filter: true}
  ];

  //ag-grid: データ（JSON）
  var data = {{data|safe}}

  //ag-grid: Options
  //複数行選択にしています。
  var gridOptions = {
    columnDefs: columns,
    rowSelection: 'multiple'
//    rowData: data
  };

  // ag-grid: lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');

  // ag-grid: create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);

  // ag-grid: 初期表示時のデータをセットしておく。
  gridOptions.api.setRowData(data);

</script>
{% endblock %}

(3)ルーティング

hellojson2\urls.py

from django.urls import path
from . import views

app_name = 'hellojson2'
urlpatterns = [
    path('', views.index, name='index'),                    # 初期表示
    path('getlist/', views.getlist, name='getlist'),        # 検索
    path('senddata/', views.senddata, name='senddata'),     # 更新
]

(4)view.py

hellojson2\views.py

from django.shortcuts import render, get_object_or_404, redirect
from django.http import HttpResponse
import json
from commons.dbutils import exec_query
from django.views.decorators.csrf import ensure_csrf_cookie
from entities.models import Employee

# list
def index(request):
    data = []
    jsondata = json.dumps(data, ensure_ascii=False, indent=2)
    return render(request,
                  'hellojson2/index.html',
                  {'form_name': 'hellojson2', 'data': jsondata})

def getlist(request):
    sqltext="""SELECT
        a.id
      , a.empid
      , a.empname
      , a.deptid
      , a.mailaddress
      , b.deptname
    FROM
      public.entities_employee a
    INNER JOIN
      public.entities_department b
      on a.deptid=b.deptid
    ORDER BY
      a.id
        ;  """
    emplist=exec_query(sqltext);

    jsondata = json.dumps(emplist, ensure_ascii=False);

    return HttpResponse(jsondata)

@ensure_csrf_cookie
def senddata(request):
    txt = request.POST['query']
    datas = json.loads(txt)

    for element in datas:
#        print(element)
        entity = Employee.objects.filter(id=element['id']).first()
        entity.mailaddress = 'bbb@localhost.com'
        entity.save()

    data = {'status': 'OK'}

    json_str = json.dumps(data, ensure_ascii=False, indent=2)

    return HttpResponse(json_str)

(5)プロジェクトのルーティング

最後に、myproject\urls.pyに、アプリのルーティングを追加します。

myproject\urls.py

urlpatterns = [
    path('hellojson2/', include('hellojson2.urls')),   # ←ここを追加
    path('admin/', admin.site.urls),
]

4.動作確認

webサーバ起動

python manage.py runserver

アプリにアクセスしてみます。

5.最後に

Slick Gridでここまでやろうと思ったら、pluginの追加やjavascriptの実装が複雑になりがちですが、ag-gridは実装も少なくてとってもいい感じです。大量データの表示も高速に表示できるので、私的にはag-gridかなと思いました。