select all 和 分页的搭配结合
一:select all按钮点击事件 记录一个全局变量globalselectall来记录op是否选中过
因为这个按钮的选中状态除了op点击,还会存在下面的按钮取消影响这个select all按钮
二:根据全局变量 揣摩出op想法 然后将点击分页的时候将这个状态随着,说白了就是第二页的时候如果之前点过全选
那么第二页也要都选中
三:个别选中后取消
所有的数据用一个隐藏域保存 id
选中后取消 根据全局变量和当前状态 判断出对象 然后 放入一个 隐藏域取消 中保存 因为数据点分页会变换
四:保存取消状态
根据那个隐藏域记录的id,全局变量,也就是说选中状态下的遍历的时候去判断隐藏域中id 有没有匹配有的话就不选中
五:以search 为分离 每次都是search 出来的数据 作为一个处理模块 当更改条件后再次search 保存 全选后取消的
那个隐藏域的值要清空
六:删除 也根据全局变量来
如果删除批量那么 对比 所有数据隐藏域 和 全选后取消的数据隐藏域
对比字符串 将 全选后取消的数据隐藏域中保存的值就行处理 到集合中 遍历,然后所有的数据 将这个id replace掉
js事件总和:
一:点击 select all 总按钮事件
1要把当前页面小按钮状态改变
2根据自身状态衍生出一个全局变量来代表是否点击过全选
3自身状态是选中的话 也就是之前全选后排除的也要重新选上,
也就是把保存排除的值清空以及隐藏域 不保留排除的状态
var globalselectall ="";
function selectallPromotioncode(obj) {
if ($(obj).bootstrapSwitch('state') == true) {
$(".PromotionDel").each(function () {
$(this).bootstrapSwitch('setState', true);
$(this).parent().attr("class", "checked");
});
$("#hidselectcancle").val("");//设置清空 记录全选后又取消的值 id
arrcanleids = "";//设置清空 记录取消值清空
//决定全局满足数据的变量
globalselectall = "yes";
}
else {
$(".PromotionDel").each(function () {
$(this).bootstrapSwitch('setState', false);
$(this).parent().removeAttr("class");
});
//决定全局满足数据的变量
globalselectall = "no";
}
}
二:小按钮点击事件
1 自身状态要是没选中 总按钮一定要变成没选中
2 用变量记录下来全选后取消的id 然后赋值给隐藏域
3 全选后取消后又自己手动点小按钮加上 变量要去掉此id
var arrcanleids = "";
function changechecked(obj) {
//除了取消状态 还要把全选之后取消的 id给记录下来
if (globalselectall=="yes") {
if ($(obj).bootstrapSwitch('state') == false) {
$("#chkall").bootstrapSwitch('setState', false);
$("#chkall").parent().removeAttr("class");
//记录下来 全选后取消的id
arrcanleids += "," + $(obj).val();
}
else {
//全选之后取消后又加上的
arrcanleids = arrcanleids.replace("," + $(obj).val(), "")
}
//把取消的id 值 都记录到隐藏域中
$("#hidselectcancle").val(arrcanleids);
}
}
三:点击 search 和 分页事件
1区别search和分页 为什么 因为search之后的数据又是新一轮数据 跟之前的不搭嘎 需要清空那些全局变量,记录值
2而分页点击的时候 数据还是当前这一轮的数据 所以状态要保留 全局变量来决定翻页后是否显示选中状态
3ajax 加载数据
function SearchPromotion(pageIndex) {
if (pageIndex==-1) {
$("#chkall").bootstrapSwitch('setState', false);
$("#chkall").parent().removeAttr("class");
globalselectall = "no";//设置清空 全局变量为no 没选中状态
$("#hidselectcancle").val("");//设置清空 记录全选后又取消的值 id
arrcanleids = "";//设置清空 记录取消值清空
pageIndex = 1;
}
var keyword = $("#txtKeywords").val();
var fromDate = $("#txtFromDate").val();
var toDate = $("#txtToDate").val();
var dateType = $("#sltDateType").val();
var key = $("#hidAdminKeyStr").val();//?adminkey=...
var keys = key.substring(1);//adminkey=..
var ConfirmationID = $("#txtConfirmationID").val();
//var url = "/AffordableWorld/PackageInfo/GetPromotion" + key + '&menuId=' + $('#hidMenuId').val();
var url1 = keys + '&menuId=' + $('#hidMenuId').val() + '&isselectall=' + globalselectall;//要求全选的时候 所有满足页码都选中 所以增加一个状态判断条件
if (keyword != null && keyword != "") {
url1 += "&keyword=" + keyword;
}
if (fromDate != null && fromDate != "") {
url1 += "&from=" + fromDate;
}
if (toDate != null && toDate != "") {
url1 += "&to=" + toDate;
}
if (ConfirmationID != null && ConfirmationID != "") {
url1 += "&confirmationid=" + ConfirmationID;
}
url1 += "&datetype=" + dateType;
url1 += "&pageIndex=" + pageIndex;
//$("#tbPromotion").load(encodeURI(url), function () {
// App.init();
//});
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
// Download progress
xhr.addEventListener("progress",
function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
},
false);
return xhr;
},
url: '/AffordableWorld/PackageInfo/GetPromotion',
type: 'GET',
data: url1,
beforeSend: function () {
$('.progress-bar').css('width', '15%');
$('.progress').show();
},
success: function (result) {
$('.progress-bar').css('width', '100%');
$('#tbPromotion').html(result);
setTimeout(function () { $('.progress').hide(); }, 500);
}
});
}
四:进行数据操作 拿删除为例
1:根据俩个隐藏域(一个是页面遍历数据的时候保存所有id的隐藏域)另一个是点击小按钮 记录全选取消后的id
2:根据全局变量判断 出 是批量还是页面处理
3:页面处理就删页面遍历出来的id总和
4:批量的话就根据俩个隐藏域记录的内容排除 一定要以 ,1,2,3 去比较 这样才能把,1 给replace掉
function DeletePromotion(e) {
var deleteIds = "";//记录所有
var calids = "";//记录排除的所有
var s = "";
var cal = ""
var datelistlength = "";
var key = $('#hidKey').val();
//leo 更新 分为俩种情况 一种是selectall 也就是综合数据(好几页) 另一种是当前页面选中的数据(普通操作数据)
// 全选状态又分两种 一种排除过 一种就是全选 没在排除过
if (globalselectall == "yes") {
//综合数据 所有的排除 取消的
s = $("#idlist").val(); //所有数据 ,1,2,3
cal = $("#hidselectcancle").val();//要排除数据 ,1
if (s != "") {
datelistlength = s.substring(1).split(',').length;//算删除的数量
if (cal != "") { // 全选有排除的 那么吧俩个隐藏域内容传到控制器去对比排除
deleteIds = s;
calids = cal;
var caldate = calids.substring(1).split(',').length;
datelistlength = datelistlength - caldate;
}
else {
deleteIds = s.substring(1);//全选没有排除的
}
}
}
else {
//当页数据
$(".PromotionDel").each(function () {
var choose = $(this).bootstrapSwitch('state');
if (choose) {
deleteIds += $(this).val() + ",";
}
});
if (deleteIds!="") {
deleteIds = deleteIds.substr(0, deleteIds.length - 1);
datelistlength = deleteIds.substring(0, deleteIds.length - 1).split(',').length;
}
}
if (deleteIds.length > 1) {
var con = confirm("Sure you want to delete " + datelistlength + " message(s) ?") //提示信息加数量
if (con) {
$.ajax({
type: 'POST',
url: "/AffordableWorld/PackageInfo/DeletePromotion",
data: { "ids": deleteIds, "calids": calids, "key": key },
dataType: "text",
beforeSend: function () { },
completed: function () { },
success: function (data) {
ShowMsgBox(data, "true");
},
error: function () { }
});
}
}
}
控制器中进行双隐藏域内容的对比
//leo 新增 把全选之后取消的 id集合给排除掉
string idStr = Request.Form["ids"]; //获取所有的id
string idcalStr = Request.Form["calids"]; //获取全选后排除的id
if (idcalStr!="") //说明了是全选后又有排除的情况 也就是,1,2,3 要排除 ,1,3这种
{
var callist = idcalStr.Substring(1).Split(','); //1,3
foreach (var item in callist)
{
idStr = idStr.Replace("," + item, ""); //把,1 ,3替换成空 也就是剩下,2
}
idStr = idStr.Substring(1);//然后最终 2
}