Tag Archive ดรอปดาวบ๊อกซ์

Joget: สร้าง Chained select box

บางครั้งก็ต้องสร้างฟอร์มโดยเลือกข้อมูลที่สัมพันธ์กันเช่น ถ้าเค้าตอบมาว่าผู้ชาย คำนำหน้านามของเค้าคงไม่ใช่นางสาว การที่ select box ฉลาดพอที่จะไม่ถามว่า คุณคือนาง หรือ นางสาว ผู้ใช้จะใช้เวลาในการกรอกข้อมูลน้อยลง

ทำได้โดยการสร้าง Chained select box

  1. ในหน้า form builder ให้ลาก Select Box มาในตำแหน่งที่ต้องการ อาจจะอ่าน Joget: สร้าง select box จาก database ถ้ายังไม่เคยสร้างซีเล็คบ๊อกซ์
  2. คลิก Edit icon หลัง input
  3. สร้าง Grouping โดย
    • ถ้าสร้าง options แบบ Options (Hardcoded) ให้ใส่ Grouping โดยมีค่าเท่ากับ ค่าใน parent input
    • ถ้าสร้าง options แบบ JDBC Binder ให้ query โดยมี
      • Column ที่ 1 จะถูกใช้เป็น value ใน แต่ละ option
      • Column ที่ 2 จะเป็น label
      • Column ที่ 3 จะถูกใช้เป็น Grouping ที่จะรวม option ให้เป็นกลุ่ม เป็น Grouping โดยมีค่าเท่ากับ ค่าใน parent input

        SELECT
        id AS value, c_name AS label, c_sex_id AS grouping
        FROM
        app_fd_titles
        ORDER BY label ASC
    • คลิก next
    • คลิก next
    • Field ID to control available options based on Grouping ให้ใส่ id ของ parent input เช่น ใส่ sex_id โดย sex_id เป็น dropdown box ที่มีตัวเลือก ชาย = 2 หญิง = 1 ถ้าต้องการให้ option ไหนแสดงเมื่อ sex_id ถูกเลือกว่าเป็นผู้ชาย (2) ก็ให้ grouping มีค่าเท่ากับ 2

    ดังนั้นค่าในตารางคำนำหน้านาม ควรจะเป็นตามรูปแบบ

    app_fd_titles
    Id label Grouping
    Please select
    1 Miss 1
    2 Mr 2
    3 Mrs 1
    4 Ms 1
    5 Mx 1

    เมื่อ sex_id มีค่าเท่ากับ 1 joget จะแสดง แต่ตัวเลือก Mr เท่านั้น

    Noteแต่ถ้า Grouping ไม่มีค่า จะแสดงออกมาด้วย เหมือนที่แสดงตัวเลือก Please select

    อ่านเพิ่มเติม ส่วนตัว: Joget: สร้าง select box จาก database

Joget: สร้าง select box จาก database

การสร้างตัวเลือกใน joget ไม่ควรใช้วิธีกำหนด ตัวเลือกในแต่ละฟอร์ม เพราะว่าถ้ามีการแก้ตัวเลือก จะต้องไปหาว่า dropdown box ตัวนี้มีอยู่ในฟอร์มไหนบ้าง แต่ถ้าเราดึงค่ามาจากดาต้าเบสแค่ไปเพิ่ม / แก้ไขในตารางที่เกี่ยวข้อง เทสซักหน้า ก็เสร็จแล้ว

  1. ในหน้า form builder ให้ลาก Select Box มาในตำแหน่งที่ต้องการ
  2. คลิก Edit icon หลัง input
  3. กรอกข้อมูล
    • ID จะใข้เป็น id ของ input และจะสร้าง column ตามรูปแบบ C_{id} ในตารางที่ผูกกับฟอร์มที่เราวาง input ในดาต้าเบสด้วย
    • Label เป็นฉลากให้กับตัว input
    • Or Choose Options Binder เลือกเป็น JDBC Binder
  4. คลิก next
  5. กรอกข้อมูล
    • Datasource เลือก Default Datasource
    • ติ๊ก Add Empty Option เพื่อที่จะได้ใส่ option ที่ไม่ได้เลือกอะไร ที่ yii จะเรียกว่า prompt นั่นเอง จากนั้นให้กรอก Empty Option Label ที่จะแสดงเป็น label ของ option เช่น Please select
    • SQL SELECT Query ให้กรอก query โดย
      • Column ที่ 1 จะถูกใช้เป็น value ใน แต่ละ option
      • Column ที่ 2 จะเป็น label

      ตัวอย่าง

      SELECT
      id AS value, c_name AS label
      FROM
      app_fd_titles
      ORDER BY c_name ASC

ข้อมูลตัวอย่าง

CREATE TABLE `app_fd_titles` (
`id` int(2) unsigned NOT NULL,
`dateCreated` datetime DEFAULT NULL,
`dateModified` datetime DEFAULT NULL,
`createdBy` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`createdByName` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`modifiedBy` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`modifiedByName` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL,
`c_name` varchar(255) DEFAULT NULL,
`c_sex_id` int(1) unsigned DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (1,NULL,NULL,NULL,NULL,NULL,NULL,'Miss',1);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (2,NULL,NULL,NULL,NULL,NULL,NULL,'Mr',2);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (3,NULL,NULL,NULL,NULL,NULL,NULL,'Mrs',1);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (4,NULL,NULL,NULL,NULL,NULL,NULL,'Ms',1);
INSERT INTO `app_fd_titles` (`id`,`dateCreated`,`dateModified`,`createdBy`,`createdByName`,`modifiedBy`,`modifiedByName`,`c_name`,`c_sex_id`) VALUES (5,NULL,NULL,NULL,NULL,NULL,NULL,'Mx',1);