Flex中存储key-value关系

本文介绍了一种使用Object(类似Java中的HashMap)来存储设备ID及其对应IP地址的方法。通过几个示例演示了如何添加、删除及检索这些数据。



 

 

项目需要通过设备ID来存储当前设备的可用Ip地址,如果放在Array里面,每次去除deviceID对应的Ip地址需要遍历。所以想利用类似于Java中Map这种key-value的形式,对数据进行操作。

       果然,答案是Object类似于Java中的HashMap。

-------------

Demo1:添加数据

 

       var temp:Object = new Object();

 

       temp["ThinkPad"] = "10.1.1.1";

       temp["LePad"] = "10.1.1.3";

       temp["lePhone"] = "10.1.1.5";

 

-------------

Demo2:根据key删除当前记录

       delete temp["LePad"];

 

-------------

Demo3:  根据Key获取对应的记录

       var tempIp:String = temp["LePhone"];

 

-------------

Demo4: 关于Object的遍历---获取key

 

       for( var i:String in temp){

            Alert.show( "key =" + i);              //获取key值

            Alert.show( "key =" + temp[i]);    //获取value

       }

 

-------------

Demo5:关于Object的遍历----获取value

 

       for each( var ip:String in temp){

            Alert.show( "value =" + ip);

       }

以下代碼中dntag欄位中顯示的每筆數組資料間以大寫分號隔開,垂直排列改成水平排列,每筆數組資料中的id:及dnname:都不顯示: <template> <div class="container"> <h1>合并后的数据</h1> <!-- 控制面板 --> <div class="control-panel"> <button @click="fetchData" class="refresh-btn">刷新数据</button> <input v-model="searchQuery" placeholder="搜索..." class="search-input" /> <div class="pagination-controls"> <span>每页显示:</span> <select v-model="pageSize" class="page-size-select"> <option value="1">1条</option> <option value="4">4条</option> <option value="10">10条</option> </select> <button @click="prevPage" :disabled="currentPage === 1">上一页</button> <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span> <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button> </div> </div> <!-- 垂直堆叠的数据展示 --> <div class="vertical-records" v-if="filteredData.length > 0"> <div v-for="(item, index) in paginatedData" :key="index" class="record-card"> <div class="record-header"> <h3>记录 #{{ (currentPage - 1) * pageSize + index + 1 }}</h3> </div> <div class="record-body"> <div v-for="(value, key) in item" :key="key" class="record-field"> <div class="field-name">{{ key }}:</div> <div class="field-value"> <div v-if="Array.isArray(value)" class="array-value"> <div v-for="(subItem, subIndex) in value" :key="subIndex" class="sub-item"> <div v-if="Array.isArray(subItem)" class="sub-array"> <div v-for="(val, i) in subItem" :key="i" class="key-value-pair"> <span class="key">{{ val[0] }}:</span> <span class="value" v-html="formatValue(val[1])"></span> </div> </div> <span v-else v-html="formatValue(subItem)"></span> </div> </div> <div v-else v-html="formatValue(value)"></div> </div> </div> </div> </div> </div> <div v-else class="no-data"> 没有找到匹配的数据 </div> </div> </template> <script> export default { data() { return { api1Data: [], api2Data: [], mergedData: [], currentPage: 1, pageSize: 1, searchQuery: '', sortKey: '', sortOrders: {} }; }, computed: { filteredData() { const query = this.searchQuery.toLowerCase(); return this.mergedData.filter(item => { return Object.values(item).some(value => { if (value === null || value === undefined) return false; const strValue = JSON.stringify(value).toLowerCase(); return strValue.includes(query); }); }); }, sortedData() { if (!this.sortKey) return this.filteredData; const order = this.sortOrders[this.sortKey] || 1; return [...this.filteredData].sort((a, b) => { const getValue = (obj) => { const val = obj[this.sortKey]; if (Array.isArray(val)) { return JSON.stringify(val); } return val; }; const aValue = getValue(a); const bValue = getValue(b); if (aValue === bValue) return 0; return aValue > bValue ? order : -order; }); }, paginatedData() { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.sortedData.slice(start, end); }, totalPages() { return Math.ceil(this.filteredData.length / this.pageSize) || 1; } }, methods: { async fetchData() { try { const api1Response = await fetch("MRInfo/?format=json"); this.api1Data = await api1Response.json(); const api2Response = await fetch("DNTag/?format=json"); this.api2Data = await api2Response.json(); this.mergeData(); this.currentPage = 1; } catch (error) { console.error("获取数据失败:", error); } }, mergeData() { this.mergedData = this.api1Data.map((item) => { const newItem = { ...item }; if (newItem.dntag && Array.isArray(newItem.dntag)) { newItem.dntag = newItem.dntag.map((tagId) => { const matchedItem = this.api2Data.find( (api2Item) => api2Item.id === tagId ); const tagObj = matchedItem || { id: tagId, name: "未找到匹配数据" }; return Object.entries(tagObj).map(([key, value]) => [key, value]); }); } return newItem; }); this.sortOrders = {}; if (this.mergedData.length > 0) { Object.keys(this.mergedData[0]).forEach(key => { this.sortOrders[key] = 1; }); } }, formatValue(value) { if (value === null || value === undefined) return ''; if (typeof value === 'string' && value.startsWith('http')) { return `<a href="${value}" target="_blank">${value}</a>`; } return value; }, sortBy(key) { this.sortKey = key; this.sortOrders[key] = this.sortOrders[key] * -1; }, prevPage() { if (this.currentPage > 1) { this.currentPage--; } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++; } } }, mounted() { this.fetchData(); } }; </script> <style scoped> .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .control-panel { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .refresh-btn { padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .refresh-btn:hover { background-color: #45a049; } .search-input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex-grow: 1; max-width: 300px; } .pagination-controls { display: flex; align-items: center; gap: 10px; } .page-size-select { padding: 8px; border-radius: 4px; } /* 垂直记录样式 */ .vertical-records { display: flex; flex-direction: column; gap: 20px; } .record-card { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .record-header { padding: 12px 16px; background-color: #f5f5f5; border-bottom: 1px solid #ddd; } .record-header h3 { margin: 0; font-size: 1.1em; } .record-body { padding: 16px; } .record-field { display: flex; margin-bottom: 12px; line-height: 1.5; } .record-field:last-child { margin-bottom: 0; } .field-name { font-weight: bold; min-width: 120px; color: #555; } .field-value { flex-grow: 1; } .array-value { display: flex; flex-direction: column; gap: 8px; } .sub-item { margin-bottom: 4px; } .sub-array { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .key-value-pair { display: flex; gap: 8px; } .key { font-weight: 500; color: #666; } .value { word-break: break-word; } .no-data { padding: 20px; text-align: center; color: #666; font-style: italic; } button:disabled { opacity: 0.5; cursor: not-allowed; } </style>
07-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值