<!doctype html> <html> <head> <meta charset="gbk"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge" ,Chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=9"/> <!--boostrap--> <link href="<?php echo base_url(); ?>static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="<?php echo base_url(); ?>static/bootstrap/js/jquery.min1.9.1.js"></script> <script src="<?php echo base_url(); ?>static/bootstrap/js/bootstrap.min.js"></script> <script src="<?php echo base_url(); ?>static/datatables/jquery.dataTables.min.js"></script> <link href="<?php echo base_url(); ?>static/datatables/dataTables.bootstrap.css" rel="stylesheet"> <script src="<?php echo base_url(); ?>static/datatables/dataTables.bootstrap.js"></script> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lte IE 9]> <script src="<?php echo base_url(); ?>static/iejs/respond.min.js"></script> <script src="<?php echo base_url(); ?>static/iejs/html5shiv.min.js"></script> <![endif]--> <link href="<?php echo base_url(); ?>static/mycss/mycss.css" rel="stylesheet"> <link href="<?php echo base_url(); ?>static/mycss/admins.css" rel="stylesheet"> <title>订单系统管理</title> </head> <body> <div class="container"> <!--<div class="row"> <div> <ul class="nav nav-tabs"> <li class="active"></li> </ul> </div> </div>--> <div class="row"> <div class="panel panel-info"> <div class="panel-heading"><h3 class="panel-title">订单管理</h3></div> <div class="panel-body"> <form class="form-inline" role="form"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active"> <input type="radio" name="works" id="works_all" value="works_all">全部 </label> <label class="btn btn-default"> <input type="radio" name="works" value="zs" id="works_zs">招商 </label> <label class="btn btn-default"> <input type="radio" name="works" value="sr" id="works_sr">善融 </label> <label class="btn btn-default"> <input type="radio" name="works" value="jh" id="works_jh">建行 </label> <label class="btn btn-default"> <input type="radio" name="works" value="gs" id="works_gs">工商 </label> <label class="btn btn-default"> <input type="radio" name="works" value="ms" id="works_ms">民生 </label> <label class="btn btn-default"> <input type="radio" name="works" value="tm" id="works_tm">天猫 </label> <label class="btn btn-default"> <input type="radio" name="works" value="yl" id="works_yl">邮乐 </label> <label class="btn btn-default"> <input type="radio" name="works" value="ykt" id="works_ykt">一卡通 </label> </div> <div class="form-group"> <label for="condition">查询条件:</label> <select name="condition" id="condition" class="form-control"> <option value="">选择条件</option> <option value="order_num">订单编号</option> <option value="dinghuo_tel">订单手机号</option> <option value="dinghuo">订收货人</option> <option value="order_time">订货时间</option> <option value="fahuo_time">发货时间</option> <option value="wuliu_num">物流单号</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" id="condition_val" name="condition_val"> </div> <div class="form-group"> <button type="button" id="btn_search" class="btn btn-primary" data-loading-text="查询中......">查 询 </button> </div> </form> </div> </div> </div> <div class="row"> <div id="alert_dialog"></div> </div> <!--class="table table-striped table-bordered table-hover table-full-width" --> <div class="row"> <!-- <button class="btn btn-default" id="visible">隐藏列</button> <button class="btn btn-default" id="get_checkbox">获取选中列</button> <button class="btn btn-default" id="get_checkbox">编 辑</button>--> <button class="btn btn-default" id="delete_order">删 除</button> <button class="btn btn-default" id="page_fresh">刷 新</button> </div> <br> <div class="row"> <table id="example" class="table table-striped table-bordered" cellpadding="0" border="0" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" id="checkAll"></th> <th>订单编号</th> <th>收货人</th> <th>订货人</th> <th>订货人电话</th> <th>收货人电话</th> <th>商品名称</th> <th>平 台</th> <th>收货地址</th> </tr> </thead> <tfoot> <tr> <th></th> <th>订单编号</th> <th>收货人</th> <th>订货人</th> <th>订货人电话</th> <th>收货人电话</th> <th>商品名称</th> <th>平 台</th> <th>收货地址</th> </tr> </tfoot> </table> </div> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel"> 模态框（Modal）标题 </h4> </div>--> <div class="modal-body"> 是否删除选中的数据 </div> <div class="modal-footer text-center"> <button type="button" class="btn btn-default" id="yes_delete" data-dismiss="modal"> 是 </button> <button type="button" class="btn btn-primary" data-dismiss="modal"> 否 </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <!-- 模态框（Modal） --> <div class="modal fade" id="check_data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body text-center"> <h4>先选择行数据</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </div> <script type="text/javascript" src="<?php echo base_url(); ?>static/datatables/jquery.jeditable.mini.js"></script> <script type="text/javascript"> $(document).ready(function () { datatable = $('#example').DataTable({ "processing": true, "bSort": false, "serverSide": true, "ajax": { "type": "post", "url": "<?php echo site_url();?>/admins/adminindex/get_datatable_data", // "url": "http://datatables.net/examples/server_side/scripts/jsonp.php", "dataType": "json" }, "columnDefs": [ { targets: 0, "render": function (data, type, rowdata, meta) { return "<input type="checkbox" name='order_checkbox' class='order_checkbox' value=" + data + '|' + rowdata.shouhuo_tel + ">"; } }, { targets: 7, "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { $(nTd).addClass('inputTd').attr('id', oData.id + '_' + oData.shouhuo_tel); } } ], "columns": [ {"data": "id", "orderable": false}, {"data": "order_num", '60px', "orderable": false}, {"data": "dinghuo", '60px'}, {"data": "shouhuo", '60px'}, {"data": "dinghuo_tel", '60px'}, {"data": "shouhuo_tel", '60px'}, {"data": "shangpin", '200px'}, {"data": "work", '40px'}, {"data": "songhuo_addr"} ], //创建行时使用 "fnCreatedRow": function (nRow, aData, iDataIndex) { //add selected class //console.info(nRow); $(nRow).click(function () { if ($(this).hasClass('row_selected')) { $(this).removeClass('row_selected'); } else { $('tr.row_selected').removeClass('row_selected'); //$(this).addClass('row_selected'); } }); }, //语言文件 "language": { "processing": "玩命加载中...", "lengthMenu": "显示 _MENU_ 项结果", "zeroRecords": "没有匹配结果", "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "infoEmpty": "显示第 0 至 0 项结果，共 0 项", "infoFiltered": "(由 _MAX_ 项结果过滤)", "infoPostFix": "", "search": "搜索:", "url": "", "paginate": { "first": "首页", "previous": "上页", "next": "下页", "slast": "末页" } }, initComplete: function () { var api = this.api(); var columns_indexes = api.columns().indexes().flatten(); api.columns().indexes().flatten().each(function (i) { var column = api.column(i); // console.info(column.header()); // console.info(column); }); }, "fnDrawCallback": function (data, x) { $('#example tbody td.inputTd').editable("<?php echo site_url();?>/admins/adminindex/edit_order", { indicator: '<img src="<?php echo base_url();?>/static/images/loading.gif">', tooltip: '点击编辑', //onblur : 'ignore', callback: function (value, settings) { if(value=='ok'){ datatable_fresh(); }else { alert('操作失败'); } }, submit: '<span style="cursor: pointer">保存</span>' }); } }); //xhr事件http://datatables.net/reference/event/xhr datatable.on('xhr.dt', function (e, settings, json) { // console.info(json); }); //重新加载ajax.url /*datatable.ajax.url("http://datatables.net/examples/server_side/scripts/jsonp.php").load(); datatable.ajax.dataType ="jsonp";*/ //点击事件 $('#example tbody').on('click', 'tr', function () { var name = $('td', this).eq(0).text(); var index = $(this).context._DT_RowIndex; //行号 // console.info($(this).context); //获取行数据 //console.info(datatable.row(this).data()); //alert('你点击了 ' + name + '这行' + index); }); // 获取按钮及数据 //alert($(".btn-group label.active input").val()); $("#btn_search").click(function () { var works = $(".btn-group label.active input").val(); var condition = $("#condition").val(); var condition_val = $("#condition_val").val(); if (!condition && condition_val) { alert("选择查询条件"); return false; } var jsons = {"works": works, "condition": condition, "condition_val": condition_val}; //datatable.settings()[0].ajax.data={"name":"hubing"}; datatable.settings().context[0].ajax.data = jsons; datatable.on( 'xhr.dt', function (e, settings, json) { if (json.data[0]) { //alert('ok'); } else { //alert('nook'); } //重置搜索按钮 $("#btn_search").button('reset'); } ).ajax.url("<?php echo site_url();?>/admins/adminindex/get_datatable_data").load(); $(this).button('loading').delay(1000).queue(function () { $(this).button('reset'); }); }); }); //隐藏列和显示列 $("#visible").on('click', function (e) { e.preventDefault(); var column = datatable.column(8); column.visible(!column.visible()); }); //执行删除操作 $("#delete_order").on('click', function (e) { e.preventDefault(); var gc = get_checkbox(); if (gc) { $('#myModal').modal('show'); gc = JSON.stringify(gc); $('#yes_delete').unbind("click").on('click', function () { $.post('<?php echo site_url();?>/admins/adminindex/delete_order', {"delete_order": gc}, function (back) { if(back) { $('#alert_dialog').html("<div class='alert alert-info'><a href='#' class='close' data-dismiss='alert'>×</a><strong>"+back+"条数据删除成功！</strong></div>"); }else { $('#alert_dialog').html("<div class='alert alert-warning'><a href='#' class='close' data-dismiss='alert'>×</a><strong>！</strong>删除操作失败。</div>"); } datatable_fresh(); }); }) } }); $("#get_checkbox").on('click', function (e) { e.preventDefault(); var gc = get_checkbox(); alert(gc); }); //获取选中的行数据 function get_checkbox() { var checkbox = new Array(); $("input[name='order_checkbox']").each(function () { if (this.checked) { checkbox.push($(this).val()); } }); if (!checkbox[0]) { //alert('选择行数据'); $('#check_data').modal('show'); return false; } else { return checkbox; } //console.info(checkbox); } //全选按钮 $("#checkAll").click(function () { if (this.checked) { $("input[name='order_checkbox']").each(function () { this.checked = true; }); } else { $("input[name='order_checkbox']").each(function () { this.checked = false; }); } } ); //刷新按钮 $("#page_fresh").click(function () { datatable_fresh(); }); //刷新当前页面 function datatable_fresh() { datatable.ajax.reload(null, false); } </script> </body> <style type="text/css"> .row_selected { background: red; } </style> </html>