Project

General

Profile

Advanced Table

ตัว module อยู่ที่ amgApi.coreLib.analytics.advancedTable2

Quick start
  1. การเรียกใช้โดยการส่งข้อมูล in-memory ตรงๆ
    const tableContainer = document.querySelector('.table-container')
    tableController = await amgApi.coreLib.analytics.advancedTable2({
        container: tableContainer,
        data: [
            ['col1', 'col2', 'col3', 'col4'],
            ["c1r1", "c2r1", "c3r1", "1"],
            ["c1r2", "c2r2", "c3r2", "2"],
            ["c1r3", "c2r3", "c3r3", "3"],
            ["c1r4", "c2r4", "c3r4", "4"],
            ["c1r5", "c2r5", "c3r5", "5"],
            ["c1r6", "c2r6", "c3r6", "6"]
        ],
    //columnLabel : ['customcol1', 'customcol2', 'customcol3', 'customcol4'],
    //init : false
    })
    
  2. การเรียกใช้โดยการดึงข้อมูลจาก Sqlite
    const tableContainer = document.querySelector('.table-container')
    tableController = await amgApi.coreLib.analytics.advancedTable2({
        container: tableContainer,
        data: {
            callback_getData: function (config, callback) {
                amgApi.sqlite.all({
                    sql: `SELECT * FROM ${tableName} ${config.getFullSQL()}`
                }, (getDataResponse) => {
                    callback(getDataResponse.rows)
                })
            },
            callback_getColumn: function (columnName, callback) {
                amgApi.sqlite.all({
                    sql: `SELECT ${columnName} FROM ${tableName}`
                }, (getDataResponse) => {
                    callback(getDataResponse.rows)
                })
            },
            callback_getCount: function name(config, callback) {
                amgApi.sqlite.all({
                    sql: `SELECT COUNT(*) FROM ${tableName} ${config.getWhereSQL()} `
                }, (countResponse) => {
                    const rowCount = Object.values(countResponse.rows[0])[0]
                    callback(rowCount)
                })
            }
        }
    })
    
  3. การเรียกใช้โดยปิด feature : checkbox คอล๊มปื , columnFilter , sort , responsive( พับคอลัมป์เมื่อย่อจอ )
    const tableContainer = document.querySelector('.table-container')
    tableController = await amgApi.coreLib.analytics.advancedTable2({
        container: tableContainer,
        data: [
            ['col1', 'col2', 'col3', 'col4'],
            ["c1r1", "c2r1", "c3r1", "1"],
            ["c1r2", "c2r2", "c3r2", "2"],
            ["c1r3", "c2r3", "c3r3", "3"],
            ["c1r4", "c2r4", "c3r4", "4"],
            ["c1r5", "c2r5", "c3r5", "5"],
            ["c1r6", "c2r6", "c3r6", "6"]
        ]
    }, {
        tableUI: {
            checkbox: false,
            sortFilter: false,
            columnFilter: false,
            responsive : false
        }
    })
    
  4. การเรียกใช้โดยการเพิ่มปุ่มที่ button bar ด้านบนตาราง
    const tableContainer = document.querySelector('.table-container')
    tableController = await amgApi.coreLib.analytics.advancedTable2({
        container: tableContainer,
        data: [
            ['col1', 'col2', 'col3', 'col4'],
            ["c1r1", "c2r1", "c3r1", "1"],
            ["c1r2", "c2r2", "c3r2", "2"],
            ["c1r3", "c2r3", "c3r3", "3"],
            ["c1r4", "c2r4", "c3r4", "4"],
            ["c1r5", "c2r5", "c3r5", "5"],
            ["c1r6", "c2r6", "c3r6", "6"]
        ]
    }, {
        buttonBar: {
            additionButton: [{
                id: "add1",
                side: "right",
                getDOM: function () {
                    return $(`<button class="btn btn-secondary btn-sm " data-toggle="title" title="addition 1" >ADD!</button>`)[0]
                }
            }]
        },
        tableUI: {
            checkbox: false,
            sortFilter: false,
            columnFilter: false,
            responsive: false
        }
    })
    
  5. การปรับหน้าตาของตาราง
    const tableContainer = document.querySelector('.table-container')
    tableController = await amgApi.coreLib.analytics.advancedTable2({
        container: tableContainer,
        data: [
            ['col1', 'col2', 'col3', 'col4'],
            ["c1r1", "c2r1", "c3r1", "1"],
            ["c1r2", "c2r2", "c3r2", "2"],
            ["c1r3", "c2r3", "c3r3", "3"],
            ["c1r4", "c2r4", "c3r4", "4"],
            ["c1r5", "c2r5", "c3r5", "5"],
            ["c1r6", "c2r6", "c3r6", "6"]
        ]
    }, {
        buttonBar: {
            additionButton: [{
                id: "add1",
                side: "right",
                getDOM: function () {
                    return $(`<button class="btn btn-secondary btn-sm " data-toggle="title" 
                                        title="addition 1" >
                                    ADD!
                            </button>`)[0]
                }
            }]
        },
        tableUI: {
            checkbox: false,
            sortFilter: false,
            columnFilter: false,
            responsive: {
                toggleIcon: {
                    expand: () => $(`<span ><i class="fas fa-plus"></i></span>`)[0]
                },
                visibleColIndex: [2],
                collapse: {
                    container: () => $(`<div class="row bg-danger border-top pt-2 mt-2 ml-0" ></div>`)[0],
                    col: () => $(`<div class="col-6 bg-success font-weight-bold"></div>`)[0],
                    row: () => $(`<div class="col-6 bg-warning"></div>`)[0]
                }
            },
            table: ({
                preElement,
                model
            }) => {
                return $('<div class="card "></div>')[0]
            },
            header: {
                container: ({
                    preElement,
                    model
                }) => {
                    return $('<div class="card-header text-center tableUI-sticky-top p-0  bg-success" ></div>')[0]
                },
                colContainer: ({
                    preElement,
                    data,
                    model
                }) => {
                    return $('<div class="row "></div>')[0]
                },
                col: ({
                    preElement,
                    data,
                    colIndex,
                    model
                }) => {
                    return $(`<div class="col border pt-2" >${data}</div>`)[0]
                }
            },
            body: {
                container: ({
                    preElement,
                    model
                }) => {
                    return $('<div class="card-body bg-dark"></div>')[0]
                },
                rowContainer: ({
                    preElement,
                    data,
                    rowIndex,
                    model
                }) => {
                    return $('<div class="row  pb-4 bg-danger" ></div>')[0]
                },
                row: ({
                    preElement,
                    data,
                    rowIndex,
                    colIndex,
                    model
                }) => {
                    const elementContainer = $(` <div class="col border rounded text-center px-3 py-2 bg-white text-dark align-middle" 
                                                    style="width:100px;cursor:pointer;">
                                                        <span>${data}</span>
                                                </div>`)
                    elementContainer.hover((e) => {
                        elementContainer.toggleClass(["bg-dark", "text-white"])
                        elementContainer.toggleClass(["bg-white", "text-dark"])
                    })
                    return elementContainer[0]
                }
            }
        }
    })
    

    Parameter
    ในการใช้งาน advTable จะมีพารามีเตอร์เป็น Object 2 ตัว
    advancedTable2({}, {})
    
    • พารามีเตอร์ตัวแรก
      • ดูแลการใช้งานทั่วไป
      • จะมี property 3 ตัว
        advancedTable2({
            container,
            data,
            initialFilter
        }, {})
        
      • container
        • เป็นตัวครอบของตาราง โดยขนาดของตารางจะเท่ากับความสูง,กว้างของตัว container
        • input : DOM
      • data
        • เป็นแหล่งที่มาของข้อมูล โดยจะมีสองทางเลือกคือแบบ in-memory หรือแบบ custom
          โดยแบบ in-memory จะรับข้อมูลมาตรงๆครั่งเดียว แล้วให้ตัวตารางจัดการ sort , filter ข้อมูลเอง
          ส่วนแบบ custom จะต้องเตรียม callback 3 ตัวเพื่อให้ตารางเรียกใช้งาน
          ได้แก่ callback_getData, callback_getColumn, callback_getCount
          โดยใน callback จะมีข้อมูล config ต่างๆเตรียมให้ผ่านพารามิเตอร์
          ซึ่งใน config จะมีตั้งแต่ข้อมูลที่ abstract มาเป็น SQL หรือ ฟังก์ชั่น Test ต่างๆ
          ไปจนถึงข้อมูลระดับล่างอย่าง โหมดการ sort, คอลัมป์ที่ทำการ sort , คีย์เวิร์คที่ใช้ในการ search
        • In-memory
          • Input แบบแรก : [ [],[],[] ]
            [
                ['col1', 'col2', 'col3', 'col4'],
                ["c1r1", "c2r1", "c3r1", "1"],
                ["c1r2", "c2r2", "c3r2", "2"],
                ["c1r3", "c2r3", "c3r3", "3"],
                ["c1r4", "c2r4", "c3r4", "4"],
                ["c1r5", "c2r5", "c3r5", "5"],
                ["c1r6", "c2r6", "c3r6", "6"]
            ]
            
          • Input แบบที่สอง : [ {},{},{} ]
            [
                {col1: "c1r1",col2: "c2r1",col3: "c3r1",col4: "1"},
                {col1: "c1r2",col2: "c2r2",col3: "c3r2",col4: "2"},
                {col1: "c1r3",col2: "c2r3",col3: "c3r3",col4: "3"}
            ]
            
        • custom
          • input : จะเป็น callback 3 ตัว
            {
                callback_getData: function (config, callback) {},
                callback_getColumn: function (columnName, callback) {},
                callback_getCount: function name(config, callback) {}
            }
            
            • callback_getData: function (config, callback) {},
              • config
                หากใช้งานฐานข้อมูลที่รองรับ sql ทางตัว config จะมี getWhereSQL และ getFullSQL พร้อมไว้ให้
                โดย getWhereSQL จะเป็นเงื่อนไข WHERE ของ sql ที่สร้างมาจาก filter ต่างๆของตัวตาราง
                getFullSQL จะเป็นการรวมเงื่อนไข WHERE จาก getWhereSQL และ เงื่อนไข ORDER BY , LIMIT ,OFFSET เพื่อสามารถดึงข้อมูลได้เลย
                {
                    offset: <Number>,
                    rowPerPage: <Number>,
                    isFilterChange: <Boolean>,
                    getWhereSQL: <Function> ,
                    getFullSQL: <Function>,
                    filter: {
                        haveFilter: <Boolean>,
                        filterNumber: <Number>,
                        columnFilter: {
                            excludedValue: <Array[String]>,
                            SQL: <String>,
                            tester: <Function>,
                            haveFilter: <Boolean>
                        },
                        searchFilter: {
                            mode: <Number>,
                            modeString: <String>,
                            keyword: <Array[String]>,
                            SQL: <String>,
                            tester: <Function>,
                            haveFilter: <Boolean>
                        },
                        advFilter: {
                            setting: <Object>,
                            SQL: <String>,
                            tester: <Function>,
                            haveFilter: <Boolean>
                        }
                
                    },
                    sort: {
                        order: <String>,
                        mode: <String>,
                        colIndex: <Number>,
                        colName: <String>,
                        dateFormat: <Number>,
                        SQL:  <String>,
                        sort: <Function>
                        isSort: <Boolean>,
                    }
                }
                
              • callback
                ใช้เพื่อส่งข้อมูลไปให้ตาราง
                callback_getData: function (config, callback) {
                        //fetch data
                        callback(data)
                }
                

                โดยข้อมูลจะอยู่ในรูปแบบ ],[],[ หรือ [{},{},{}]
                ปล. ดูตัวอย่างได้จาก input ของ in-memory
            • callback_getColumn: function (columnName, callback) {}
              • columnName : คือชื่อของคอลัมป์
              • callback : รับข้อมูลเป็น [{},{},{}]
                // columnName = "col2" 
                [
                    {col2: "c2r1"},
                    {col2: "c2r2"},
                    {col2: "c2r3"},
                    {col2: "c2r4"},
                    {col2: "c2r5"},
                    {col2: "c2r6"}
                ]
                
            • callback_getCount: function name(config, callback)
              • config : จะมีเหมือน callback_getData
                เพราะต้องมีข้อมูลการฟิลเตอร์ เพื่อหาจำนวนแถวที่ถูกต้อง
                กรณีที่ใช้กับฐานข้อมูลที่รองรับ sql ให้ใช้ config.getWhereSQL()
              • callback : รับตัวมูลเป็วตัวเลขจำนวนแถว
                    const tableName = "GW000001" 
                    callback_getCount: function name(config, callback) {
                        amgApi.sqlite.all({
                            sql: `SELECT COUNT(*) FROM ${tableName} ${config.getWhereSQL()} `
                        }, (countResponse) => {
                            const rowCount = Object.values(countResponse.rows[0])[0]
                            callback(rowCount)
                        })
                    }
                
    • พารามีเตอร์ตัวที่สอง
      • ดูแลการปรับแต่งตัว advTable
      • จะมี property 2 ตัว
        advancedTable2({}, {
            buttonBar,
            tableUI
        })
        
      • buttonBar
        มี property 2 ตัว
        • additionButton
          • ไว้เพิ่ม custom button
          • Input : Array of { id : <String>,side <"left" / "right"> ,getDOM : <Funtion : DOM>}
            additionButton: [{
                    id: "add1",
                    side: "right",
                    getDOM: function () {
                        return $(`<button class="btn btn-secondary btn-sm " data-toggle="title"title="addition 1" > ADD!</button>`)[0]
                    }
                },
                {
                    id: "add2",
                    side: "left",
                    getDOM: function () {
                        return $(`<button class="btn btn-success  " data-toggle="title" title="addition 2" >create!</button>`)
                            .on('click', () => {
                                alert("create!")
                            })[0]
                    }
                }
            ]
            
        • arrangement
          • ใช้จัดลำดับของปุ่ม และเลือกที่จะแสดงหรือไม่แสดง
          • มีค่า default คือ ["sortAlpha","sortNumber","sortFormat", "search", "advFilter", "hideColumn", "downloadCSV", "exportConfig", "importConfig"]
            แต่ละค่าคือ id ของปุ่ม ซึ่งในที่นี้จะเป็นค่า id ของปุ่มที่มีไว้อยู่แล้ว
            หากต้องการสลับ หรือเอาออก ก็ทำได้ที่ Array นี้เลย
          • หากเพิ่มปุ่มที่ additionButton แล้วไม่ได้ใส่ id ของปุ่มใน arrangement ตัวตารางจะ push id เข้า array ของ arrangement เอง
            แต่หากต้องการกำหนดลำดับก็เอาใส่ใน array ของ arrangement ได้เลย แต่ต้องมี id ของปุ่มตัวเดิมด้วย ไม่งั้นจะไม่แสดงปุ่มที่ไม่มีชื่อไอดีในนี้
      • tableUI
        มี property 7 ตัว
        tableUI: {
                checkbox: <Boolean>,
                sortFilter:  <Boolean>,
                columnFilter:  <Boolean>,
                responsive:  <Boolean || Object>,
                table :   <Function>,
                header :<Object>,
                body : <Object>
                }
        }