目次
序文
この記事では、vedragable を導入して属性項目のドラッグ アンド ドロップ操作を完了し、テーブルにドラッグ アンド ドロップの順序を記録する方法を記録します。
ニーズの表明
プロジェクトにはワイド テーブル表示機能があり、基本的なロジックは次のとおりです: 管理者がワイド テーブルに表示するフィールドとフィールドのデータ ソースを構成すると、ユーザーは表示ページで対応するテーブル データを表示できるようになります。新しい要件は、自由に構成可能なフィールドの表示順序を必要とする
、ワイド テーブル構成可能な項目に対して提案されています。
需要分析
実装 1: フィールド行をドラッグ アンド ドロップできる
この実装は既存のフィールド構成コンポーネントに基づいており、以下の図に示すように、ドラッグ可能な効果が追加されています:
選択するフィールドが多数 (数十) ある可能性があり、チェックされたフィールドのみを表示して並べ替える必要があるためです。このドラッグ アンド ドロップ方法を使用すると、フィールドの並べ替え操作が非常に面倒になります。
実装 2: ドラッグ可能な並べ替えコンポーネントを追加する
チェックされたフィールドのリストをリアルタイムで読み取り、対応するドラッグ可能なラベルを生成する新しいコンポーネントが追加され、ユーザーはラベルをドラッグすることでフィールドの順序を変更できます。
同様の効果は次のとおりです。
このソリューションはより直感的で、ユーザーの操作習慣により一致しているように見えるため、以下はこのソリューションに基づいて要件を満たしています。
要件の実現
テーブルの変更
表示側は並べ替え情報を読み取る必要があるため、既存のフィールド レコード テーブルに並べ替え列を追加する必要があります。ここでは、新しい並べ替え列はint 型の sort であると仮定し、既定値は-1です。
フロントエンド
コンポーネントのインポート
// 为 package.json 中的 dependencies 项新增如下属性
"vuedraggable": "^2.24.3"
// 相关页面引入 vuedraggable
import draggable from 'vuedraggable'
// 在vue中注册组件
components: {
draggable
},
データ構造分析
-
fieldListすべてのフィールド データを保存する既存のリスト- 属性はデータ項目に存在し
id、レコードフィールドIDは - 属性はデータ項目に存在します
name。フィールド名を記録します - 属性がデータ項目に存在するか
isCheckedどうか、レコードフィールドがチェックされているかどうか - 新しい属性がデータ項目に追加され
sort、フィールドの並べ替え情報が記録されます (デフォルト値は -1 で、並べ替えに参加しないことを意味します)。
- 属性はデータ項目に存在し
-
fieldSortListfieldList並べ替えコンポーネントが情報を読み取るために、同じデータ構造を持つ新しいリストを追加しました。- フィールドをオンまたはオフにした後、
fieldListチェックされたフィールドを同期する必要があります。fieldSortList - 手動でドラッグしてフィールドの順序を変更した後、順序
fieldSortList情報をfieldListsort
- フィールドをオンまたはオフにした後、
フィールドチェック情報を同期する
// 新增方法以更新字段排序列表
updatefieldSortList(){
// 取出被勾选的字段
let checkedItems = this.fieldList.filter((item) => item.isChecked)
// 赋予新增字段（sort值为-1）序号
let unSortItemList = checkedItems.filter(item => item.sort === -1)
if (unSortItemList !== null && unSortItemList !== undefined && unSortItemList.length > 0) {
// 赋值：当前排序列表中的最大值+1（也即排序列表的当前长度-1）
unSortItemList.forEach(unSortItem => unSortItem.sort = checkedItems.length - 1)
}
// 将字段信息按sort值排序，并将其复制至排序列表
this.fieldSortList= JSON.parse(JSON.stringify(checkedItems.sort((a,b)=>a.sort-b.sort)))
}
<!-- 字段的勾选框，每个字段被勾选之后都会调用函数 checkboxChange -->
<el-checkbox @change="checkboxChange(fItem)"></el-checkbox>
// 在 checkboxChange 方法中新增更新操作
checkboxChange (item){
// 省略现有逻辑
console.log(item)
// 勾选/取消勾选时更新字段排序列表
this.updatefieldSortList()
}
// 在 created 中新建如下调用，用于在进入页面时生成可拖拽排序字段
this.updatefieldSortList();
ソートされたリストを表示
<!-- 引入自定义标题头，声明排序组件标题（可选） -->
<headTitle headTitle="所选字段排序"></headTitle>
<div class="fieldSortBox">
<!-- 引入拖拽组件，读取排序列表数据 -->
<draggable v-model="fieldSortList" class="dragItemCollection">
<!-- 遍历排序列表数据，使用el-tag包裹数据项名称 -->
<div v-for="item in fieldSortList" :key="item.id" class="dragItem">
<el-tag type="info">{
{ item.name}}</el-tag>
</div>
</draggable>
</div>
// 自定义样式，修饰排序组件内容
.fieldSortBox {
margin-left: 130px;
.dragItemCollection{
display: inline-flex;
flex-wrap: wrap;
.dragItem {
margin:5px 5px 5px 5px !important;
}
}
}
この時点で、ページは通常どおり並べ替えコンポーネントを表示できるはずです。また、次の図に示すように、フィールドのチェックと同期して並べ替えコンポーネントを変更することもできます。
ドラッグアンドドロップの並べ替え情報を同期する
// 新建侦听属性，侦听 fieldSortList
watch:{
fieldSortList: function (newVal, oldVal) {
let sortId = 0
// newVal 中的元素顺序即用户拖拽后看到的元素顺序
newVal.forEach(sortItem=>{
// 找到 fieldList 中对应的字段
let fieldItem = this.fieldList.filter((item) => item.isChecked).find(item=>item.id = sortItem.id);
// 将页面显示顺序设置为元素 sort 字段值
fieldItem.sort = sortId++;
})
}
}
これで管理側のフィールドドラッグ＆ドロップの設定は完了ですので、元のページ送信メソッドのバックグラウンドにデータを送信する前にprint文を追加し、ドラッグ後の順番がフィールドのフィールドに更新されるか確認することができます。フィールド データ項目を同期的に取得しますsort。
最終的な効果は以下の通りです。
表示側は順番に表示します
方法 1: バックエンドの並べ替え
表示エンドがバックエンドにデータを要求すると、バックエンドはsortフィールドで検索して結果をフロントエンドに返し、フロントエンドはそれらを受信した後、それらを走査して表示できます。
QueryWrapper queryWrapper = new QueryWrapper<Field>().orderByAsc("sort");
return fieldService.list(queryWrapper);
方法 2: フロントエンドの並べ替え
ディスプレイエンドがバックグラウンドデータを要求すると、バックグラウンドはデータを直接チェックして結果をフロントエンドに返し、フロントエンドはそれを受け取った後、sort値の順に表示します。
要約する
- vedraggable はフロントエンドのドラッグ アンド ドロップ操作を完了でき、カスタム操作用の多数の API を提供します。
- ドラッグ後のユーザーの視覚的な順序が、最終的なストレージのソート値になります。