本来高高兴兴,单选咱就用radio,多选用checkbox。选中数据,点击保存
多好,看,没有人受伤的世界完成了。
但是有一个问题,当数据多起来,表格就会分页,但是多选框选中的始终的是本页的数据。
也就是说假如在第一页选中三条数据后,点击到第二页选中一条数据,再点击保存,只会保存第二页中的一条数据。
那简单啊,把之前选中的拿个数组装起来不就好了。
那切换页面后,之前页面选中的数据怎么让它保持选中状态呢?
简单啊,操作绑定数据源的dataList,让元素的属性checked等于true不就好了。
好嘛,听起来好像很简单,但是要知道checkbox返回的不是一条数据,而是当前页面所选中元素的一个数组。我整了半天,没搞清楚逻辑,把自己整晕了。
我太菜了,那就到了方向转换的时候了。
换个思路,还是操作dataList的check,我换成radio,这样不就好了。但是这里的radio选中后就不能再点了,也就是取消不了了。
好嘛,那就邪道一点,把type改成yn,change的时候监听click不就好了。
这就是我这个菜鸟给出来的解决方案。
那么上代码吧。
dataList: any = [];
itemChecked: any = [];
paramId: string;
// st
@ViewChild('st', { static: false }) st: STComponent;
columns: STColumn[] = [
{ title: '', index: 'checked', type: 'yn' },
...
}
]
// 给dataList初始化一下
ngOnInit(): void {
this.http.post(`/findAll`).subscribe(res => {
this.dataList = res;
this.http.post(`另外一张表的url`, paramId)
.subscribe((res: any) => {
this.dataList.forEach(e => {
res.forEach(resp => {
if (e.id === resp.cid) {
this.itemChecked.push(e);
e.checked = true;
}
});
});
this.st.reload();
});
});
}
// st的change事件
change(item) {
if (item.type === "click") {
const id = item.click.item.id;
const idx = this.itemChecked.findIndex(i => i.id === id);
if (idx === -1) {
this.itemChecked.push({ id: id });
const tmp = this.dataList.find(i => i.id === id);
tmp.checked = true;
}
else {
this.itemChecked.splice(idx, 1);
const tmp = this.dataList.find(i => i.id === id);
tmp.checked = false;
}
this.st.reload();
}
}
// 保存
save(value: any) {
const list = [];
this.dataList.forEach(e => {
if (e.checked) {
list.push(e.id);
}
})
value.list = list;
this.http.post(`/save`, value).subscribe(res => {
this.msgSrv.success('保存成功');
this.modal.close(true);
});
}
效果: