json格式与cookie.jsy与laiui数据表格结合的实际使用

2020-04-25 23:55:22 阅读：267 来源： 互联网

标签：text goodsId json cookie var laiui goodsName

1. json格式

key和value都要用“”包裹###

`var employees = [
 { "firstName":"Bill" , "lastName":"Gates" },
 { "firstName":"George" , "lastName":"Bush" },
 { "firstName":"Thomas" , "lastName": "Carter" }
   ];

在js中

如果value值需要从前端组件中或者后端传值过来
格式可以写为

`var goodsId = $('.goodsId').text();
 var goodsName = $('.goodsName').text();

 var json = '[ {"goodsId:""'+goodsId+'","goodsName:""'+goodsName+'"
         }]'

浏览器json对象输出事例

2.具体事例（laiui数据表格与cookie结合）

laiyui数据表格需要json数据传入

cookie利用Json数据保存多条数据，每条数据对应多个值例如

`var employees = [
 { "firstName":"Bill" , "lastName":"Gates" },
 { "firstName":"George" , "lastName":"Bush" },
 { "firstName":"Thomas" , "lastName": "Carter" }
   ];'

转换为对象后可以从其中读取出多条数据

 var em = JSON.parse(employees);  //注意json中value值要用“”包裹
 alert(em[1].firstName); //数据访问方式

cookie.js的使用方法

https://www.cnblogs.com/webcome/p/5470975.html
其中要注意:引入jqurey.js和cookie.js文件，删除cookie时也要把path属性加上，不然有可能删除不成功,

如下代码为在原有cookie保存的json字符串上加上{ key:value}字符串

<script type="text/javascript">
  $(".add_shopping_car").click(function () {
    var goodsId = $('.goodsId').text();
    var goodsName = $('.goodsName').text();
    var goodsClass = $('.goodsClass').text();
	var introduce = $('.introduce').text();
	var price = $('.price').text();
	var image = $('.imageUrl').text();
    var number = $('.goodsNum').val();
    var productionDate = $('.productionDate').text();
    var json="[";
    var canAdd = true;
    var json1;
    var carContent;
    if ($.cookie("shopping_car")) {//cookie已存在，其中有值
      carContent = $.cookie("shopping_car");
      json1= $.parseJSON(carContent);;
      alert("cookie存在");
      $(json1).each(function () {
        json = json+' {"goodsId": "' + this.goodsId + '",\n' +
			'"goodsName":"' + this.goodsName + '",\n' +
			'"goodsClass":"' + this.goodsClass + '",\n' +
			 '"price":"' + this.price + '",\n' +
			'"number":"' + this.number + '",\n' +
			'"image":"' + this.image + '",\n' +
			'"productionDate":"' + this.productionDate + '"\n' +
			'  },';
		 })
	 json = json+'{"goodsId": "' + goodsId + '",\n' +
			 '"goodsName":"' + goodsName + '",\n' +
		 	'"goodsClass":"' + goodsClass + '",\n' +
		 	'"price":"' + price + '",\n' +
			'"number":"' + number + '",\n' +
			'"image":"' + image + '",\n' +
			'"productionDate":"' + productionDate + '"\n' +
		'  }]';
	 console.log(json);
	 var json2 = $.cookie("shopping_car", json, {path: "/"});

	 } else {
	   alert("cookie不存在");
		json = '[ {"goodsId": "' + goodsId + '",\n' +
			'"goodsName":"' + goodsName + '",\n' +
			 '"goodsClass":"' + goodsClass + '",\n' +
			'"price":"' + price + '",\n' +
			 '"number":"' + number + '",\n' +
			 '"image":"' + image + '",\n' +
			 '"productionDate":"' + productionDate + '"\n' +
		 '  }]';

		alert(json);
		var b = eval("(" + json + ")");
        var json2 = $.cookie("shopping_car", json, {path: "/"});//创建cookie
        console.log(b);
      }  
})
</script>

layui数据表格读取cookie中的数据

`<!--表格-->
 <script type="text/javascript">
layui.use('table', function () {
    var table = layui.table;
    if($.cookie("shopping_car")){
    var a=$.cookie("shopping_car");

        var jsonText2 = JSON.parse(a);//cookie中的json字符串转换成对象
        console.log(jsonText2)
        getjson(jsonText2);//调用渲染方法
    }

    function getjson(res) {
        var tableIns = table.render({
            elem: '#test' //指定原始表格元素选择器（推荐id选择器）
            , data: res
            , page: true //是否显示分页
            , limits: [1, 3, 5]
            , limit: 3 //每页默认显示的数量
            , cols: [
                [ //标题栏
                    {checkbox: true}
                    , {field: 'goodsId', title: 'ID', width: 80}
                    , {field: 'goodsName', title: '商品名称', width: 120}
                    , {field: 'image', title: '商品图片', templet: '#image', width: 200}
                    , {field: 'price', title: '价格', width: 100}
                    , {field: 'goodsClass', title: '类型', width: 120}
                    , {field: 'productionDate', title: '上架日期', width: 120}
                    , {fixed: 'right', width: 200, align: 'center', title: '操作', toolbar: '#barDemo'}
                ]
            ]

        })
    }

});

标签：text,goodsId,json,cookie,var,laiui,goodsName
来源： https://www.cnblogs.com/wxw540882/p/12776285.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9