EasyUI 前端解析包含雙 List 的 JSON 回應

後端回傳 JSON 結構：

{
  "existList": [{"isgd":"1","usernumber":"110"},{"isgd":"1","usernumber":"112"}],
  "newBacklist": []
}

解析方式比較

方案一：直接操作 JSONObject（推薦輕量場景）

var data = JSON.parse(responseText); // 或 $.parseJSON
var existRows = data.existList;      // 直接取得陣列
var newRows = data.newBacklist;
$('#dgExist').datagrid('loadData', existRows);
$('#dgNew').datagrid('loadData', newRows);

方案二：對應實體類別（TypeScript/Java 強型別專案）

// TypeScript 介面
interface ResponseData {
  existList: UserInfo[];
  newBacklist: UserInfo[];
}
interface UserInfo { isgd: string; usernumber: string; }

// 使用
const res: ResponseData = JSON.parse(responseText);
this.existData = res.existList;
this.newData = res.newBacklist;

EasyUI Datagrid 綁定要點

• loadData 接受陣列，自動渲染列（需預先定義 columns）。
• 若需分頁，回傳標準格式 {total: 100, rows: [...]} 並用 loadData 或 datagrid({data: ...})。
• 空陣列 [] 會顯示空表格，不報錯。

常見錯誤