หลังจากใช้ MySQL: return json format กันเป็นแล้วเรามาลองใช้กับ joget แทนที่จะต้องไปเขียน beanshell ให้ยุ่งยาก (พลาดง่ายๆ อีกตะหาก) ดูจริงๆ แล้วสามารถใช้กับหน้าเว็บทั้งหมดไม่ใช่แค่ joGet เพราะมันคือ javascript พื้นฐาน
เปิดฟอร์มที่ต้องการมา
- สร้าง section ขึ้นมา โดยกำหนด Load Binder เป็น JDBC Binder และ SQL SELECT Query ใส่ query ที่ต้องการ เช่น
SELECT CONCAT('[', GROUP_CONCAT(JSON_OBJECT('label', name, 'value', appId)), ']') AS optionsList FROM jwdb.app_app ORDER BY name ASC - ลาก Hidden Field มาตั้ง id เป็น optionsList ใน section ที่สร้างไว้
- เขียน javascript ดึงค่ามาจาก string json ที่เก็บไว้ใน input ชื่อ optionsList โดยใช้ JSON.parse() เผื่อความปลอดภัย ควรใช้ JSON.parse() ใน try catch เพราะว่าถ้า json ที่ได้ผิดปกติจะสามารถควบคุมได้ ลาก Custom HTML มาแล้วใส่ code
<table class="table table-striped" id="tableA"> <thead> <tr> <th scope="col" style="width:20px;">#</th> <th scope="col">Name</th> <th scope="col">Value</th> </tr> </thead> <tbody> </tbody> </table> <script> $(document).ready(function () { let html = new Array(); let no = 0; let optionsList = $('#optionsList'); try { let temp = JSON.parse(optionsList.val()); if (temp.length > 0) { $.each(temp, function (index, value) { no++; html.push('<tr><th scope="row">' + no + '</th><td>' + value.label + '</td><td>' + value.value + '</td><tr>'); }); } if (html.length == 0) { html = '<tr><th scope="row">-</th><td>-</td><td>-</td><tr>'; } else { html = html.join("\n"); } } catch (e) { console.log(e.message); html = '<h1>Error!!</h1>'; } $('#tableA > tbody').html(html); }); </script>
สามารถ copy form ตัวอย่างได้จาก json
{
"className": "org.joget.apps.form.model.Form",
"properties": {
"noPermissionMessage": "",
"loadBinder": {
"className": "org.joget.apps.form.lib.WorkflowFormBinder",
"properties": {}
},
"name": "JSON Parse",
"description": "",
"postProcessorRunOn": "both",
"permission": {
"className": "",
"properties": {}
},
"id": "JSONParse",
"postProcessor": {
"className": "",
"properties": {}
},
"storeBinder": {
"className": "org.joget.apps.form.lib.WorkflowFormBinder",
"properties": {}
},
"tableName": "prototypes"
},
"elements": [
{
"elements": [
{
"elements": [
{
"className": "org.joget.apps.form.lib.HiddenField",
"properties": {
"useDefaultWhenEmpty": "",
"workflowVariable": "",
"id": "optionsList",
"value": ""
}
}
],
"className": "org.joget.apps.form.model.Column",
"properties": {
"width": "100%"
}
}
],
"className": "org.joget.apps.form.model.Section",
"properties": {
"readonly": "",
"loadBinder": {
"className": "org.joget.plugin.enterprise.JdbcLoadBinder",
"properties": {
"jdbcDatasource": "default",
"sql": "SELECT \n CONCAT('[',\n GROUP_CONCAT(JSON_OBJECT('label', name, 'value', appId)),\n ']') AS optionsList\nFROM\n jwdb.app_app\nORDER BY name ASC"
}
},
"permissionReadonly": "",
"permission": {
"className": "",
"properties": {}
},
"comment": "",
"id": "section1",
"label": "",
"storeBinder": {
"className": "",
"properties": {}
},
"readonlyLabel": ""
}
},
{
"elements": [
{
"elements": [
{
"className": "org.joget.apps.form.lib.CustomHTML",
"properties": {
"autoPopulate": "",
"id": "field2",
"label": "",
"value": "<table class=\"table table-striped\" id=\"tableA\">\n <thead>\n <tr>\n <th scope=\"col\" style=\"width:20px;\">#</th>\n <th scope=\"col\">Name</th>\n <th scope=\"col\">Value</th>\n </tr>\n </thead>\n <tbody>\n </tbody>\n</table>\n<script>\n $(document).ready(function () {\n\n let html = new Array();\n let no = 0;\n let optionsList = $('#optionsList');\n try {\n let temp = JSON.parse(optionsList.val());\n\n if (temp.length > 0) {\n $.each(temp, function (index, value) {\n no++;\n html.push('<tr><th scope=\"row\">' + no + '</th><td>' + value.label + '</td><td>' + value.value + '</td><tr>');\n });\n }\n if (html.length == 0) {\n html = '<tr><th scope=\"row\">-</th><td>-</td><td>-</td><tr>';\n } else {\n html = html.join(\"\\n\");\n }\n } catch (e) {\n console.log(e.message);\n html = '<h1>Error!!</h1>';\n }\n $('#tableA > tbody').html(html);\n\n });\n</script>"
}
}
],
"className": "org.joget.apps.form.model.Column",
"properties": {
"width": "100%"
}
}
],
"className": "org.joget.apps.form.model.Section",
"properties": {
"readonly": "",
"loadBinder": {
"className": "",
"properties": {}
},
"permissionReadonly": "",
"permission": {
"className": "",
"properties": {}
},
"comment": "",
"id": "section2",
"label": "Options List",
"storeBinder": {
"className": "",
"properties": {}
},
"readonlyLabel": ""
}
}
]
}