Project

General

Profile

Advanced Table Widget

Parameter
  • 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 ที่จะรับข้อมูล

Also available in: PDF HTML TXT