jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

jquery购物车插件jsorder是一个用于实现购物车功能的插件，其使用方法如下：

安装

<!-- 引入jsorder插件 -->
<script src="js/jquery.js"></script>
<script src="js/jsorder.min.js"></script>

初始化

// 初始化`jsOrder`插件
$.jsOrder({
    table: '#cart-box', // 购物车表格
    calculate: '#cart-sum', // 购物车总计
    deleteSelector: '.delete-one', // 序列号单元格删除按钮(可选项)
    clearSelector:  '#clear-cart', // 清空购物车按钮(可选项)
    numSelector: '.order-num', // 数量控件的类(可选项)
    priceSelector: '.order-price', // 单价控件类(可选项)
    submitSelector: '#submit-btn', // 提交按钮类(可选项)
    data: [{   // 初始化数据
        id: 1,
        name: '商品名称',
        price: 12.34,
        num: 1,
        total: 12.34
    }]
});

以上代码表示，在一个表格中放置了一个购物车，有删除商品的按钮和清空购物车的按钮，当数量发生变化时自动重新计算总价格，并支持提交到后台处理程序。

后台处理程序

// 此处使用PHP示例
$json_data = $_POST['data'];
$data = json_decode($json_data);

// 将接收到的购物车数据写入数据库(省略)

使用

在html中可以使用以下标记来添加商品。

<tr>
    <td>1</td>
    <td>商品名称</td>
    <td><input type="text" class="order-num" value="1" /></td>
    <td class="order-price">12.34</td>
    <td class="order-total">12.34</td>
    <td><a href="javascript:void(0);" class="delete-one">删除</a></td>
</tr>

其中，order-num表示数量控件，order-price表示单价控件，order-total表示小计控件，delete-one表示删除按钮。

示例

示例 1：添加商品

// 添加一件商品
$.jsOrder.add({
    id: 2,
    name: '商品名称2',
    price: 23.45,
    num: 1,
    total: 23.45
});

以上代码表示添加一个新的商品到购物车中。

示例 2：删除商品

// 删除id为1的商品
$.jsOrder.del(1);

以上代码表示删除id为1的商品。