如何使用dropdown和text input設定條件來做資料的篩選

我想拿來做篩選的資料庫中的欄位有"行政區"、"單價(萬元/坪)"、"總面積(坪)"和其他的欄位,我總共有1個dropdown(名字是"行政區")和4個text input("預期最低單價(萬元/坪)"、"預期最高單價(萬元/坪)"、"期望最小總面積(坪)"、"期望最大總面積(坪)"),我的目的是想透過dropdown的選擇來篩選出"行政區"這個欄位和我所選的選項一樣的資料、資料中的"單價(萬元/坪)"界在我所輸入的text input"預期最低單價(萬元/坪)"和"預期最高單價(萬元/坪)"之間、資料中的"總面積(坪)"欄位的資料界在"期望最小總面積(坪)"和"期望最大總面積(坪)"之間,並且設定一個button來執行篩選符合以上三種篩選的資料,並且將篩選出來的結果用table印出完整的資料欄位,目前的進度是可以匯入我的資料庫的json檔,並且能在table顯示出所有的資料,可是想用button做篩選的時候卻沒有篩選的功能,也就是table顯示維持我原來的資料庫。
以下是我目前進度的json檔:

[translation by admin using Google translate]
The fields in the database I want to use for filtering are "administrative district", "unit price (10,000 yuan/ping)", "total area (ping)" and other fields, I have a total of 1 dropdown (the name is "administrative district") and 4 text inputs ("expected minimum unit price (10,000 yuan/ping)", "expected maximum unit price (10,000 yuan/ping)", "expected minimum total area (ping)", "expected maximum total area (ping)"), my purpose is to filter out through the selection of dropdown" The "Administrative District" field is the same as the option I selected, the "Unit Price (10,000 yuan/ping)" in the data is between the "Expected Minimum Unit Price (10,000 Yuan/Ping)" and "Expected Maximum Unit Price (10,000 Yuan/Ping)" in the text input I entered, and the data boundary in the "Total Area (Ping)" column in the data is "Expected Minimum Total Area (Ping)" and "Expected Maximum Total Area (Ping)" between, and set a button to perform the screening of the data that meets the above three filters, and the results of the screening are printed out of the complete data field with the table, the current progress is that you can import the json file of my database, and can display all the data in the table, but there is no filter function when you want to use the button to do the filtering, that is, the table display maintains my original database. Here's a json file of my current progress:

[
    {
        "id": "4c0181aa24fa3bca",
        "type": "tab",
        "label": "流程5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "18e58feccfcee9a3",
        "type": "file in",
        "z": "4c0181aa24fa3bca",
        "name": "read file",
        "filename": "C:\\Users\\user\\OneDrive\\桌面\\output.json",
        "filenameType": "str",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 280,
        "y": 120,
        "wires": [
            [
                "cda31cd124f117a6"
            ]
        ]
    },
    {
        "id": "cda31cd124f117a6",
        "type": "json",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "property": "payload",
        "action": "obj",
        "pretty": false,
        "x": 450,
        "y": 120,
        "wires": [
            [
                "53fff4e4f21e51a0"
            ]
        ]
    },
    {
        "id": "90030d2692cdda72",
        "type": "ui_table",
        "z": "4c0181aa24fa3bca",
        "group": "5f549f03776b2516",
        "name": "",
        "order": 8,
        "width": "6",
        "height": "7",
        "columns": [
            {
                "field": "地段位置或門牌",
                "title": "地段位置或門牌",
                "width": "%",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "行政區",
                "title": "行政區",
                "width": "%",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "社區簡稱",
                "title": "社區簡稱",
                "width": "%",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "交易日期",
                "title": "交易日期",
                "width": "%",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "總價(萬元)",
                "title": "總價(萬元)",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "單價(萬元/坪)",
                "title": "單價(萬元/坪)",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "總面積(坪)",
                "title": "總面積(坪)",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "主建物佔比",
                "title": "主建物佔比",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "型態",
                "title": "型態",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "屋齡",
                "title": "屋齡",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "樓別/樓高",
                "title": "樓別/樓高",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "交易標的",
                "title": "交易標的",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "交易筆棟數",
                "title": "交易筆棟數",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "建物現況格局",
                "title": "建物現況格局",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "車位總價(萬元)",
                "title": "車位總價(萬元)",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "管理組織",
                "title": "管理組織",
                "width": "px",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "電梯",
                "title": "電梯",
                "width": "px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 1,
        "cts": true,
        "x": 910,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "7f2a065a901a9446",
        "type": "inject",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 130,
        "y": 120,
        "wires": [
            [
                "18e58feccfcee9a3"
            ]
        ]
    },
    {
        "id": "710864f0998c8773",
        "type": "ui_dropdown",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "label": "",
        "tooltip": "",
        "place": "Select option",
        "group": "5f549f03776b2516",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "",
                "value": "中區",
                "type": "str"
            },
            {
                "label": "",
                "value": "東區",
                "type": "str"
            },
            {
                "label": "",
                "value": "西區",
                "type": "str"
            },
            {
                "label": "",
                "value": "南區",
                "type": "str"
            },
            {
                "label": "",
                "value": "北區",
                "type": "str"
            },
            {
                "label": "",
                "value": "西屯區",
                "type": "str"
            },
            {
                "label": "",
                "value": "北屯區",
                "type": "str"
            },
            {
                "label": "",
                "value": "南屯區",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "payload",
        "topicType": "msg",
        "className": "",
        "x": 240,
        "y": 260,
        "wires": [
            [
                "c75c811637261120"
            ]
        ]
    },
    {
        "id": "040e69b64850defd",
        "type": "ui_text_input",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "label": "預期最低單價(萬元/坪)",
        "tooltip": "",
        "group": "5f549f03776b2516",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "payload",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 220,
        "y": 320,
        "wires": [
            [
                "c75c811637261120"
            ]
        ]
    },
    {
        "id": "1b02ae88eb4f4153",
        "type": "ui_text_input",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "label": "期望最小總面積(坪)",
        "tooltip": "",
        "group": "5f549f03776b2516",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "payload",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 210,
        "y": 440,
        "wires": [
            [
                "c75c811637261120"
            ]
        ]
    },
    {
        "id": "20a0a0450cb44125",
        "type": "ui_text_input",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "label": "預期最高單價(萬元/坪)",
        "tooltip": "",
        "group": "5f549f03776b2516",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "payload",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 220,
        "y": 380,
        "wires": [
            [
                "c75c811637261120"
            ]
        ]
    },
    {
        "id": "b2bd3e1da86d6dd1",
        "type": "ui_text_input",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "label": "期望最大總面積(坪)",
        "tooltip": "",
        "group": "5f549f03776b2516",
        "order": 6,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "payload",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 210,
        "y": 500,
        "wires": [
            [
                "c75c811637261120"
            ]
        ]
    },
    {
        "id": "bf673635d7efa7fd",
        "type": "ui_button",
        "z": "4c0181aa24fa3bca",
        "name": "",
        "group": "5f549f03776b2516",
        "order": 7,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "篩選",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "Topic",
        "topicType": "msg",
        "x": 250,
        "y": 200,
        "wires": [
            [
                "53fff4e4f21e51a0"
            ]
        ]
    },
    {
        "id": "c75c811637261120",
        "type": "function",
        "z": "4c0181aa24fa3bca",
        "name": "function 1",
        "func": "msg.payload = {\n    district: msg.topic, \n    minPrice: parseFloat(msg.payload.minPrice) || 0,\n    maxPrice: parseFloat(msg.payload.maxPrice) || Number.MAX_VALUE,\n    minArea: parseFloat(msg.payload.minArea) || 0,\n    maxArea: parseFloat(msg.payload.maxArea) || Number.MAX_VALUE\n};\nreturn msg;\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 520,
        "y": 340,
        "wires": [
            [
                "53fff4e4f21e51a0"
            ]
        ]
    },
    {
        "id": "53fff4e4f21e51a0",
        "type": "function",
        "z": "4c0181aa24fa3bca",
        "name": "function 2",
        "func": "var filteredData = [];\n\nfor (var i = 0; i < msg.payload.length; i++) {\n    var item = msg.payload[i];\n\n    if (\n        item[\"行政區\"] === msg.payload.district &&\n        item[\"單價(萬元/坪)\"] >= msg.payload.minPrice &&\n        item[\"單價(萬元/坪)\"] <= msg.payload.maxPrice &&\n        item[\"總面積(坪)\"] >= msg.payload.minArea &&\n        item[\"總面積(坪)\"] <= msg.payload.maxArea\n    ) {\n        filteredData.push(item);\n    }\n}\n\nmsg.filteredData = filteredData;\n\nreturn msg;\n\n\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 740,
        "y": 340,
        "wires": [
            [
                "90030d2692cdda72"
            ]
        ]
    },
    {
        "id": "5f549f03776b2516",
        "type": "ui_group",
        "name": "單價篩選",
        "tab": "8fd4f368de9043f0",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "8fd4f368de9043f0",
        "type": "ui_tab",
        "name": "房地產資訊查詢儀表板",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

It is hard to work out what the ui-nodes are doing as most people here are not fluent in Chinese (can you translate them). Also we do not have your one drive file (maybe you can supply this in a inject node)

I think, looking at the flow you will need to store the one drive json in context or use join node/s to save for filtering. It may also be possible using tabulator commands, is there any examples in import > examples > ui-table, or search Tabulator | JavaScript Tables & Data Grids

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.