jquery+layui传参 并将信息存入cookie
jquery+layui传参 并将信息存入cookie。弹出层页面是个多选列表，要求是是弹出层列表分页，要能记录每一页的选定参数，故此处使用cookie存储所有选定的checkbox选项，并返回给父级页面。
父页面为eidt.html，弹出层按钮为
{foreach $impdata as $v}
{$v.label_name}
{/foreach}
此处绑定点击事件
window.LayHtmlGetvalues = function(title, url, w, h) {
if(title == null || title == '') {
title = false;
};
if(url == null || url == '') {
url = "404.html";
};
if(w == null || w == '') {
w = 768;
};
if(h == null || h== '') {
h = 600;
};
if(w == 'full') {
w = ($(window).width() * 0.95);
};
if(h == 'full') {
h = ($(window).height() - 50);
};
//给子页面传参
//打开先存储当前已选的impressiong到cookie
var ckids=[];
$("input[name='doc_impression[]']").each(function(){
var st={"id":$(this).val(),"dname":$(this).data('name')};
ckids.push(st);
});
var objstr = JSON.stringify(ckids); //JSON 数据转化成字符串
$.cookie('myck1',objstr,{ path: "/"});
var indexx=parent.layer.open({
type: 2,
area: [w + 'px', h + 'px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade: 0.4,
title: title,
content: url,
btn: ['保存'],
success: function(layero, index) {
//向iframe页的id=house的元素传值 // 参考 https://yq.aliyun.com/ziliao/133150
//var obj = $(layero).find("iframe")[0].contentWindow;
//obj.setCheckboxs(ckids);
},
yes: function(index, layero){
//获取子页面对象
var obj = $(layero).find("iframe")[0].contentWindow;
//var jsonobj=obj.getRadio();
var jsonobj=obj.getCheckboxs();
parent.layer.close(indexx); //执行关闭，注意此处indexx
console.log(jsonobj);
//alert(jsonobj.dname);
//getOnHosp(jsonobj);
getImpression(jsonobj);
$.removeCookie('myck1');
$.removeCookie('myck1',{ path: "/"});
},
btnAlign: 'c',
});
}
$(function () {
$('.form-group').on('click','.doc-imp a i',function () {
$(this).parents('a').remove();
});
});
//获取子页面传来的值，并改变本页面的结构
//获取单选的医院id和name
function getOnHosp(jsonobj){
$('#hosp_id').val(jsonobj.id);
$('#hosp_name').val(jsonobj.dname);
}
function getOnStore(jsonobj){
$('#store_id').val(jsonobj.id);
$('#store_name').val(jsonobj.dname);
}
function getImpression(jsonobj){
$('.doc-imp').empty();
for(j = 0; j < jsonobj.length; j++) {
$('.doc-imp').append(''+jsonobj[j].dname+'');
//alert(jsonobj[j].dname);
}
}
在子页面serch_doctag.html
先初始化选定的值
//载入页面初始化cookie，然后选中
$(function () {
//var cookieChoiceId = $.cookie('cookieChoiceId');//获取cookie值
var initcookie=$.cookie("myck1");
if(initcookie){
var initArray = $.parseJSON($.cookie("myck1"));
//console.log(cookieChoiceIdArray[0].id);
$(".datebox input:checkbox").each(function(){
var t = $(this);
$.each(initArray, function(i, item){
//遍历所有多选框对应值是否存在于cookie,存在选中它
if(t.val() == initArray[i].id){
console.log('值应该是'+t.val());
console.log('cook该是'+initArray[i].id);
t.attr('checked',true);
}
})
});
}
});
然后给每个checkbox绑定一个点击事件，来控制存入cookie中的值
('.datebox input:checkbox').click(function(){
var me = $(this);
//获取cookie值
//$.removeCookie('myck1');
//$.removeCookie('myck1',{ path: "/"});
var myck1 = $.cookie('myck1');
console.log($.cookie('myck1'));
if(!myck1 || myck1=='[]'){
console.log('1');
//如果cookie为空,则把当前值存在cookie
var jsonobj=[];
var s={"id":$(this).val(),"dname":$(this).data('name')};
jsonobj.push(s);
console.log(jsonobj);
var objstr = JSON.stringify(jsonobj); //JSON 数据转化成字符串
//$.cookie('cookieChoiceId', "888", { path: "/"});
$.cookie('myck1',objstr,{ path: "/"});
console.log($.cookie('myck1'));
}else {
console.log('第二部');
console.log($.cookie('myck1'));
//这变量为了区分cookie值里面有没有当前多选框的值
var flag = true;
//转化为对象数组
var myckArray = $.parseJSON($.cookie("myck1"));
console.log(myckArray[0].id);
//遍历数组
$.each(myckArray, function(i, item){
if(me.val() == myckArray[i].id){
flag = false;
//如果当前多选框值在cookie里面,删除它
myckArray.splice(i,1);
}
});
console.log(myckArray);
if(flag){
//如果cookie里边没有当前多选框值，则添加进去
var s={"id":$(this).val(),"dname":$(this).data('name')}
myckArray.push(s);
console.log(myckArray);
var objstr = JSON.stringify(myckArray); //JSON 数据转化成字符串
//$.cookie('cookieChoiceId', "888", { path: "/"});
$.cookie('myck1',objstr,{ path: "/"});
console.log($.cookie('myck1'));
}else{
//如果有的话,上面已经做了删除处理,把新的数组转成字符串,在存进去。
var objstring = JSON.stringify(myckArray); //JSON 数据转化成字符串
//$.cookie('cookieChoiceId', "888", { path: "/"});
$.cookie('myck1',objstring,{ path: "/"});
}
}
});
总结：
cookie中只能存储字符串，我们需要先将数组转成json字符串，然后存入cookie
//初始化一个空的json对象数组
var jsonobj=[];
//往数组中添加元素
var s={"id":$(this).val(),"dname":$(this).data('name')};
jsonobj.push(s);
var objstr = JSON.stringify(jsonobj); //json对象数组转化成字符串
$.cookie('myck1',objstr,{ path: "/"});
使用 . p a r s e J S O N ( .parseJSON( .parseJSON(.cookie(“myck1”))将json字符串转化成json对象数组
var myckArray = $.parseJSON($.cookie("myck1"));
console.log(myckArray[0].id);
//遍历数组
$.each(myckArray, function(i, item){
if(me.val() == myckArray[i].id){
flag = false;
//如果当前多选框值在cookie里面,删除它
myckArray.splice(i,1);
}
});
附带几个例子
json 数组也是数组
//1、
var jsonstr="[{'name':'a','value':1},{'name':'b','value':2}]";
var jsonarray = eval('('+jsonstr+')');
var arr =
{
"name" : $('#names').val(),
"value" : $('#values').val()
}
jsonarray.push(arr);
//2、
var json={};// 定义一个json对象
json.array1=["2","4"];// 增加一个新属性array1，此属性是数组
json.array1[json.array1.length]='6';// 数组追加一个元素
alert(json.array1)
//3、
var dic = new Array();
dic[i] = item;
console.log(dic)