Advanced Table Widget¶

• Data (ซ่อนจากหน้าพาลามิเตอร์)
  ใช้ตั้งค่าการแสดงผลของข้อมูล
  • Callback API
    • ID = “Data”
    • getParameter ได้รับข้อมูลข้อมูลที่แสดงบนตาราง ในรูปแบบ csv ( [ [],[],[] ] )
      

      [["col1","col2"],["1","1"],["2","2"],["31","13"],["asf1","asf1"]]
      

    • setParameter ตั้งค่าข้อมูลให้กับตาราง, เลือกแสดงคอลัมป์, เปลี่ยนชื่อคอลัมป์
      • ตั้งค่าข้อมูลโดยตรง (in-memory)
        

        
        // ตั้งค่าข้อมูลโดยตรง
        setParameter("table","Data",{headers:["col1","col2"],data: [["1","1","1","1"],["2","2","12","12"],["31","13","31","31"],["asf1","asf1","ff1","1ff"]]})
        
        // ตั้งค่าข้อมูลโดยดึงข้อมูลมาจากฐานข้อมูล แล้วเลือกแสดงเฉพาะคอลัมป์ที่ชื่อ "ชื่อเรือ"และ "ประเภทเรือ" 
        AmgCnt.SQLite.read.all({
            sql: `SELECT * FROM "ข้อมูลตารางคนขอเข้าประเทศ2"`,
            params: []
        }, (res) => {
            setParameter("table", "Data", {
                headers: ["ชื่อเรือ", "ประเภทเรือ"],
                data: res.rows
            })
        });
        
        // ตั้งค่าข้อมูลดึงข้อมูลมาจากฐานข้อมูล แสดงทุกคอลัมป์ แต่มีการเปลี่ยนชื่อคอลัมป์ จาก "ชื่อเรือ" เป็น "header label ชื่อเรือ" และ "จังหวัด" เป็น "จาาหวัดด" 
        AmgCnt.SQLite.read.all({
            sql: `SELECT * FROM "ข้อมูลตารางคนขอเข้าประเทศ2"`,
            params: []
        }, (res) => {
            setParameter("table", "Data", {
                headerLabels: [{colName: "ชื่อเรือ",label: "header label ชื่อเรือ"},
                               {colName: "จังหวัด",label: "จาาหวัดด"}],
                data: res.rows
            })
        });
        

      • ตั้งค่าข้อมูลโดยการกำหนดฐานข้อมูล
        

        // ตั้งค่าข้อมูลให้ตารางดึงข้อมูลจาก ฐานข้อมูล Sqlite ชื่อ  "ข้อมูลตารางคนขอเข้าประเทศ2"   
        // โดยทำการซ่อนคอลัมป์ชื่อ "ท่าเรือสุดท้ายก่อนเข้าไทย" 
        setParameter("table", "Data", {
            tableName: "ข้อมูลตารางคนขอเข้าประเทศ2",
            hiddenHeaders: ["ท่าเรือสุดท้ายก่อนเข้าไทย"]
        })
        
        // ตั้งค่าข้อมูลให้ตารางดึงข้อมูลจาก ฐานข้อมูล Sqlite ชื่อ  "ข้อมูลตารางคนขอเข้าประเทศ2"   
        // โดยทำการซ่อนคอลัมป์ชื่อ "ท่าเรือสุดท้ายก่อนเข้าไทย"   และเปลี่ยนชื่อคอลัมป์ "ชื่อเรือ" เป็น "GGG" 
        setParameter("table", "Data", {
            tableName: "ข้อมูลตารางคนขอเข้าประเทศ2",
            headerLabels: [{
                colName: "ชื่อเรือ",
                label : "GGG" 
            }],
            hiddenHeaders: ["ท่าเรือสุดท้ายก่อนเข้าไทย"]
        })
        
        // ตั้งค่าข้อมูลให้ตารางดึงข้อมูลจาก ฐานข้อมูล Sqlite ชื่อ  "ข้อมูลตารางคนขอเข้าประเทศ2"    
        // โดยทำการซ่อนคอลัมป์ชื่อ "ท่าเรือสุดท้ายก่อนเข้าไทย"   และแสดงเฉพาะคอลัมป์ "ชื่อเรือ" ซึ่งจะถูกเปลี่ยนชื่อที่แสดงเป็น "ชื่อเรือ (custom)" 
        setParameter("table","Data",{tableName : "ข้อมูลตารางคนขอเข้าประเทศ2" 
                                     ,headers:[{colName : "ชื่อเรือ",label:"ชื่อเรือ (custom)"}]
                                     ,hiddenHeaders:["ท่าเรือสุดท้ายก่อนเข้าไทย"]})
        
        // ตั้งค่าข้อมูลให้ตารางดึงข้อมูลจาก ฐานข้อมูล Clickhouse ชื่อ "FARMER_ONE_AGRICULTUREAREA"  
        setParameter("table","Data",{tableName : "FARMER_ONE_AGRICULTUREAREA",database:"clickhouse"})
        
        // ตั้งค่าข้อมูลให้ตารางดึงข้อมูลจาก ฐานข้อมูล Clickhouse ชื่อ "FARMER_ONE_AGRICULTUREAREA"  
        // โดยแสดงเฉพาะคอลัมป์  "AREA_CODE" และ "ZONE" 
        setParameter("table","Data",{tableName : "FARMER_ONE_AGRICULTUREAREA",database:"clickhouse",headers:["AREA_CODE","ZONE"]})
        
        // ตั้งค่าข้อมูลให้ตารางดึงข้อมูลจาก ฐานข้อมูล Clickhouse ชื่อ "FARMER_ONE_AGRICULTUREAREA"  
        // โดยแสดงทุกคอลัมป์ แต่เปลี่ยนชื่อคอลัมป์  "AREA_CODE" เป็น "AAARRREEEEAAAA__CCOOODDEE"   และเปลี่ยนชื่อคอลัมป์ "ZONE" เป็น  "Zone header labels" 
        setParameter("table", "Data", {
            tableName: "FARMER_ONE_AGRICULTUREAREA",
            database: "clickhouse",
            headerLabels: [{
                colName: "AREA_CODE",
                label: "AAARRREEEEAAAA__CCOOODDEE" 
            }, {
                colName: "ZONE",
                label: "Zone header labels" 
            }]
        })
        

      • ตั้งค่าข้อมูลด้วย Query statement (SQL)
        

        
        // กำหนดข้อมูลจาก Sqlite 
        setParameter("table", "Data", { sql: "SELECT * FROM ข้อมูลตารางคนขอเข้าประเทศ2 LEFT JOIN tool"})
        
        // กำหนดข้อมูลจาก Clickhouse
        setParameter("table","Data",{sql : `SELECT * FROM "FARMER_ONE_AGRICULTUREAREA" LIMIT 100`,database:"clickhouse"})
        
        // กำหนดข้อมูลจาก Sqlite  โดนกำหนดให้แสดงเฉพาะคอลัมป์ "ชื่อเรือ", "IMO" และ "เครื่องมือ" 
        setParameter("table", "Data", {
            sql: "SELECT * FROM ข้อมูลตารางคนขอเข้าประเทศ2 LEFT JOIN tool",
            headers: ["ชื่อเรือ", "IMO", "เครื่องมือ"]
        })
        

• Selected (ซ่อนจากหน้าพาลามิเตอร์)
  ใช้ตั้งค่า checkbox ของตัวตาราง
  • Callback API
    • ID = “Selected”
    • getParameter รับข้อมูลของแถวที่ถูกติ๊ก
      

      {"data":[{"col1":"31","col2":"13"}],"headers":["col1","col2"]}
      

    • setParameter เลือกแถวที่จะติ๊ก Checkbox หรือทำงานรีเซ็ทการติ๊กทั้งหมด
      

      // เลือกติ๊กแถวที่ 1,2,4
      setParameter("table","Selected",[1,2,4])
      
      // รีเซิทการติ๊กทั้งหมด
      setParameter("table","Selected",null)
      

• RowPerPage
  ใช้ตั้งค่าจำนวนแถวที่แสดงในแต่ละหน้าของตาราง
  • Callback API
    • ID = “RowPerPage”
    • getParameter รับข้อมูลจำนวนแถวต่อหน้าทั่กำลังใช้
    • setParameter เลือกจำนวนแถวที่จะแสดง โดยมีตัวเลือกได้แก้ 10, 50, 100, 200, 500, 1000
      

      // กำหนดให้แสดงข้อมูล 100 แถวต่อหน้า
      setParameter("table","RowPerPage",100)
      

• CellStyle
  ใช้ปรับแต่งหน้าตาของตาราง
  • Callback API
    • ID = “CellStyle”
    • setParameter การตั้งค่ามีสองแบบดังนี้
      แบบแรก setStyle ของ cell ในแต่ละ row หรือก็คือตัวใน tag < td >< /td >
      
      

      
      setParameter("table", "CellStyle", [{
             // ถ้าจะเลือก checkbox ก็ colName : "_checkbox$" 
      
             // เลือกทั้งหมด ก็ colName : null หรือไม่ตั้งค่า colName
      
             colName: "",
             style: {
                    "text-align": "center",
                    "background-color": "wheat" 
             },
             class: ["text-center", "bg-light"],
             onCreateDOM: ({
                    preElement,
                    element,
                    data,
                    colName,
                    rowIndex,
                    colIndex,
                    allData,
             }) => {
                    // preElement กับ element อันเดียวกัน แค่มีไว้ซัพพอร์ตตัวเก่าเฉยๆ
             }
      }])
      

      
      แบบสอง custom เต็มที่จะแต่งส่วนไหนของตาราง
      

      setParameter("table", "CellStyle", {
             // <table></table>
             table: {
                    style: {
                           "text-align": "center",
                           "background-color": "wheat" 
                    },
                    class: ["text-center", "bg-light"],
                    onCreateDOM: ({
                           preElement,
                           element,
      
                    }) => {}
             },
      
             header: {
                    // <thead></thead>
                    container: {
                           style: {},
                           class: [],
                           onCreateDOM: ({
                                  preElement,
                                  element,
      
                           }) => {}
                    },
                    // <tr></tr>
                    colContainer: {
                           style: {},
                           class: [],
                           onCreateDOM: ({
                                  preElement,
                                  element,
                                  allData,
      
                           }) => {}
                    },
                    // <th></th>
                    col: {
                           style: {},
                           class: [],
                           onCreateDOM: ({
                                  preElement,
                                  element,
                                  colName,
                                  colIndex,
                                  allData,
                           }) => {}
                    },
             },
             body: {
                    // <tbody></tbody>
                    container: {
                           style: {},
                           class: [],
                           onCreateDOM: ({
                                  preElement,
                                  element,
                           }) => {}
                    },
                    // <tr></tr>
                    rowContainer: {
                           style: {},
                           class: [],
                           onCreateDOM: ({
                                  preElement,
                                  element,
                                  allData,
                                  rowIndex,
      
                           }) => {}
                    },
                    // <td></td>
                    row: {
                           style: {},
                           class: [],
                           onCreateDOM: ({
                                  preElement,
                                  element,
                                  data,
                                  colName,
                                  rowIndex,
                                  colIndex,
                                  allData,
                           }) => {}
                    },
             }
      })
      

      
      

      // ตั้งค่า style และ class ให้กับcell ในทุกคอลัมป์
      setParameter("table", "CellStyle", [{
          style: {
              "text-align": "right",
              "background-color": "wheat" 
          },
          class: ["text-success"]
      }])
      
      // ตั้งค่า style และ class ให้กับcell ที่อยู่ภายใต้คอลัมป์ "col1" 
      setParameter("table", "CellStyle", [{
          colName: "col1",
          style: {
              "text-align": "right",
              "background-color": "wheat" 
          },
          class: ["text-danger"],
      }])
      
      // ผสมการตั้งเฉพาะเจาะจง และการตั้งทั้งหมด
      setParameter("table", "CellStyle", [
      //ตั้งค่า style ให้ cell ภายใต้คอลัมป์ชื่อ "col1" 
            {
              colName: "col1",
              style: {"text-align": "left","background-color": "red"},
          }, 
      //ตั้งค่า style ให้ cell ภายใต้คอลัมป์ชื่อ "col2" 
            {
              colName: "col2",
              style: {"text-align": "center","background-color": "blue"},
          },
      // กำหนด class ให้ทุก cell ในทุกคอลัมป์
          {
              class: ["text-light"]
          }
      ])
      
      // ตั้งให้ทุกคอลัมป์มี class "text-success" 
      // และทำการเพิ่ม logic ว่าหากข้อมูลมีค่ามากกว่า 5 ให้ทำการแสดงข้อมูลใน Cell ว่า "Greater Than 5" 
      setParameter("table", "CellStyle", [{
             class: ["text-success"],
             onCreateDOM: ({
                    preElement,
                    element,
                    data,
                    colName,
                    rowIndex,
                    colIndex,
                    allData,
             }) => {
                   if(data > 5){
                          $(element).text("Greater Than 5")
                     }
             }
      }])
      

// กำหนดหน้าตาของตารางทั้งหมด ในแต่ละส่วน ตามที่ต้องการ
setParameter("table", "CellStyle", {
    // <table></table>
    table: {
        class: ["table-hover", "text-left"],
    },

    header: {
        // <thead></thead>
        container: {

            onCreateDOM: ({
                preElement,
                element,

            }) => {
                return $('<thead ></thead>')[0]
            }
        },
        col: {
            style: {
                "box-shadow": "none",
                "border-top": "none",
                "background-color": "white" 
            },
            class: ["lead"],

        },
    }

})

• Update (ซ่อนจากหน้าพาลามิเตอร์)
  ใช้เรียกให้ตารางทำการอัพเดตข้อมูลใหม่
  • Callback API
    • ID = “Update”
    • setParameter สั่งให้ตารางทำการอัพเดตข้อมูลใหม่
      

      setParameter("table","Update")
      

• Show Search Box
  ตั้งค่าเริ่มต้นการแสดงกล่องค้นหา

• Show Check Box
  ตั้งค่าเริ่มต้นว่าให้ตารางที่คอลัมป์ Select (ช่องไว้ติ๊ก ) ไหม

• ParentID
  ใช้งานกับ toolsContainer เพื่อเลือก ID ของ widget ที่จะรับข้อมูล