Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

关于使用server端分页，如何保存用户所有的复选框选择问题 #917

Closed
netbuffer opened this issue May 25, 2015 · 40 comments
Closed

关于使用server端分页，如何保存用户所有的复选框选择问题 #917

netbuffer opened this issue May 25, 2015 · 40 comments

Comments

@netbuffer
Copy link

$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table', function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    });

getIdSelections方法只能获得当前页面的选择，但是翻页后就会丢失之前保存的数据，我看到您的示例代码中给予了提示，但是具体怎么实现保存用户所有的复选框选择还是没有思路，能否给予点指引呢
@netbuffer netbuffer changed the title 关于适用server端分页，如何保存用户所有的复选框选择问题 关于使用server端分页，如何保存用户所有的复选框选择问题 May 25, 2015
@djhvscf
Copy link
Collaborator

djhvscf commented May 25, 2015

Please translate it to english

@netbuffer
Copy link
Author

I am poor in English,I want to achieve this demand：Checkbox selections are not being preserved when the pagination is done on server side.Would be great to be able to keep the state of the selections after the table is refreshed，I use the "maintainSelected =“true”“，but it doesn't work well

@wenzhixin
Copy link
Owner

Can you provide jsFiddle?(是否能够提供 jsFiddle 例子？) @netbuffer

@netbuffer
Copy link
Author

@wenzhixin 我现在用的server端分页，$('#data-bttable').bootstrapTable('getSelections')这个方法只能获得当前页用户选择的复选框，但是翻页后就不能保存状态了，怎么能实现用户翻页也能保存之前选择的复选框操作呢

@netbuffer
Copy link
Author

1
@wenzhixin http://issues.wenzhixin.net.cn/bootstrap-table/welcome.html

就像你写的这样，如何能保存我每页选中的复选框呢

@wenzhixin
Copy link
Owner

看这里的例子：http://issues.wenzhixin.net.cn/bootstrap-table/ ，也是使用 server 端分页，保存为 selections 并处理 responseHandler 就 OK 了。

@netbuffer
Copy link
Author

@wenzhixin 就是看的你写的这个demo，但是我想不明白怎么存储之前的数据，还想赐教哈

@wenzhixin
Copy link
Owner

View source: https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html

function responseHandler(res) {
    $.each(res.rows, function (i, row) {
        row.state = $.inArray(row.id, selections) !== -1;
    });
    return res;
}

@netbuffer
Copy link
Author

@wenzhixin 我这里的疑问就是selections这个变量，在翻页的时候又会被getIdSelections()方法重新赋值，那么之前的数据不就是被清空了么，我就是想不通怎么处理这个地方，应该是有个全局的数组去存储用户每一页的选择情况吧

@wenzhixin
Copy link
Owner

对，selections 是全局变量。

@netbuffer
Copy link
Author

@wenzhixin 额，那这里的问题怎么解决呢，你的demo中并没有实现这个需求，到底怎么才能实现呢，我是搞后端开发的，对前端的知识很欠缺，还请指教，谢谢了

@wenzhixin
Copy link
Owner

https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html 这里的 demo 就是实现了你说的功能：

var $table = $('#table'),
    selections = [];

$(function () {
    $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table', function () {
        selections = $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
        // push or splice the selections if you want to save all data selections
    });
});

function responseHandler(res) {
    $.each(res.rows, function (i, row) {
        row.state = $.inArray(row.id, selections) !== -1;
    });
    return res;
}

@netbuffer
Copy link
Author

@wenzhixin 你应该还是不明白我的意思吧，你的demo只能实现保存用户最后选择过的，这是因为$table.bootstrapTable('getSelections')方法获取的是当前页选中的行决定的，你可以试试http://issues.wenzhixin.net.cn/bootstrap-table/welcome.html
访问你这个demo，然后每一页都选择，然后再翻页，然后再翻页回去，看看是不是丢失了之前保存的

@wenzhixin
Copy link
Owner

是的，这里只是简单的处理最后选择的，假如要记录所有的，需要对 selections 进行处理：

// push or splice the selections if you want to save all data selections

你试下分开对 check.bs.table，uncheck.bs.table，check-all.bs.table，uncheck-all.bs.table 事件进行处理，需要对 array 进行操作。

@netbuffer
Copy link
Author

@wenzhixin 嗯，我就是这里想不清楚，想了两天啦，可以详细说明下这个地方怎么处理么，非常感谢！

@wenzhixin
Copy link
Owner

那你等等，我晚些有时间再写个完整的 demo 到 https://github.com/wenzhixin/bootstrap-table-examples 上，你那边假如实现了可以提交 pull request 到 example 上。

@netbuffer
Copy link
Author

@wenzhixin 好

@wenzhixin
Copy link
Owner

Added example: Maintain selected on server side: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/917.html

@wenzhixin
Copy link
Owner

ref #372 #450

@AggerChen
Copy link

AggerChen commented Mar 6, 2017 •
edited
Loading

你好，我是用js实现的表格，也通过你的例子实现了分页保存选择的数据。可是在处理数据的时候，他一直不能显示选中状态，row.status已经改为true页面上也没有选中，请问这是什么原因呢？
`
var union = function(array,ids){
$.each(ids, function (i, id) {
if($.inArray(id,array)==-1){
array[array.length] = id;
}
});
return array;
};

//取消选中事件
var difference = function(array,ids){
$.each(ids, function (i, id) {
var index = $.inArray(id,array);
if(index!=-1){
array.splice(index, 1);
}
});
return array;
};
var _ = {"union":union,"difference":difference};

$table.on('check.bs.table check-all.bs.table ' +
		'uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
		var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
		          return row.id;
		 }),
		 func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
		 selections = _[func](selections, ids);	
});

    //表格分页之前处理多选框数据
function responseHandler(res) {
	$.each(res.rows, function (i, row) {
	     row.state = $.inArray(row.id, selections) !== -1;
	 });
	return res;
}

`

@AggerChen
Copy link

AggerChen commented Mar 7, 2017 •
edited
Loading

不好意思，我想我弄明白是怎么回事了。
其中一句话：row.state = $.inArray(row.id, selections) !== -1;是在给state赋值，那么多选框的field就必须与之对应才能在页面上显示选中状态。
columns: [ {field: 'state',checkbox: true}, {field: 'id',visible:false} ]
原来是没有在checkbox字段添加field。谢谢

我写了一个示例，按照你的思路，实现了方法，需要的可以看看http://blog.csdn.net/github_36086968/article/details/60773900#comments

@wenzhixin wenzhixin mentioned this issue Mar 17, 2017
Closed
@strawberrydot
Copy link

strawberrydot commented Mar 20, 2017 •
edited
Loading

你好，我想请问一下，怎么把 selections 的值获取到呢，我可以把值打印出来，但是我想在别的地方对selections进行操作，会显示undefined，存到cookie里再拿出来么？

@Junglefish Junglefish mentioned this issue Jun 14, 2017
Closed
@zhujinjun
Copy link

如果client端分页，如果处理复选框问题。望指教，谢谢了。

@wenzhixin
Copy link
Owner

@zhujinjun 用 maintainSelected。

@282854650
Copy link

你好，我有旧版本js引用，单独点击一个的时候不报错，在全选的时候报错了，获取不然rows，请问这是怎么回事呢？ 如果不改变版本引用，我想获取当前页的数据，应该用什么方法呢？

@wenzhixin
Copy link
Owner

还是建议升级版本吧

@dabros dabros mentioned this issue Mar 22, 2018
Closed
@wenzhixin wenzhixin mentioned this issue May 15, 2019
Closed
@bkd
Copy link

bkd commented Jul 24, 2019 •
edited
Loading

Ive checked that the demo doesnt work properly. #917

Goto page 1 of the list of results. If you check the very top checkbox, it selects all. As expected. Uncheck this and then it unselects all. As expected.

Goto the next page in the pagination navigation, then browse back to the same page and the list is still checked - we should expect the list to be Unchecked.

If you select a single item, and unselect - this is done correctly, its just with the Unselect all - the rows are not removed from the selections array.

@bkd bkd mentioned this issue Jul 24, 2019
Closed
@jingshenbusi6530
Copy link

我使用这种方式实现了选中效果，但是使用getAllSelections方法，不能获取所有选中的数据，只能获取到当前页选中的数据，前一页或者后一页的处于选中状态的数据获取不到。maintainSelected这个属性也设置为true。

@wenzhixin
Copy link
Owner

@jingshenbusi6530 最新版本已经更新为 maintainMetaData.

@ghostsatan
Copy link

看这里的例子：http://issues.wenzhixin.net.cn/bootstrap-table/ ，也是使用 server 端分页，保存为 selections 并处理 responseHandler 就 OK 了。

打不开

@ghostsatan
Copy link

maintainSelected

这个属性怎么使用

@wenzhixin
Copy link
Owner

看下文档和例子 @ghostsatan

@ghostsatan
Copy link

看下文档和例子 @ghostsatan

http://issues.wenzhixin.net.cn/bootstrap-table/ 这个地方打不开

请问 文档的连接方便给一个吗

@wenzhixin
Copy link
Owner

http://bootstrap-table.com/
http://examples.bootstrap-table.com/

@ghostsatan
Copy link

ghostsatan commented May 28, 2020 •
edited
Loading

http://bootstrap-table.com/
http://examples.bootstrap-table.com/

维护之前很老的项目 估计版本比较老 代码没法重构

TableInit.Init = function() {
	$('#QTable').bootstrapTable({
		url: "http://" + comfun.ComIp.serviceIp + '/api/projectInfo/getDataList.json', //请求后台的URL（*）
		ajaxOptions: {
			headers: {
				'token': localStorage.getItem("token")
			},
		},
		method: 'POST', //请求方式（*）
		//exportDataType: "all",              //basic', 'all', 'selected'.
		clickToSelect: true, //是否启用点击选中行
		toolbar: '#toolbar', //工具按钮用哪个容器
		striped: true, //是否显示行间隔色
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		pagination: true, //是否显示分页（*）
		sortable: false, //是否启用排序
		//sortOrder: "desc",                   //排序方式
		queryParams: function(params) { //传递参数（*）
			var pageNumber = (params.limit + params.offset) / params.limit;
			temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				size: params.limit, //页面大小
				currentPage: pageNumber, //页码
				query: {
					type: $("#xmlx").val(),
					projectNode: $("#xmjd").val(),
					province: $("#xmsf").val(),
					region: $("#xmshi").val(),
					county: $("#xmqu").val(),
					progressTime: $("#xzny").val(),
					name: $("#xmmc").val(),
				}
			};
			return JSON.stringify(temp);
		},
		singleSelect: false,
		//queryParamsType: "json",
		contentType: "application/json",
		queryParamsType: "limit",
		responseHandler: function(res) {
			if (!res.success) {
				comfun.ErrorPage(res.code)
			}
			return res.result;
		},
		sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
		pageNumber: 1, //初始化加载第一页，默认第一页
		//pageSize: Math.ceil(($(window).height()) / 70),
		pageSize: 10,
		pageList: [10, 20, 30], //可供选择的每页的行数（*）
		//search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
		strictSearch: true,
		showColumns: true, //是否显示所有的列
		showRefresh: true, //是否显示刷新按钮
		minimumCountColumns: 2, //最少允许的列数
		height: $(window).height() - 110, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
		uniqueId: "", //每一行的唯一标识，一般为主键列
		showToggle: false, //是否显示详细视图和列表视图的切换按钮
		cardView: false, //是否显示详细视图
		detailView: false, //是否显示父子表
		showFooter: false,
		columns: [{
				checkbox: true,
			},
			{
				field: 'progressTime',
				title: '一张表日期',
				align: "center",
				formatter: function(value, rec) {
					return value
				}
			},
			{
				field: 'province',
				title: '省份',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'county',
				title: '项目地区',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'name',
				title: '项目名称',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'position',
				title: '位置',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'repairMode',
				title: '修复方式',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'primaryCoverage',
				title: '项目主要内容',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'plannedCompletionTime',
				title: '计划完工时间',
				align: "center",
				formatter: function(value, rec) {
					return comfun.formateDate(value);
				}
			},
			{
				field: 'projectProgress',
				title: '项目进度',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'workDone',
				title: '已完成工作',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'monthProgress',
				title: '本月主要进展',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'centerFund',
				title: '中央资金支持经费(万元)',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'centerFundPay',
				title: '已支出中央资金(万元)',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'localFundPay',
				title: '已支出地方资金(万元)',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'existingProblems',
				title: '存在主要问题',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'nextStepWork',
				title: '下一步工作',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'checkProgress',
				title: '核查进度（%）',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'inspectionTime',
				title: '现场核查时间',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
			{
				field: 'supervisionSituation',
				title: '监管情况',
				align: "center",
				formatter: function(value, rec) {
					return '<div class="length200" data-toggle="tooltip" title="' + value + '">' + value + '</div>'
				}
			},
		],
		onLoadSuccess: function(data) {
			$("[data-toggle='tooltip']").tooltip()
		},
		onEditableSave: function(field, row, oldValue, $el) {

		},
		onCheck: function(row) {;

		},
		onCheckAll: function(rows) {

		},
		onUncheck: function(row) {

		},
		onUncheckAll: function(rows) {},
		onClickRow: function(item, $element) {

		}
	});
};

不知道该在什么地方添加这个 分页保存 多选的问题

@wenzhixin
Copy link
Owner

你可以看下这个例子，加个参数：https://examples.bootstrap-table.com/#issues/917.html

@ghostsatan
Copy link

你可以看下这个例子，加个参数：https://examples.bootstrap-table.com/#issues/917.html

根据这例子尝试了一下

`

responseHandler: function (res) {
		$.each(res.result.rows, function (i, row) {
			row.state = $.inArray(row.id, selectionIds) !== -1;
			console.log(222,row);
		})
		return res.result;
	},`

这个地方 在第一页的时候选中两条数据 分页到第二页 然后在第二页返回第一页 打印出的row 显示出 第一页多选的两条数据的row.state 是true 但是页面上却不显示选中的样式 求解

@ghostsatan
Copy link

你可以看下这个例子，加个参数：https://examples.bootstrap-table.com/#issues/917.html

解决了

`

function stateFormatter(value, row, index) {
if (row.state == true)
return {
disabled : true,//设置是否可用
checked : true//设置选中
};
return value;
}`

多谢

@ghostsatan
Copy link

你可以看下这个例子，加个参数：https://examples.bootstrap-table.com/#issues/917.html

比如我现在 第一页选中了2个 第二页选中了 4个

我点击提交

SelectTable = $('#QTable').bootstrapTable("getAllSelections");
这个只能返回给我两个 为啥不是全部呢

@wenzhixin
Copy link
Owner

@ghostsatan server 分支只能获取当页的，多出来的要自己管理。

@wenzhixin wenzhixin mentioned this issue Feb 5, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@bkd @wenzhixin @djhvscf @netbuffer @strawberrydot @zhujinjun @jingshenbusi6530 @AggerChen @ghostsatan @282854650