关于javascript:一个类别和带分页的可多选表格的实现方案

24次阅读

共计 2055 个字符，预计需要花费 6 分钟才能阅读完成。

左侧列表等于下拉框的值，一次只能选一个
右侧带分页数据即该下拉框上面的可选项

左侧是一个列表右侧是一个带分页可勾选列表
实现计划：前端保护所有关联数据，提交时提交该选项下的所有选中数据

进入页面后先获取右侧列表数据tableData2
左侧点击时获取与这条记录相干的右侧列表的 所有页的 ids 组成的数组,
拼成 id 字符串后复制两份别离保留在 selectedIds1(服务端返回 ids) 及selectedIds2(用于用户交互)
遍历 tableData2 获取 selectedIds2 在tableData2里的 index 值
依据 tableData2 及index值回填右侧列表

用户操作会批改 selectedIds2 的值, 前端需同时解决跨页数据，
点击下一页获取该页数据后，依据 selectedIds2 回填数据（须要在 nextTick 里回填，同一个 macrotask 里回填不胜利）

// 用户点击操作
selectHander (selection, row) {
    // 如果已选变未选则移除，// 如果未选变已选则退出
    let tmp2 
    let id = row.id
    if (this.selectedIds2.length > 0) {let tmp = this.selectedIds2.split(',')
        tmp2= new Set(tmp)
    }
    if (tmp2.has(id)) {tmp2.delete(id)
    } else {tmp2.add(id)
    }
    this.selectedIds2 = [...tmp2].join(',')
    // console.log('rowrowrowrow', this.selectedIds2)
},
// 依据 ids 设置表格数据回填
setRowSelectedByIds (ids) {
    let idsStr = ids
    let tb2 = this.tableData2
    let rowsIndexs = this.getRowsIndexByIds(idsStr)
    let rows = rowsIndexs.map(index => {return tb2[index]
    })
    // console.log('rowsIndexs', rowsIndexs, rows, tb2)
    // 先清空所有选中 再设置该选项
    this.$refs.Table2.clearSelection()
    this.toggleRowSelectionHander(rows)
},
// 依据 idstr 获取 table2 的 index 值
getRowsIndexByIds (idstr) {let idArr = idstr.split(',')
    let datas = this.tableData2
    let arrReturn = []
    idArr.forEach(id => {
        let t = datas.findIndex(data => {return data.id === id})
        // 如果选中的数据 不在当前页则 t 为 undefined
        if (t !== -1) {arrReturn.push(t)
        }
    })
    // console.log('适合数组 index', arrReturn)
    return arrReturn
},

即须要增加右侧列表的全选性能

selectAllHander(selection){
  // 这里 selection 是该页的所有选中数据
  // 选中 id 数组连贯已选 id 数组即 selectedIds2 转换后的数组
  // 通过 set 去重后再转换为数组在变为 id 字符串即可
  let ids2 = this.selectedIds2;
  let arr = selection.map(ele=>ele.id).concat(ids2.split(","))
  this.selectedIds2 = [...new Set(arr)].join(",")
}

这个不影响只须要在查问的时候增加相应的查问条件即可

计划一曾经实现，但计划不是很好
毛病：

每一个数据的扭转都须要与已选项进行比照并解决（判断移除该项还是增加该项）
如果已选项比拟多时服务端返回的将会是一个很大的数组而大部分数据是无用的
已选项比拟多时 id 组成的字符串会比拟大

长处：

用户只需点击一次保留，所有页数据的操作都会失去保留

计划二：
点击左侧返回所有右侧已选数据用于翻页后数据回填
保留时只解决当页数据的关联关系
毛病：

每一页用户都须要点击保留按钮否则数据会造成数据失落
如果已选项比拟多时服务端返回的将会是一个很大的数组而大部分数据是无用的

长处：

保留时不须要给全副数据，只须要给当页数据不会造成页面因勾选项过多造成页面过于卡顿

计划三：
点击左侧仅返回右侧当前页已选数据。
高低页及跳页时需依据查问条件及左侧已选获取该页数据及该页回填数据。
点击左侧时需同时把右侧所有查问条件一并传过来，用于服务端解决。
服务端只须要依据查问条件获取右侧要显示的当页数据，
及依据左侧已选项获取右侧已选项 id 与右侧要显示页数据列表 id 的交加即可
此计划最优，且只需一个接口

正文完