OPEN_GRID API - v1.5.2
    Preparing search index...

    Class GridShuttle

    두 그리드 사이의 셔틀 UI.

    Shuttle UI between two grids.

    2つのグリッドの間に置くシャトルUI。

    两个表格之间的穿梭框 UI。

    "가용 항목 그리드"와 "선택된 항목 그리드"를 나란히 두고, 그 사이에서 체크한 행을 화살표 버튼으로 옮기고 싶을 때 쓴다(권한 배정, 컬럼 표시 여부 선택 같은 화면에 흔한 UI 패턴). 동작 순서는 이렇다: 사용자가 왼쪽 그리드에서 행을 체크하고 ▶ 버튼을 클릭하면, 내부적으로 grid.moveCheckedTo() 가 호출되어 오른쪽 그리드로 행이 옮겨진다 — 이때 crossGridMapping (필드 매핑)과 3단계 이벤트가 드래그로 옮길 때와 동일하게 적용되므로, 버튼 이동과 드래그 이동을 섞어 써도 동작이 갈리지 않는다.

    Places arrow buttons between an "available items" grid and a "selected items" grid so checked rows can be moved between them without dragging (a common pattern for permission assignment, column visibility pickers, etc.). Operation order: the user checks rows in the left grid and clicks ▶, which internally calls grid.moveCheckedTo() to move those rows into the right grid — crossGridMapping (field mapping) and the 3-stage events apply identically to drag-based moves, so mixing button moves with drag moves never behaves differently.

    「利用可能な項目のグリッド」と「選択された項目のグリッド」を並べて置き、その間でチェックした行を 矢印ボタンで移したいときに使います(権限の割り当てや、列の表示可否の選択といった画面によくあるUI パターンです)。動作の順序は次のとおりです。ユーザーが左のグリッドで行をチェックして ▶ ボタンを クリックすると、内部で grid.moveCheckedTo() が呼ばれ、右のグリッドへ行が移されます — このとき crossGridMapping(フィールドマッピング)と3段階のイベントがドラッグで移すときと同じように適用 されるため、ボタン移動とドラッグ移動を混ぜて使っても動作が食い違うことはありません。

    在「可用项目表格」和「已选项目表格」之间放置箭头按钮,无需拖拽即可移动勾选的行(权限分配、 列显示与否的选择等界面中常见的 UI 模式)。动作顺序如下:用户在左侧表格勾选行并点击 ▶,内部 就会调用 grid.moveCheckedTo() 把这些行移入右侧表格 — 此时 crossGridMapping(字段映射) 和 3 阶段事件与拖拽移动完全相同地生效,因此混用按钮移动和拖拽移动也不会出现动作分歧。

    const shuttle = new GridShuttle(leftGrid, rightGrid, document.querySelector('#mid')!, {
    layout: 'vertical',
    includeAll: true,
    });
    Index

    Constructors

    Methods

    Constructors

    • Parameters

      • _left: OpenGridInstance

        왼쪽 그리드 인스턴스

        Left grid instance.

        左のグリッドインスタンス。

        左侧表格实例。

      • _right: OpenGridInstance

        오른쪽 그리드 인스턴스

        Right grid instance.

        右のグリッドインスタンス。

        右侧表格实例。

      • mount: HTMLElement

        셔틀 버튼을 붙일 마운트 엘리먼트

        Mount element to attach the shuttle buttons.

        シャトルボタンを取り付けるマウント要素。

        用于挂载穿梭框按钮的元素。

      • opts: GridShuttleOptions = {}

        셔틀 옵션

        Shuttle options.

        シャトルのオプション。

        穿梭框选项。

      Returns GridShuttle

    Methods

    • 셔틀 UI 를 DOM 에서 제거한다.

      Remove the shuttle UI from the DOM.

      シャトルUIをDOMから取り除きます。

      从 DOM 中移除穿梭框 UI。

      Returns void