基于jquery日历价格、库存等设置插件的示例分析

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

这篇文章将为大家详细讲解有关基于jquery日历价格、库存等设置插件的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

源码地址：https://github.com/capricorncd/calendar-price-jquery

Create by capricorncd / 2017-06-11

使用方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Capricorncd Calendar-Price-jQuery</title>
  <!-- 引入日历样式文件 -->
  <link rel="stylesheet" href="../build/calendar-price-jquery.css" rel="external nofollow" >
</head>
<body>

<!-- 日历显示的容器 -->
<div class="container"></div>

<!-- 引入jQuery.js文件 -->
<script class="lazy" data-src="jquery-1.12.4.min.js"></script>
<!-- 引入日历价格设置插件js文件 -->
<script class="lazy" data-src="../build/calendar-price-jquery.min.js"></script>
<script>
$(function () {

  // 以下mockData是模拟JSON数据，一般情况是从后端(服务器端)获取
  // 对象中'date'字段必须，且格式一定要为0000-00-00
  // 除'date'以为的字段需自定义，然后必须在config:[]中配置
  // 需要在日历中显示参数，需在show:[]中配置
  var mockData = [
    {
      date: "2017-06-21",
      stock: "9000",
      buyNumMax: "50",
      buyNumMin: "1",
      price: "0.12",
      priceMarket: "100.00",
      priceSettlement: "90.00",
      priceRetail: "99.00"
    },{
      date: "2017-07-12",
      stock: "9000",
      buyNumMax: "50",
      buyNumMin: "1",
      price: "12.00",
      priceMarket: "100.00",
      priceSettlement: "90.00",
      priceRetail: "99.00"
    }
  ];

  // 插件使用
  $.CalendarPrice({
    // 显示日历的容器
    el: '.container',
    // 设置开始日期
    startDate: '2017-08-02',
    // 设置日历显示结束日期
    endDate: '2017-09',
    // 初始数据
    data: mockData,
    // 配置需要设置的字段名称，请与你传入的数据对象对应
    config: [
      {
        key: 'buyNumMax',
        name: '最多购买数'
      },
      {
        key: 'buyNumMin',
        name: '最少购买数'
      },
      {
        key: 'price',
        name: '分销售价'
      },
      {
        key: 'priceMarket',
        name: '景区挂牌价'
      },
      {
        key: 'priceSettlement',
        name: '分销结算价'
      },
      {
        key: 'priceRetail',
        name: '建议零售价'
      },
      {
        key: 'cashback',
        name: '返现'
      },
      {
        key: 'stock',
        name: '当天库存'
      }
    ],
    // 配置在日历中要显示的字段
    show: [
      {
        key: 'price',
        name: '分:￥'
      },
      {
        key: 'priceSettlement',
        name: '采:￥'
      },
      {
        key: 'stock',
        name: '库:'
      }
    ],
    // 点击'确定'按钮，返回设置完成的所有数据
    callback: function (data) {
      console.log('callback ....');
      console.log(data);
    },
    // 点击'取消'按钮的回调函数
    cancel: function () {
      console.log('取消设置 ....');
      // 取消设置
      // 这里可以触发关闭设置窗口等操作
      // ...
    },
    // 错误等提示信息回调函数
    error: function (err) {
      console.error(err.msg);
    }
  });

});

</script>

</body>
</html>

使用效果图

基于jquery日历价格、库存等设置插件的示例分析