EasyUI 頁面間數據傳遞：URL 參數法實現詳解

EasyUI 頁面跳轉時將上一頁表格行數據傳遞到下一頁，最簡單通用的方案是通過 URL 參數攜帶數據。本文提供完整實現代碼。

核心思路

1. 列表頁：點擊操作鏈接時，將當前行關鍵字段拼接到目標 URL 的 Query String
2. 詳情頁：onload 解析 location.search，還原數據並填充界面

列表頁代碼

<table id="dataGrid">
  <tr id="row1"><td>1001</td><td>張三</td><td>工程師</td></tr>
  <tr id="row2"><td>1002</td><td>李四</td><td>設計師</td></tr>
</table>

<script>
function addParam(link) {
  var row = document.getElementById('row1'); // 實際應動態獲取點擊行
  var params = [];
  for (var i = 0; i < row.cells.length; i++) {
    params.push(encodeURIComponent(row.cells[i].innerText));
  }
  link.href = link.href + '?' + params.join(',');
}
</script>

<a href="detail.html" onclick="addParam(this)">查看詳情</a>

詳情頁代碼 (detail.html)

<script>
window.onload = function() {
  var search = location.search.substring(1); // 去掉 '?'
  if (!search) return;
  var arr = search.split(',').map(decodeURIComponent);
  // arr = ["1001", "張三", "工程師"]
  // 此處填充到 EasyUI datagrid / form / label 等控件
  document.getElementById('id').innerText = arr[0];
  document.getElementById('name').innerText = arr[1];
  document.getElementById('job').innerText = arr[2];
};
</script>

<div>ID: <span id="id"></span></div>
<div>姓名: <span id="name"></span></div>
<div>職位: <span id="job"></span></div>

進階改進建議

• 用 JSON.stringify + encodeURIComponent 傳遞對象，避免字段順序/分隔符問題
• 敏感數據勿放 URL，改用 sessionStorage / 後端臨時存儲 + Token
• EasyUI 官方推薦：$('#dlg').dialog('open').dialog('refresh', 'detail.html?id=1001') 以 iframe/iframe 方式加載

URL 參數法無框架依賴、調試直觀，適合中小型項目快速落地。