Advanced Table¶

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

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>
            }
    }