한 페이지에 여러 테이블이 존재할 때, 레이어UI의 테이블 툴바 이벤트에서 ID 값이 정상적으로 추출되지 않는 문제가 발생할 수 있습니다. 다음은 대표적인 오류 사례입니다:

문제 재현 코드

<div hidden>
  <script type="text/html" id="ToolTemplateA">
    <a class="layui-btn" lay-event="modify">수정</a>
  </script>
  <script type="text/html" id="ToolTemplateB">
    <a class="layui-btn" lay-event="modify">수정</a>
  </script>
</div>

<script>
layui.use(['table'], function(table) {
  const primaryTable = table.render({
    elem: '#primary',
    cols: [[
      { toolbar: '#ToolTemplateA' }
    ]],
    id: 'DataID'  // ID: A100, A101
  });
  
  const secondaryTable = table.render({
    elem: '#secondary',
    cols: [[
      { toolbar: '#ToolTemplateB' }
    ]],
    id: 'DataID'  // ID: B200, B201
  });

  primaryTable.on('tool(primary)', e => {
    if(e.event === 'modify') {
      console.log(e.data.DataID); // undefined 출력
    }
  });
  
  secondaryTable.on('tool(secondary)', e => {
    if(e.event === 'modify') {
      console.log(e.data.DataID); // 예상치 못한 값 출력
    }
  });
});
</script>

문제 원인

• 동일한 id 프로퍼티(DataID)를 여러 테이블에 사용할 경우 내부 데이터 충돌 발생
• 이벤트 버블링으로 인해 잘못된 테이블의 데이터가 참조됨

해결 방안

툴바 클릭 이벤트를 onclick으로 직접 처리하고, 템플릿에서 데이터 바인딩을 통해 ID 전달:

<div hidden>
  <script type="text/html" id="ToolTemplateA">
    <a class="layui-btn" onclick="handleEdit('{{d.UniqueID}}')">수정</a>
  </script>
  <script type="text/html" id="ToolTemplateB">
    <a class="layui-btn" onclick="handleEdit('{{d.UniqueID}}')">수정</a>
  </script>
</div>

<script>
function handleEdit(rowId) {
  console.log("정상 ID:", rowId);
}

layui.use(['table'], function(table) {
  table.render({
    elem: '#primary',
    cols: [[
      { toolbar: '#ToolTemplateA' }
    ]],
    id: 'TableA'  // 고유 ID 설정
  });
  
  table.render({
    elem: '#secondary',
    cols: [[
      { toolbar: '#ToolTemplateB' }
    ]],
    id: 'TableB'  // 고유 ID 설정
  });
});
</script>

주요 개선점

1. 테이블 렌더링 시 고유한 id 값 할당
2. lay-event 대신 인라인 onclick 핸들러 사용
3. 템플릿 문법 {{d.컬럼명}}으로 직접 데이터 바인딩
4. 이벤트 리스너 중복 제거로 코드 간소화