raintee-maputils 1.0.21 → 1.0.22

package/dist/index.js

@@ -5856,11 +5856,74 @@ const GenerateUniqueId = (
         0,
         2
     )}-${groupId.slice(0, 2)}-${hexHash}`;
-};
+};
+/**
+ * 生成一个带斑马纹、固定宽高、支持滚动条的键值对表格 HTML 字符串
+ * @param {Array<{label: string, value: string}>} data - 键值对数组，如 [{label: '姓名', value: '张三'}, ...]
+ * @param {Object} [options] - 可选配置
+ * @param {number} [options.width=600] - 表格容器宽度（像素）
+ * @param {number} [options.height=400] - 表格容器高度（像素）
+ * @returns {string} - 返回一个完整的 HTML 字符串，可直接插入到 innerHTML 中
+ */
+function generateKeyValueTableHTML(data, options = {}) {
+    const { width = 600, height = 400 } = options;
+
+    // 开始拼接 HTML 字符串
+    let html = `
+      <div style="
+        width: ${width}px;
+        height: ${height}px;
+        overflow: auto;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      ">
+        <table style="
+          width: 100%;
+          border-collapse: collapse;
+          font-family: Arial, sans-serif;
+          font-size: 14px;
+        ">
+          <tbody>
+    `;
+
+    // 遍历键值对，生成行
+    data.forEach((item, index) => {
+        const bgColor = index % 2 === 0 ? '#ffffff' : '#f9f9f9'; // 斑马纹背景色
+        const label = item.label || '';
+        const value = item.value || '';
+
+        html += `
+        <tr style="background-color: ${bgColor};">
+          <td style="
+            padding: 8px 12px;
+            border: 1px solid #ccc;
+            font-weight: bold;
+            min-width: 100px;
+          ">${label}</td>
+          <td style="
+            padding: 8px 12px;
+            border: 1px solid #ccc;
+            word-break: break-word;
+          ">${value}</td>
+        </tr>
+      `;
+    });
+
+    // 闭合标签
+    html += `
+          </tbody>
+        </table>
+      </div>
+    `;
+
+    // 返回拼接好的 HTML 字符串
+    return html;
+}
 
 var RainteeSourceMapTool = /*#__PURE__*/Object.freeze({
     __proto__: null,
     GenerateUniqueId: GenerateUniqueId,
+    generateKeyValueTableHTML: generateKeyValueTableHTML,
     getLayerIdFidld: getLayerIdFidld,
     treeDataAdapter: treeDataAdapter,
     treeDataAdapterNext: treeDataAdapterNext