[前端] 表格: ag-Grid

日期：
ag-Grid
https://github.com/ag-grid/ag-grid

ag-Grid web
https://www.ag-grid.com/

ag-Grid demo
https://www.ag-grid.com/example.php#/

企業級 JavaScript 資料網格 ag-Grid
https://www.oschina.net/p/ag-grid

ag-Grid是一個企業級的Javascript資料網格，提供開發者可用於構建企業級的應用，例如報告和資料分析，業務流程和資料登錄的一個資料表格。ag-Grid的性能非常好，它可以處理大量複雜資料，並提供先進的過濾和搜索，且提供了開箱即用的CRUD操作，如果需要創建自己的編輯器，可以通過使用您喜歡的框架來進行編輯文檔，並創建自己的編輯器。ag-Grid還可以根據您的業務情況，以不同的方式更新網格中的資料，因此您的更新總是能立即推送到您的用戶端口。

以下為官方vue版

Get Started with ag-Grid in Your Vue Project
https://www.ag-grid.com/vue-getting-started/


以下為單html檔測試範例，其內vue組件為自己封裝︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>ag-Grid Vue Demo</title>

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

    <!--使用ag-grid-->
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

</head>
<body>

    <div id="app">
        <vueagg v-bind:s="s"></vueagg>
    </div>
    <pre id="dd"></pre>

    <script>

        console.log = function (c, v) {
            //覆蓋log, 使用JSON.stringify輸出至網頁
            document.querySelector('#dd').innerHTML = c + ': ' + JSON.stringify(v, null, 4);
        }

        //掛載ag-Grid Vue組件
        let opt = {
            template: '<div id="dagg" class="ag-theme-balham"></div>',
            props: {
                s: {
                    type: Object
                }
            },
            data: function () {
                return {
                    columnDefs: [],
                    rowData: [],
                    agg: null
                };
            },
            mounted: function () {
                let vo = this;

                //ele
                let ele = document.querySelector('#dagg');

                //optag
                let optag = {
                    columnDefs: vo.s.columnDefs,
                    //rowSelection: 'multiple',
                    enableRangeSelection: true,
                    rowData: vo.s.rowData,
                    onCellValueChanged: function () {
                        console.log('onCellValueChanged', vo.s.rowData)
                    },
                };

                //agg
                let agg = new agGrid.Grid(ele, optag);

                //save
                vo.agg = agg;

            },
            beforeDestroy: function () {
                let vo = this;

                //destroy
                vo.agg.destroy();

            },
            computed: {
            },
            methods: {
            },
        }
        Vue.component('vueagg', opt)

        new Vue({
            el: '#app',
            data: {
                s: {
                    columnDefs: [
                        { headerName: "Make", field: "make", sortable: true, filter: true, editable: true }, //, checkboxSelection: true
                        { headerName: "Model", field: "model", sortable: true, filter: true, editable: true },
                        { headerName: "Price", field: "price", sortable: true, filter: true, editable: true },
                        { headerName: "Dresp", field: "dsp", sortable: true, filter: true, editable: true },
                    ],
                    rowData: [
                        { make: "Toyota", model: "Celica", price: 35000, dsp: '12jil3' },
                        { make: "Ford", model: "Mondeo", price: 32000, dsp: 'xzh8us' },
                        { make: "Porsche", model: "Boxter", price: 72000, dsp: '599uslduf' }
                    ],
                }
            },
        })

    </script>

</body>
</html>


載入後畫面為︰



#ag-Grid, Javascript, table, grid, CRUD, vue

留言

張貼留言