Tabulatorの使い方とサーバにアップしたら簡単にWebアプリが作成できる
Tabulatorを使えば対話式テーブルが簡単に作れます。v4.2をダウンロードしました。
- dist/js/jquery_wrapper.min.js
- dist/js/tabulator.min.js
- dist/css/tabulator.min.css
テーブルを描画するだけならbody部は以下だけで良いです。
<body> <div id="example-table"></div> <!-- ここがレンダリング部分 --> </body>
head部でjQueryとjQueryuiに依存しているみたいなので読み込む必要があります。ここではCDNで読み込んでいます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <link href="dist/css/tabulator.min.css" rel="stylesheet"></link> <script type="text/javascript" src="dist/js/tabulator.min.js"></script> <script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script>
公式サイトみてもわかりづらいのでindex.htmlを全部載せます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <link href="dist/css/tabulator.min.css" rel="stylesheet"></link> <script type="text/javascript" src="dist/js/tabulator.min.js"></script> <script type="text/javascript" src="dist/js/jquery_wrapper.min.js"></script> <title>Tabulator</title> <script type="text/javascript"> $(function(){ var sampleData = [ {name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"}, {name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"}, {name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"}, {name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"}, {name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"}, ]; var table = new Tabulator("#example-table", { data:sampleData, layout:"fitColumns", responsiveLayout:"hide", tooltips:true, addRowPos:"top", history:true, pagination:"local", paginationSize:7, movableColumns:true, resizableRows:true, initialSort:[ {column:"name", dir:"asc"}, ], columns:[ {title:"Name", field:"name", editor:"input"}, {title:"Task Progress", field:"progress", align:"left", formatter:"progress", editor:true}, {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{values:["male", "female"]}}, {title:"Rating", field:"rating", formatter:"star", align:"center", width:100, editor:true}, {title:"Color", field:"col", width:130, editor:"input"}, {title:"Date Of Birth", field:"dob", width:130, sorter:"date", align:"center"}, {title:"Driver", field:"car", width:90, align:"center", formatter:"tickCross", sorter:"boolean", editor:true}, ], }); }); </script> </head> <body> <div id="example-table"></div> </body> </html>
Tabulator - Interactive JavaScript Tables
Create interactive data tables in seconds with Tabulator. A free, open source, fully featured JavaScript table / data gr...
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント
IE11ですがデモも表示されません。
FireFoxをお薦めします。^^
海外ではChromeは敬遠されてきているようですよ。–;