[Javascript] 表格: canvas-datagrid

日期：
canvas-datagrid
https://github.com/TonyGermaneri/canvas-datagrid

Ways to create a grid
https://github.com/TonyGermaneri/canvas-datagrid/blob/master/tutorials/canvasDatagrid.md

canvas-datagrid documentation
https://tonygermaneri.github.io/canvas-datagrid/docs/

canvas-datagrid demo
https://tonygermaneri.github.io/canvas-datagrid/tutorials/demo.html

canvas-datagrid為通過Javascript所開發的表格套件，主要特點為使用canvas方式呈現，因不使用標籤式開發，故渲染大數據時效能會較佳。當前版本的缺點為表格功能相較於一些知名套件如ag-grid或handsontable等稍少，並且bug修復較慢，而文件檔說明雖多，但沒有進行一般與進階使用的整理與提供範例，開發上不太方便。

以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Canvas-datagrid Demo</title>

    <!--使用lodash-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

    <!--使用canvas-datagrid-->
    <script src="https://tonygermaneri.github.io/canvas-datagrid/dist/canvas-datagrid.debug.js"></script>

</head>
<body style="margin:0; padding:0;">

    <div id="grid" style="width:1400px; height:600px;"></div>

    <script type="text/javascript">

        //產生欄位名稱
        let cs = _.map(_.range(1, 11), function (k) {
            return 'v' + k;
        });

        //產生測試資料
        let data = _.map(_.range(1, 1001), function (k) {
            let r = {
                id: k,
            };
            _.each(cs, function (c) {
                r[c] = _.random(0, 100, true);
            });
            return r;
        });

        //grid, canvas-datagrid初始化物件
        let grid = canvasDatagrid({
            parentNode: document.getElementById('grid'),
            borderDragBehavior: 'move',
            allowMovingSelection: true,
            columnHeaderClickBehavior: 'select',
            allowFreezingRows: true,
            allowFreezingColumns: true,
            allowRowReordering: true,
            tree: false,
            debug: false,
            showPerformance: false,
            editable: true,
            multiLine: true,
            data: data,
        });

        //設定寬高
        grid.style.height = '100%';
        grid.style.width = '100%';

        //監聽編輯事件
        grid.addEventListener('beforeendedit', function (e) {
            console.log('e.cell', e.cell)
            console.log('e.cell.header', e.cell.header)
            console.log('e.cell.rowIndex', e.cell.rowIndex)
            console.log('e.oldValue', e.oldValue)
            console.log('e.newValue', e.newValue)
            //因目前版本無法針對各欄位指定是否能編輯，故得要由編輯事件處理
            //因無法複製貼上多儲存格值，故不考慮多值變更情形
        });

        //若封裝成組件，記得解除監聽事件
        //grid.removeEventListener('beforeendedit');
        
    </script>

</body>
</html>

載入後畫面為︰



#canvas-datagrid, Javascript, canvas

留言

張貼留言