|
|
|
@ -4,48 +4,39 @@
|
|
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<!-- 设定IE浏览器使用最新的渲染引擎 -->
|
|
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
<!-- 设置网页编码为UTF-8 -->
|
|
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
<!-- 页面标题 -->
|
|
|
|
|
|
|
|
<title>查看药品库存列表 - 医院药品库存管理系统</title>
|
|
|
|
<title>查看药品库存列表 - 医院药品库存管理系统</title>
|
|
|
|
<!-- 页面描述，有助于SEO -->
|
|
|
|
|
|
|
|
<meta name="description" content="查看药品库存列表 - 医院药品库存管理系统" />
|
|
|
|
<meta name="description" content="查看药品库存列表 - 医院药品库存管理系统" />
|
|
|
|
<!-- 视口设置，确保页面在不同设备上正确显示 -->
|
|
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
|
|
<!-- 引入Bootstrap和FontAwesome样式 -->
|
|
|
|
<!-- bootstrap & fontawesome -->
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
|
|
|
|
<!-- 页面特定插件的样式 -->
|
|
|
|
<!-- page specific plugin styles -->
|
|
|
|
<!-- 引入文本字体样式 -->
|
|
|
|
<!-- text fonts -->
|
|
|
|
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
|
|
|
|
<!-- 引入Ace框架的样式 -->
|
|
|
|
<!-- ace styles -->
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
|
|
|
|
<!-- 针对IE9及以下版本的样式 -->
|
|
|
|
|
|
|
|
<!--[if lte IE 9]>
|
|
|
|
<!--[if lte IE 9]>
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
|
|
|
|
<![endif]-->
|
|
|
|
<![endif]-->
|
|
|
|
<!-- 引入Ace框架的皮肤样式 -->
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
|
|
|
|
<!-- 引入Ace框架的RTL（从右到左）支持样式 -->
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
|
|
|
|
<!-- 针对IE9及以下版本的样式 -->
|
|
|
|
|
|
|
|
<!--[if lte IE 9]>
|
|
|
|
<!--[if lte IE 9]>
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
|
|
|
|
<link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
|
|
|
|
<![endif]-->
|
|
|
|
<![endif]-->
|
|
|
|
<!-- 与本页相关的内联样式 -->
|
|
|
|
<!-- inline styles related to this page -->
|
|
|
|
<!-- 引入Ace框架的设置处理器脚本 -->
|
|
|
|
<!-- ace settings handler -->
|
|
|
|
<script src="../assets/js/ace-extra.min.js"></script>
|
|
|
|
<script src="../assets/js/ace-extra.min.js"></script>
|
|
|
|
<!-- 引入HTML5shiv和Respond.js库，用于IE8支持HTML5元素和媒体查询 -->
|
|
|
|
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
|
|
|
|
<!--[if lte IE 8]>
|
|
|
|
<!--[if lte IE 8]>
|
|
|
|
<script src="../assets/js/html5shiv.min.js"></script>
|
|
|
|
<script src="../assets/js/html5shiv.min.js"></script>
|
|
|
|
<script src="../assets/js/respond.min.js"></script>
|
|
|
|
<script src="../assets/js/respond.min.js"></script>
|
|
|
|
<![endif]-->
|
|
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body class="no-skin">
|
|
|
|
<body class="no-skin">
|
|
|
|
<div id="navbar" class="navbar navbar-default ace-save-state">
|
|
|
|
<div id="navbar" class="navbar navbar-default ace-save-state">
|
|
|
|
<div class="navbar-container ace-save-state" id="navbar-container">
|
|
|
|
<div class="navbar-container ace-save-state" id="navbar-container">
|
|
|
|
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
|
|
|
|
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
|
|
|
|
<span class="sr-only">Toggle sidebar</span>
|
|
|
|
<span class="sr-only">Toggle sidebar</span>
|
|
|
|
@ -149,8 +140,8 @@
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div><!-- /.navbar-container -->
|
|
|
|
</div><!-- /.navbar-container -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="main-container ace-save-state" id="main-container">
|
|
|
|
<div class="main-container ace-save-state" id="main-container">
|
|
|
|
<script type="text/javascript">
|
|
|
|
<script type="text/javascript">
|
|
|
|
try{ace.settings.loadState('main-container')}catch(e){}
|
|
|
|
try{ace.settings.loadState('main-container')}catch(e){}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
@ -408,51 +399,45 @@
|
|
|
|
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
|
|
|
|
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
|
|
|
|
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
|
|
|
|
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div><!-- /.main-container -->
|
|
|
|
</div><!-- /.main-container -->
|
|
|
|
<!-- basic scripts -->
|
|
|
|
<!-- basic scripts -->
|
|
|
|
<!--[if !IE]> -->
|
|
|
|
<!--[if !IE]> -->
|
|
|
|
<script src="../assets/js/jquery-2.1.4.min.js"></script>
|
|
|
|
<script src="../assets/js/jquery-2.1.4.min.js"></script>
|
|
|
|
<!-- <![endif]-->
|
|
|
|
<!-- <![endif]-->
|
|
|
|
<!--[if IE]>
|
|
|
|
<!--[if IE]>
|
|
|
|
<script src="../assets/js/jquery-1.11.3.min.js"></script>
|
|
|
|
<script src="../assets/js/jquery-1.11.3.min.js"></script>
|
|
|
|
<![endif]-->
|
|
|
|
<![endif]-->
|
|
|
|
<script type="text/javascript">
|
|
|
|
<script type="text/javascript">
|
|
|
|
// 检查浏览器是否支持触摸事件，如果是，则动态加载移动端的jQuery库
|
|
|
|
|
|
|
|
if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
|
|
|
|
if('ontouchstart' in document.documentElement) document.write("<script src='../assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script src="../assets/js/bootstrap.min.js"></script>
|
|
|
|
<!-- 引入Bootstrap的JavaScript库 -->
|
|
|
|
<!-- page specific plugin scripts -->
|
|
|
|
<script src="../assets/js/bootstrap.min.js"></script>
|
|
|
|
<script src="../assets/js/jquery.dataTables.min.js"></script>
|
|
|
|
|
|
|
|
<script src="../assets/js/jquery.dataTables.bootstrap.min.js"></script>
|
|
|
|
<!-- 页面特定的插件脚本 -->
|
|
|
|
<script src="../assets/js/dataTables.buttons.min.js"></script>
|
|
|
|
<script src="../assets/js/jquery.dataTables.min.js"></script> <!-- 引入DataTables插件 -->
|
|
|
|
<script src="../assets/js/buttons.flash.min.js"></script>
|
|
|
|
<script src="../assets/js/jquery.dataTables.bootstrap.min.js"></script> <!-- DataTables的Bootstrap样式集成 -->
|
|
|
|
<script src="../assets/js/buttons.html5.min.js"></script>
|
|
|
|
<script src="../assets/js/dataTables.buttons.min.js"></script> <!-- DataTables的按钮扩展 -->
|
|
|
|
<script src="../assets/js/buttons.print.min.js"></script>
|
|
|
|
<script src="../assets/js/buttons.flash.min.js"></script> <!-- 按钮扩展的Flash导出功能 -->
|
|
|
|
<script src="../assets/js/buttons.colVis.min.js"></script>
|
|
|
|
<script src="../assets/js/buttons.html5.min.js"></script> <!-- 按钮扩展的HTML5导出功能 -->
|
|
|
|
<script src="../assets/js/dataTables.select.min.js"></script>
|
|
|
|
<script src="../assets/js/buttons.print.min.js"></script> <!-- 按钮扩展的打印功能 -->
|
|
|
|
<!-- ace scripts -->
|
|
|
|
<script src="../assets/js/buttons.colVis.min.js"></script> <!-- 按钮扩展的列可见性控制 -->
|
|
|
|
<script src="../assets/js/ace-elements.min.js"></script>
|
|
|
|
<script src="../assets/js/dataTables.select.min.js"></script> <!-- DataTables的选择功能 -->
|
|
|
|
<script src="../assets/js/ace.min.js"></script>
|
|
|
|
|
|
|
|
<!-- inline scripts related to this page -->
|
|
|
|
<!-- Ace框架的脚本 -->
|
|
|
|
<script type="text/javascript">
|
|
|
|
<script src="../assets/js/ace-elements.min.js"></script> <!-- Ace框架的元素脚本 -->
|
|
|
|
|
|
|
|
<script src="../assets/js/ace.min.js"></script> <!-- Ace框架的核心脚本 -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 与本页面相关的内联脚本 -->
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
jQuery(function($) {
|
|
|
|
jQuery(function($) {
|
|
|
|
// 初始化DataTables插件
|
|
|
|
//initiate dataTables plugin
|
|
|
|
var myTable =
|
|
|
|
var myTable =
|
|
|
|
$('#dynamic-table')
|
|
|
|
$('#dynamic-table')
|
|
|
|
//.wrap("<div class='dataTables_borderWrap' />") // 如果应用水平滚动（sScrollX），可以取消注释这行代码
|
|
|
|
//.wrap("<div class='dataTables_borderWrap' />") //if you are applying horizontal scrolling (sScrollX)
|
|
|
|
.DataTable( {
|
|
|
|
.DataTable( {
|
|
|
|
bAutoWidth: false, // 关闭自动宽度调整
|
|
|
|
bAutoWidth: false,
|
|
|
|
"aoColumns": [ // 定义各列的排序属性
|
|
|
|
"aoColumns": [
|
|
|
|
{ "bSortable": false }, null,null, null, null, { "bSortable": false }
|
|
|
|
{ "bSortable": false }, null,null, null, null, { "bSortable": false }
|
|
|
|
],
|
|
|
|
],
|
|
|
|
"aaSorting": [], // 初始化时不排序
|
|
|
|
"aaSorting": [],
|
|
|
|
"iDisplayLength": 5, // 默认每页显示5条记录
|
|
|
|
"iDisplayLength": 5,
|
|
|
|
"aLengthMenu": [ // 定义每页显示记录数的选项
|
|
|
|
"aLengthMenu": [
|
|
|
|
[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, -1],
|
|
|
|
[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, -1],
|
|
|
|
["5 条", "10 条", "15 条", "20 条", "25 条", "30 条", "35 条", "40 条", "45 条", "50 条", "全部"]
|
|
|
|
["5 条", "10 条", "15 条", "20 条", "25 条", "30 条", "35 条", "40 条", "45 条", "50 条", "全部"]
|
|
|
|
],
|
|
|
|
],
|
|
|
|
@ -463,201 +448,162 @@
|
|
|
|
"sInfoEmpty": "没有数据",
|
|
|
|
"sInfoEmpty": "没有数据",
|
|
|
|
"sInfoFiltered": "(从 _MAX_ 条数据中检索) ",
|
|
|
|
"sInfoFiltered": "(从 _MAX_ 条数据中检索) ",
|
|
|
|
"sSearch": "检索",
|
|
|
|
"sSearch": "检索",
|
|
|
|
"oPaginate": { // 分页按钮的文本
|
|
|
|
"oPaginate": {
|
|
|
|
"sFirst": "首页",
|
|
|
|
"sFirst": "首页",
|
|
|
|
"sPrevious": "前一页",
|
|
|
|
"sPrevious": "前一页",
|
|
|
|
"sNext": "后一页",
|
|
|
|
"sNext": "后一页",
|
|
|
|
"sLast": "尾页"
|
|
|
|
"sLast": "尾页"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 以下选项被注释，表示未启用
|
|
|
|
//"bProcessing": true,
|
|
|
|
// "bProcessing": true,
|
|
|
|
//"bServerSide": true,
|
|
|
|
// "bServerSide": true,
|
|
|
|
//"sAjaxSource": "http://127.0.0.1/table.php" ,
|
|
|
|
// "sAjaxSource": "http://127.0.0.1/table.php",
|
|
|
|
//,
|
|
|
|
// "sScrollY": "200px",
|
|
|
|
//"sScrollY": "200px",
|
|
|
|
// "bPaginate": false,
|
|
|
|
//"bPaginate": false,
|
|
|
|
// "sScrollX": "100%",
|
|
|
|
//"sScrollX": "100%",
|
|
|
|
// "sScrollXInner": "120%",
|
|
|
|
//"sScrollXInner": "120%",
|
|
|
|
// "bScrollCollapse": true,
|
|
|
|
//"bScrollCollapse": true,
|
|
|
|
select: { // 选择功能的配置
|
|
|
|
//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
|
|
|
|
style: 'multi' // 多选模式
|
|
|
|
//you may want to wrap the table inside a "div.dataTables_borderWrap" element
|
|
|
|
|
|
|
|
//"iDisplayLength": 50
|
|
|
|
|
|
|
|
select: {
|
|
|
|
|
|
|
|
style: 'multi'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
|
|
|
|
$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
|
|
|
|
|
|
|
|
new $.fn.dataTable.Buttons( myTable, {
|
|
|
|
|
|
|
|
buttons: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "colvis",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold",
|
|
|
|
|
|
|
|
columns: ':not(:first):not(:last)'
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "copy",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "csv",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "excel",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "pdf",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "print",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold",
|
|
|
|
|
|
|
|
autoPrint: false,
|
|
|
|
|
|
|
|
message: 'This print was produced using the Print button for DataTables'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
myTable.buttons().container().appendTo( $('.tableTools-container') );
|
|
|
|
|
|
|
|
//style the message box
|
|
|
|
|
|
|
|
var defaultCopyAction = myTable.button(1).action();
|
|
|
|
|
|
|
|
myTable.button(1).action(function (e, dt, button, config) {
|
|
|
|
|
|
|
|
defaultCopyAction(e, dt, button, config);
|
|
|
|
|
|
|
|
$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
var defaultColvisAction = myTable.button(0).action();
|
|
|
|
|
|
|
|
myTable.button(0).action(function (e, dt, button, config) {
|
|
|
|
|
|
|
|
defaultColvisAction(e, dt, button, config);
|
|
|
|
|
|
|
|
if($('.dt-button-collection > .dropdown-menu').length == 0) {
|
|
|
|
|
|
|
|
$('.dt-button-collection')
|
|
|
|
|
|
|
|
.wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
|
|
|
|
|
|
|
|
.find('a').attr('href', '#').wrap("<li />")
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
////
|
|
|
|
$.fn.dataTable.Buttons.defaults.dom.container.className = 'dt-buttons btn-overlap btn-group btn-overlap';
|
|
|
|
setTimeout(function() {
|
|
|
|
new $.fn.dataTable.Buttons( myTable, {
|
|
|
|
$($('.tableTools-container')).find('a.dt-button').each(function() {
|
|
|
|
buttons: [
|
|
|
|
var div = $(this).find(' > div').first();
|
|
|
|
{
|
|
|
|
if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
|
|
|
|
"extend": "colvis",
|
|
|
|
else $(this).tooltip({container: 'body', title: $(this).text()});
|
|
|
|
"text": "<i class='fa fa-search bigger-110 blue'></i> <span class='hidden'>Show/hide columns</span>",
|
|
|
|
});
|
|
|
|
"className": "btn btn-white btn-primary btn-bold",
|
|
|
|
}, 500);
|
|
|
|
columns: ':not(:first):not(:last)'
|
|
|
|
myTable.on( 'select', function ( e, dt, type, index ) {
|
|
|
|
},
|
|
|
|
if ( type === 'row' ) {
|
|
|
|
{
|
|
|
|
$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
|
|
|
|
"extend": "copy",
|
|
|
|
}
|
|
|
|
"text": "<i class='fa fa-copy bigger-110 pink'></i> <span class='hidden'>Copy to clipboard</span>",
|
|
|
|
} );
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
myTable.on( 'deselect', function ( e, dt, type, index ) {
|
|
|
|
},
|
|
|
|
if ( type === 'row' ) {
|
|
|
|
{
|
|
|
|
$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
|
|
|
|
"extend": "csv",
|
|
|
|
}
|
|
|
|
"text": "<i class='fa fa-database bigger-110 orange'></i> <span class='hidden'>Export to CSV</span>",
|
|
|
|
} );
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
/////////////////////////////////
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "excel",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-file-excel-o bigger-110 green'></i> <span class='hidden'>Export to Excel</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "pdf",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-file-pdf-o bigger-110 red'></i> <span class='hidden'>Export to PDF</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
"extend": "print",
|
|
|
|
|
|
|
|
"text": "<i class='fa fa-print bigger-110 grey'></i> <span class='hidden'>Print</span>",
|
|
|
|
|
|
|
|
"className": "btn btn-white btn-primary btn-bold",
|
|
|
|
|
|
|
|
autoPrint: false,
|
|
|
|
|
|
|
|
message: 'This print was produced using the Print button for DataTables'
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
myTable.buttons().container().appendTo( $('.tableTools-container') );
|
|
|
|
|
|
|
|
// 将DataTables的按钮容器附加到.tableTools-container元素中
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//style the message box
|
|
|
|
|
|
|
|
var defaultCopyAction = myTable.button(1).action();
|
|
|
|
|
|
|
|
// 获取复制按钮的默认操作
|
|
|
|
|
|
|
|
myTable.button(1).action(function (e, dt, button, config) {
|
|
|
|
|
|
|
|
defaultCopyAction(e, dt, button, config);
|
|
|
|
|
|
|
|
// 执行复制按钮的默认操作
|
|
|
|
|
|
|
|
$('.dt-button-info').addClass('gritter-item-wrapper gritter-info gritter-center white');
|
|
|
|
|
|
|
|
// 为消息框添加样式
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
var defaultColvisAction = myTable.button(0).action();
|
|
|
|
|
|
|
|
// 获取列显示/隐藏按钮的默认操作
|
|
|
|
|
|
|
|
myTable.button(0).action(function (e, dt, button, config) {
|
|
|
|
|
|
|
|
defaultColvisAction(e, dt, button, config);
|
|
|
|
|
|
|
|
// 执行列显示/隐藏按钮的默认操作
|
|
|
|
|
|
|
|
if($('.dt-button-collection > .dropdown-menu').length == 0) {
|
|
|
|
|
|
|
|
// 如果下拉菜单不存在
|
|
|
|
|
|
|
|
$('.dt-button-collection')
|
|
|
|
|
|
|
|
.wrapInner('<ul class="dropdown-menu dropdown-light dropdown-caret dropdown-caret" />')
|
|
|
|
|
|
|
|
.find('a').attr('href', '#').wrap("<li />")
|
|
|
|
|
|
|
|
// 将按钮集合包装成下拉菜单样式
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.dt-button-collection').appendTo('.tableTools-container .dt-buttons')
|
|
|
|
|
|
|
|
// 将下拉菜单附加到.tableTools-container的.dt-buttons中
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
|
|
|
// 设置一个延时，确保DOM元素已经渲染完成
|
|
|
|
|
|
|
|
$($('.tableTools-container')).find('a.dt-button').each(function() {
|
|
|
|
|
|
|
|
var div = $(this).find(' > div').first();
|
|
|
|
|
|
|
|
// 为每个按钮找到它的第一个直接子div
|
|
|
|
|
|
|
|
if(div.length == 1) div.tooltip({container: 'body', title: div.parent().text()});
|
|
|
|
|
|
|
|
// 如果找到div，为这个div添加tooltip
|
|
|
|
|
|
|
|
else $(this).tooltip({container: 'body', title: $(this).text()});
|
|
|
|
|
|
|
|
// 否则，为按钮本身添加tooltip
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
// 设置延时500毫秒后执行上述代码
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myTable.on( 'select', function ( e, dt, type, index ) {
|
|
|
|
|
|
|
|
// 监听行选择事件
|
|
|
|
|
|
|
|
if ( type === 'row' ) {
|
|
|
|
|
|
|
|
$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', true);
|
|
|
|
|
|
|
|
// 如果选择了行，将该行的checkbox设置为选中状态
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
myTable.on( 'deselect', function ( e, dt, type, index ) {
|
|
|
|
|
|
|
|
// 监听行取消选择事件
|
|
|
|
|
|
|
|
if ( type === 'row' ) {
|
|
|
|
|
|
|
|
$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
|
|
|
|
|
|
|
|
// 如果取消了行的选择，将该行的checkbox设置为未选中状态
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//table checkboxes
|
|
|
|
//table checkboxes
|
|
|
|
$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
|
|
|
|
$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
|
|
|
|
// 将表头和表体中的所有checkbox设置为未选中状态
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//select/deselect all rows according to table header checkbox
|
|
|
|
//select/deselect all rows according to table header checkbox
|
|
|
|
$('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
|
|
|
|
$('#dynamic-table > thead > tr > th input[type=checkbox], #dynamic-table_wrapper input[type=checkbox]').eq(0).on('click', function(){
|
|
|
|
var th_checked = this.checked;//checkbox inside "TH" table header
|
|
|
|
var th_checked = this.checked;//checkbox inside "TH" table header
|
|
|
|
// 获取表头checkbox的选中状态
|
|
|
|
|
|
|
|
$('#dynamic-table').find('tbody > tr').each(function(){
|
|
|
|
$('#dynamic-table').find('tbody > tr').each(function(){
|
|
|
|
var row = this;
|
|
|
|
var row = this;
|
|
|
|
if(th_checked) myTable.row(row).select();
|
|
|
|
if(th_checked) myTable.row(row).select();
|
|
|
|
else myTable.row(row).deselect();
|
|
|
|
else myTable.row(row).deselect();
|
|
|
|
// 根据表头checkbox的状态，选择或取消选择每一行
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// 监听表头checkbox的点击事件，根据点击状态选择或取消选择所有行
|
|
|
|
//select/deselect a row when the checkbox is checked/unchecked
|
|
|
|
// 当复选框被选中或取消选中时，选择或取消选择对应的行
|
|
|
|
|
|
|
|
$('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
$('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
var row = $(this).closest('tr').get(0); // 获取当前复选框所在的行
|
|
|
|
var row = $(this).closest('tr').get(0);
|
|
|
|
// 注意这里的逻辑可能有问题：通常当复选框被选中时应该选择行，被取消选中时应该取消选择行
|
|
|
|
if(this.checked) myTable.row(row).deselect();
|
|
|
|
// 但这里的代码是在复选框被选中时调用 deselect 方法，在取消选中时调用 select 方法
|
|
|
|
else myTable.row(row).select();
|
|
|
|
// 这可能是个错误，或者是特定上下文中的特殊逻辑
|
|
|
|
|
|
|
|
if(this.checked) myTable.row(row).deselect(); // 如果复选框被选中，则取消选择该行
|
|
|
|
|
|
|
|
else myTable.row(row).select(); // 如果复选框被取消选中，则选择该行
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 阻止 #dynamic-table 中 .dropdown-toggle 的点击事件冒泡和默认行为
|
|
|
|
|
|
|
|
$(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
|
|
|
|
$(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
|
|
|
|
e.stopImmediatePropagation(); // 立即停止事件冒泡
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
e.stopPropagation(); // 停止事件冒泡
|
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
e.preventDefault();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//And for the first simple table, which doesn't have TableTools or dataTables
|
|
|
|
// 对于没有 TableTools 或 dataTables 的简单表格
|
|
|
|
//select/deselect all rows according to table header checkbox
|
|
|
|
// 根据表头复选框选中状态选择或取消选择所有行
|
|
|
|
var active_class = 'active';
|
|
|
|
var active_class = 'active'; // 定义活动行的类名
|
|
|
|
|
|
|
|
$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
|
|
|
|
$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
|
|
|
|
var th_checked = this.checked; // 获取表头复选框的选中状态
|
|
|
|
var th_checked = this.checked;//checkbox inside "TH" table header
|
|
|
|
$(this).closest('table').find('tbody > tr').each(function(){ // 遍历表格中的所有行
|
|
|
|
$(this).closest('table').find('tbody > tr').each(function(){
|
|
|
|
var row = this; // 当前行
|
|
|
|
var row = this;
|
|
|
|
if(th_checked) { // 如果表头复选框被选中
|
|
|
|
if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true);
|
|
|
|
$(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true); // 为当前行添加活动类名，并选中复选框
|
|
|
|
else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false);
|
|
|
|
} else { // 如果表头复选框被取消选中
|
|
|
|
|
|
|
|
$(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false); // 移除当前行的活动类名，并取消选中复选框
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//select/deselect a row when the checkbox is checked/unchecked
|
|
|
|
// 当简单表格中的复选框被选中或取消选中时，选择或取消选择对应的行（并添加或移除活动类名）
|
|
|
|
|
|
|
|
$('#simple-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
$('#simple-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
var $row = $(this).closest('tr'); // 获取当前复选框所在的行
|
|
|
|
var $row = $(this).closest('tr');
|
|
|
|
if($row.is('.detail-row ')) return; // 如果当前行是详情行，则直接返回，不做任何操作
|
|
|
|
if($row.is('.detail-row ')) return;
|
|
|
|
if(this.checked) $row.addClass(active_class); // 如果复选框被选中，则为当前行添加活动类名
|
|
|
|
if(this.checked) $row.addClass(active_class);
|
|
|
|
else $row.removeClass(active_class); // 如果复选框被取消选中，则移除当前行的活动类名
|
|
|
|
else $row.removeClass(active_class);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
/********************************/
|
|
|
|
// 为小视图操作按钮添加工具提示
|
|
|
|
//add tooltip for small view action buttons in dropdown menu
|
|
|
|
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement}); // 使用自定义的 tooltip_placement 函数来确定工具提示的位置
|
|
|
|
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
|
|
|
|
|
|
|
|
//tooltip placement on right or left
|
|
|
|
// 工具提示位置在右侧或左侧的判断函数
|
|
|
|
|
|
|
|
function tooltip_placement(context, source) {
|
|
|
|
function tooltip_placement(context, source) {
|
|
|
|
var $source = $(source); // 获取触发工具提示的元素
|
|
|
|
var $source = $(source);
|
|
|
|
var $parent = $source.closest('table'); // 获取最近的表格父元素
|
|
|
|
var $parent = $source.closest('table')
|
|
|
|
var off1 = $parent.offset(); // 获取表格的偏移量
|
|
|
|
var off1 = $parent.offset();
|
|
|
|
var w1 = $parent.width(); // 获取表格的宽度
|
|
|
|
var w1 = $parent.width();
|
|
|
|
var off2 = $source.offset(); // 获取触发元素的偏移量
|
|
|
|
var off2 = $source.offset();
|
|
|
|
// 这里的 w2 没有被使用，可能是原始代码中的遗留部分
|
|
|
|
//var w2 = $source.width();
|
|
|
|
// if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right'; // 这行代码原本用于判断位置，但由于 w2 未使用，可能不是最终逻辑
|
|
|
|
|
|
|
|
// 简化后的逻辑：如果触发元素的左偏移量小于表格左偏移量加上表格宽度的一半，则工具提示显示在右侧，否则显示在左侧
|
|
|
|
|
|
|
|
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
|
|
|
|
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
|
|
|
|
return 'left';
|
|
|
|
return 'left';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/***************/
|
|
|
|
// 点击显示详情按钮时，切换详情行的显示状态，并切换按钮图标
|
|
|
|
|
|
|
|
$('.show-details-btn').on('click', function(e) {
|
|
|
|
$('.show-details-btn').on('click', function(e) {
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
e.preventDefault();
|
|
|
|
$(this).closest('tr').next().toggleClass('open'); // 切换下一行的 'open' 类名，用于显示或隐藏详情行
|
|
|
|
$(this).closest('tr').next().toggleClass('open');
|
|
|
|
$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up'); // 切换按钮图标
|
|
|
|
$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
/***************/
|
|
|
|
/***************/
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
@ -672,6 +618,6 @@ $( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
|
|
|
|
).css('padding-top', '12px');
|
|
|
|
).css('padding-top', '12px');
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
})
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|
|
zwj