はじめに
今、フロントエンドの開発は、数年前のようではありませんが、ページボーイラベルも少なく聞き、UIコンポーネントに基づいて、バックグラウンド管理システムの作業を開発することが多くなっている、バックグラウンド管理システムは、チャート、テーブル、ドロップダウンボックスなど、私はテーブルプラグインのより良い使用と思う2つの私の使用を記録したいと思います。
Jexcel
名前を見ればわかりますが、JSエクセルのバージョンもちろんExcelに比べればまだまだ弱いです。
- データソースは、配列、CSV、静的テーブルタグから取得できます。
- Ctrl操作、マウスダウン操作
- type オプション値
ビューノート
// template
<div id="spreadsheet" ref="spreadsheet"></div>
// script
import jexcel from 'jexcel-pro'
import style from 'jexcel-pro/dist/jexcel.css'
const jExcelObj = jexcel(this.$refs["spreadsheet"], {
data: [
[1,2,3,4,5],
[1,2,3,4,5],
],
columns: [
{ type: 'text', title:'Car', width:'120px' },
{ type: 'dropdown', title:'Make', width:'200px', source:[ "Alfa Romeo", "Audi", "Bmw" ] },
{ type: 'calendar', title:'Available', width:'200px', options:{ format:'DD/MM/YYYY' } },
{ type: 'image', title:'Photo', width:'120px' },
{ type: 'checkbox', title:'Stock', width:'80px' },
{ type: 'numeric', title:'Price', width:'100px', mask:'$ #.##,00', decimal:',' },
{ type: 'color', width:'100px', render:'square', }
]
});
Object.assign(this, { jExcelObj }); // このオブジェクトを現在のコンポーネントに混ぜると、thisを使って後でこのオブジェクトを取得できる。
GridManager
当時はVueを選んだのでElementUIを使っていたのですが、特別なニーズもなく、このGridManageが今使っている中で一番パワフルです。
- 最近、右クリックメニューをカスタマイズできるようです！
- セルフエクスポート機能、隠しカラム、ページング機能
- 3つのフレームワークのバージョン Angularはバージョン1
ビューノート
// script
managerName: `Table${ Date.now() }` // テーブル名
// template
:grid-manager-name-prop='managerName' // この書き方で間違いない。
:grid-manager-name-prop='`Table${ Date.now() }`' // 変なバグがあるかもしれない。
初めて書くので、吹きかけないでください...。
