EasyUI是一個基于jQuery的開源JavaScript庫，提供了一套簡單易用的UI組件。在使用EasyUI進行開發(fā)時，經常會遇到需要實現多行上下移動的需求。本文將介紹使用EasyUI實現多行上下

EasyUI是一個基于jQuery的開源JavaScript庫，提供了一套簡單易用的UI組件。在使用EasyUI進行開發(fā)時，經常會遇到需要實現多行上下移動的需求。本文將介紹使用EasyUI實現多行上下移動的方法。

1. 實現上移的方法代碼

要實現多行上移功能，首先需要獲取選中的行，并將其向上移動。以下是一個示例代碼：

```javascript function moveUp(){ var selectedRows $('#datagrid').datagrid('getSelections'); if(selectedRows.length > 0){ var index $('#datagrid').datagrid('getRowIndex', selectedRows[0]); if(index > 0){ $('#datagrid').datagrid('deleteRow', index); $('#datagrid').datagrid('insertRow', {index: index - 1, row: selectedRows[0]}); } } } ```

以上代碼首先通過`getSelections`方法獲取選中的行，然后通過`getRowIndex`方法獲取選中行的索引。如果選中行的索引大于0，則通過`deleteRow`刪除選中行，再通過`insertRow`將選中行插入到索引減一的位置。

2. 實現下移與上移同理的方法代碼

實現多行下移功能與上移類似，只需要將上移的代碼進行稍微的修改即可。以下是一個示例代碼：

```javascript function moveDown(){ var selectedRows $('#datagrid').datagrid('getSelections'); if(selectedRows.length > 0){ var index $('#datagrid').datagrid('getRowIndex', selectedRows[selectedRows.length - 1]); if(index < $('#datagrid').datagrid('getData').total - 1){ $('#datagrid').datagrid('deleteRow', index); $('#datagrid').datagrid('insertRow', {index: index 1, row: selectedRows[0]}); } } } ```

以上代碼通過`getSelections`方法獲取選中的行，并通過`getRowIndex`方法獲取最后一個選中行的索引。如果最后一個選中行的索引小于總行數減一，則將其刪除，再通過`insertRow`將選中行插入到索引加一的位置。

通過以上兩段代碼，我們可以實現EasyUI多行上下移動的功能。根據實際需求，可以將這些代碼進行封裝，方便在項目中復用。