列表展开折叠

解决方法如下 参考datatables 如下文档https://datatables.net/examples/api/row_details.html

代码如下

<%
layout("/layouts/private.html"){
%>

<link rel="stylesheet" href="${base!}/assets/css/datatables.css">
<section class="content-wrap bg-white">
<!--    <header class="header navbar bg-white shadow">
        <div class="btn-group tool-button" style="display:block">
            <a id="add" class="btn btn-primary navbar-btn" href="${base}/private/app/app_orders/add" data-pjax><i class="ti-plus"></i> 新建 App_order</a>
            <button class="btn btn-danger navbar-btn" onclick="delCheck()"><i class="ti-close"></i> 删除选中</button>


            <button class="btn btn-danger navbar-btn" onclick="transCode()"><i class="ti-close"></i> 发货添加单号</button>

        </div>
        <div class="btn-group tool-button col-lg-6">
            <div class="input-group navbar-btn">
                <input id="search" name="search" type="text" class="form-control" onkeydown="onKeyDown(event)"/>
                <span id="searchBtn" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
            </div>

        </div>
    </header>-->
    <div class=panel-body ><!--style="padding-top: 50px;" -->
        <div class="table-responsive no-border">
            <input id="id" type="hidden">
            <table id="example" class="table table-bordered table-striped mg-t datatable display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>用户ID</th>
                        <th>支付方式</th>
                        <th>订单状态</th>
                        <th>促销活动</th>
                        <th>结算金额</th>
                        <th>订单收货地址</th>
                        <th>收货人</th>
                        <th>收货人电话</th>
                        <th>快递公司名称</th>
                        <th>快递单号</th>
                        <th>收货时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>
<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">删除App_order</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        App_order删除后无法恢复。<br/>
                        <br/>确定删除吗？
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取  消</button>
                <button id="okDel" type="button" class="btn btn-primary" data-loading-text="正在删除...">确  定</button>
            </div>
        </div>
    </div>
</div>
<div id="dialogDetail" class="modal fade bs-modal-sm" tabindex="-3" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

<div id="dialogTransCode" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">填写订单发货快递单号</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        
                        <div class="form-group">
                            <label for="transCode" class="col-sm-2 control-label">填写快递单号</label>
                            <div class="col-sm-8">
                            <input type="text" id="transCode" class="form-control" name="transCode" data-parsley-required="true" placeholder="快递单号">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取  消</button>
                <button id="okTransCode" type="button" class="btn btn-primary" data-loading-text="正在更新...">确  定</button>
            </div>
        </div>
    </div>
</div>
<script language="JavaScript">
    /* Formatting function for row details - modify as you need */
    var datatable;
    function format ( d ) {
        var trs = "";
        var trs_temp ="";
        $.ajax({
            type: "POST",
            url: "${base}/private/app/app_order_items/data",
            data: "ord_id="+d.id ,
            success: function(items){
                $.each(items.data,function(i,v) {
                    if(v){
                        trs += "<tr>";
                        trs += "<td>" + v.prodName +"</td>";
                        trs += "<td>" + v.prodImgUrl +"</td>";
                        trs += "<td>" + v.color +"</td>";
                        trs += "<td>" + v.size +"</td>";
                        trs += "<td>" + v.prodNum +"</td>";
                        trs += "<td>" + v.prodPrice +"</td>";
                        trs += "</tr>";
                        var reg=new RegExp("null","g"); //创建正则RegExp对象
                        trs_temp = trs.replace(reg,"");    //替换null为空
//                        console.log(trs_temp);

                    }
                });
//                console.log(items.data);
//                console.log(trs);
                $("#item").append(trs_temp);
            }
        });
        var item_html = '<table id="item" class="table table-hover" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
        item_html+='<tr><th>产品名称</th><th>产品图片</th><th>颜色</th><th>尺寸</th><th>商品数量</th><th>商品价格</th></tr>';
        item_html += '</table>';
        // `d` is the original data object for the row
        return item_html;
    }
    $(document).ready(function() {
        var table = $('#example').DataTable( {
//            "dom": '<"toolbar">frtip',//页面显示结果数目
//            "searching":false,//搜索框
            "processing": false,
            "select": true,
            "ordering": true,
            "language": {
                "url": "${base}/assets/plugins/datatables/cn.json"
            },
            "preDrawCallback": function () {
                sublime.showLoadingbar($(".main-content"));
            },
            "drawCallback": function () {
                sublime.closeLoadingbar($(".main-content"));
            },
            "ajax": {
                "url": "${base}/private/app/app_orders/data",
                "type": "post",
                "data": function (d) {
                    d.unitid = $('#unitid').val();
                }
            },
            "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                {"data": "ordUserId", "bSortable": true},
                {"data": "checkStyle", "bSortable": true},
                {"data": "orderState", "bSortable": true},
                {"data": "saleContent", "bSortable": true},
                {"data": "totalPrice", "bSortable": true},
                {"data": "addrContent", "bSortable": true},
                {"data": "revName", "bSortable": true},
                {"data": "revPhone", "bSortable": true},
//                    {"data": "addrCode", "bSortable": true},
                {"data": "transName", "bSortable": true},
                {"data": "transCode", "bSortable": true},
                {"data": "receivTime", "bSortable": true},
            ],
//            "order": [[1, 'asc']]
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        if (data) {
                            var userId = data;
                            return '<a href="${base}/private/app/app_users/detail/' + userId + '" data-toggle="modal" data-target="#dialogDetail">'+ userId +'</a>';
                        }
                        return "";
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        if (data=="1") {
                            return '<i id="disable_' + row.id + '">待付款</i>';
                        } else if (data=="2"){
                            return '<i id="disable_' + row.id + '">待发货</i>';
                        }else if (data=="3"){
                            return '<i id="disable_' + row.id + '">待收货</i>';
                        }else if (data=="4"){
                            return '<i id="disable_' + row.id + '">待评论</i>';
                        }else if (data=="5"){
                            return '<i id="disable_' + row.id + '">退换货</i>';
                        }else {
                            return '<i id="disable_' + row.id + '">订单完成</i>';
                        }
                    },
                    "targets": 3
                },
                {
                    "render": function (data, type, row) {
                        return '<div class="btn-group"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
                                ' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
                                '<li><a href="${base}/private/app/app_orders/detail/' + row.id + '" data-toggle="modal" data-target="#dialogDetail">查看信息</a></li>' +
                                '<li><a href="${base}/private/app/app_orders/edit/' + row.id + '" data-pjax>修改信息</a></li>' +
                                '<li class="divider"></li>' +
                                '<li><a href="javascript:;" onclick="del(\'' + row.id + '\')">删除</a></li>' +
                                '</ul></div>';
                    },
                    "targets": 12
                }
            ]
        } );
        function del(id) {
            var dialog = $("#dialogDelete");
            dialog.modal("show");
            dialog.find("#okDel").unbind("click");
            dialog.find("#okDel").bind("click", function (event) {
                var btn = $(this);
                btn.button("loading");
                $.post("${base}/private/app/app_orders/delete/" + id, {}, function (data) {
                    if (data.code == 0) {
                        datatable.ajax.reload(null,false);
                    } else {
                        Toast.error(data.msg);
                    }
                    //重置按钮状态，关闭提示框
                    btn.button("reset");
                    dialog.modal("hide");
                }, "json");
            });
        }
        function delCheck() {
            var chks = datatable.rows('.selected').data();
            if (chks.length > 0) {
                var ids = [];
                $.each(datatable.rows('.selected').data(), function (i, n) {
                    ids.push(n.id);
                });
                var dialog = $("#dialogDelete");
                dialog.modal("show");
                dialog.find("#okDel").unbind("click");
                dialog.find("#okDel").bind("click", function (event) {
                    var btn = $(this);
                    btn.button("loading");
                    $.post("${base}/private/app/app_orders/delete", {ids: ids.toString()}, function (data) {
                        if (data.code == 0) {
                            datatable.ajax.reload(null,false);
                        } else {
                            Toast.error(data.msg);
                        }
                        btn.button("reset");
                        dialog.modal("hide");
                    }, "json");
                });
            } else {
                Toast.warning("请先选择要删除的App_order！");
            }
        }

        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );
    } );

</script>

<%}%>