問題描述

一段json數據展示在頁面上，如何雙擊input框修改value值并保存下來

{ 'OpcUaClientConfig': { 'endpointUrl': 'opc.tcp://127.0.0.1:26545', 'userName': 'user1', 'password': 'password1', 'securityMode': 'NONE', 'securityPolicy': 'None', 'timeout': 6000 }, 'RedisConfig': { 'Host': '127.0.0.1', 'Port': 6379, 'Password': 'AUlSBQqy' }, 'MqttConfig': { 'Protocol': 'mqtt', 'Host': '120.76.194.101', 'Port': 1883, 'UserName': 'admin', 'Password': 'admin1702' }, 'Equiment': [ { 'Device': 'Device1', 'Group': 'NC01', 'DeviceID': '1', 'Count': 0, 'DeviceCode': '000100001000001', 'Tags': [{ 'TagName': 'progf', 'Address': 'ns=1;s=progf1', 'ClientAccess': 'RO', 'ScanRate': '1000', 'DataType': '', 'Value': '', 'Status': '', 'Timestamp': ''},{ 'TagName': 'ms', 'Address': 'ns=1;s=ms1', 'ClientAccess': 'RO', 'ScanRate': '1000', 'DataType': '', 'Value': '', 'Status': '', 'Timestamp': ''} ] }, { 'Device': 'Device1', 'Group': 'NC09', 'DeviceID': '3', 'Count': 0, 'DeviceCode': '000100001000003', 'Tags': [{ 'TagName': 'progf', 'Address': 'ns=1;s=progf2', 'ClientAccess': 'RO', 'ScanRate': '1000', 'DataType': '', 'Value': '', 'Status': '', 'Timestamp': ''},{ 'TagName': 'ms', 'Address': 'ns=1;s=ms2', 'ClientAccess': 'RO', 'ScanRate': '1000', 'DataType': '', 'Value': '', 'Status': '', 'Timestamp': ''} ] } ]}

問題解答

思路大概是先把.json字符串通過.json()轉成js對象..然后把value的值與對應input綁定, 如果用mvvm的框架的話會簡單很多, 純js也可以寫一個雙向綁定. 又或者使用現成的json編輯庫, 這個推薦一個jsoneditorhttps://github.com/josdejong/jsoneditor/