一段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/