1

FirefoxアドオンをChrome拡張に移植中なんですが、Visual StudioなどにあるGUI、GridViewのような表示をしたくて悩んでます。具体的にどんなものかと言うと以下の画像のようなものです。
FirefoxアドオンのGrid
selectタグだと複数列ができません。
条件としては、

  1. 複数列表示ができる
  2. 行単位での選択・検知ができる

を満たすようなものです。

4
  • Chrome拡張とは全然関連無さそうですが、このサイト jspreadsheets とおそらく元のリポジトリ krzysztofspilka/JSpreadsheets にそうした機能の色々なプロジェクトがリストされているようなので調べてみてはどうでしょう?
    – kunif
    2020年8月8日 23:59
  • jspreadsheetsを見たところw2uiというのが必要条件を満たしていて軽そうなので試してみようと思います。
    – Lamron
    2020年8月10日 9:13
  • w2uiはうまく行かなかったので別のを試すことにします
    – Lamron
    2020年8月12日 11:29
  • w2uiは選択などの動作をすると(起動関数がインラインに書かれているため)"Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution."というエラーが出て使えませんでした。
    – Lamron
    2020年8月13日 10:12

1 件の回答 1

1

HTML, CSS のみで質問文にあるような動作を実現することは難しいと思います。DataTablestabulator のようなテーブル生成を行う JavaScript ライブラリを用いることで、そのようなことが可能です。

たとえば、 tabulator を使用した場合は下記コードのようになります。tabulator では選択や選択解除時に rowSelectionChanged イベントが発生します。これは最初の引数として、選択された順序で各行のデータの配列を渡す[1]ため、「行単位での選択・検知」が行えます。

Row Selection Changed[1]

Whenever the number of selected rows changes, through selection or deselection, the rowSelectionChanged event is triggered. This passes an array of the data objects for each row in the order they were selected as the first argument, and an array of row components for each of the rows in order of selection as the second argument.

また、今回は tabulator の CSS を変更せずに使用していますが、このような装飾は各要素に割り当てられたクラスへ CSS を適用することで、独自にカスタマイズすることが出来ます[2]。通常のように CSS を記述することは難しいですが、これらのクラスや属性セレクタなどを組み合わせることで、期待通りの装飾を施すことも出来ると思います。

CSS Classes[2]

The tables below outline the key classes involved in styling Tabulator. You can include your own custom CSS after importing the library to customise its look and feel

const dayOfWeek = {
  "日": 0,
  "月": 1,
  "火": 2,
  "水": 3,
  "木": 4,
  "金": 5,
  "土": 6
};

const table = new Tabulator("#grid-view", {
  columns: [{
      title: "URL",
      field: "url",
    },
    {
      title: "タイトル",
      field: "title",
    },
    {
      title: "表示間隔",
      field: "rating",
      sorter: "number"
    },
    {
      title: "曜日",
      field: "day",
      sorter: (day1, day2) => (dayOfWeek[day1] - dayOfWeek[day2])
    },
    {
      title: "時刻",
      field: "time",
      sorter: "time"
    },
  ],
  cellVertAlign: "middle",
  height: "250px",
  layout: "fitColumns",
  selectable: true,
  rowSelectionChanged: function(data, rows) {
    $(".select-stats").text(`${data.length}個のデータを選択中`);
  },
});

const tabledata = [{
    id: 1,
    url: "https://foo.example.com/",
    title: "foo",
    rating: "6",
    day: "水",
    time: "7:00"
  },
  {
    id: 2,
    url: "https://hoge.example.com/",
    title: "hoge",
    rating: "12",
    day: "月",
    time: "9:00"
  },
  {
    id: 3,
    url: "https://bar.example.com/",
    title: "bar",
    rating: "3",
    day: "木",
    time: "19:00"
  },
  {
    id: 4,
    url: "https://fuga.example.com/",
    title: "fuga",
    rating: "50",
    day: "火",
    time: "2:00"
  },
  {
    id: 5,
    url: "https://piyo.example.com/",
    title: "piyo",
    rating: "25",
    day: "土",
    time: "21:00"
  },
];
table.setData(tabledata);
.tabulator-row .tabulator-cell {
  height: 5em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.7.2/css/tabulator.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.7.2/js/tabulator.min.js"></script>

<div id="grid-view"></div>
<div class="select-stats"></div>

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。