jquery+layui传参 并将信息存入cookie

jquery+layui传参 并将信息存入cookie。弹出层页面是个多选列表,要求是是弹出层列表分页,要能记录每一页的选定参数,故此处使用cookie存储所有选定的checkbox选项,并返回给父级页面。
父页面为eidt.html,弹出层按钮为

<div class="form-group">
	<label for="" class="col-sm-3 control-label">医生印象</label>
	<div class="col-sm-9">
	   <button type="button" class="btn btn-info btn-flat" onclick="LayHtmlGetvalues(this.innerText,'{:url('wzmanage/doctor/searchDoctortag')}','1000','700')">选择</button>
	</div>
	<div class="col-sm-3"></div>
	<div class="col-sm-9 doc-imp">
	     {foreach $impdata as $v}
	   <a href="javascript:void(0);">{$v.label_name}<span style=""><input type="hidden" value="{$v.id}" name="doc_impression[]" data-name="{$v.label_name}" class=""><i class="fa fa-times"></i></span></a>
	     {/foreach}
	</div>
</div>

此处绑定点击事件

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('<a href="javascript:void(0);">'+jsonobj[j].dname+'<span style=""><input type="hidden" value="'+jsonobj[j].id+'" name="doc_impression[]" data-name="'+jsonobj[j].dname+'" class=""><i class="fa fa-times"></i></span></a>');
            //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)
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值