|
|
|
@ -485,193 +485,193 @@
|
|
|
|
|
} );
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
$.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') );
|
|
|
|
|
// 将DataTables的按钮容器附加到.tableTools-container元素中
|
|
|
|
|
$.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') );
|
|
|
|
|
// 将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中
|
|
|
|
|
});
|
|
|
|
|
//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毫秒后执行上述代码
|
|
|
|
|
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( '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设置为未选中状态
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
myTable.on( 'deselect', function ( e, dt, type, index ) {
|
|
|
|
|
// 监听行取消选择事件
|
|
|
|
|
if ( type === 'row' ) {
|
|
|
|
|
$( myTable.row( index ).node() ).find('input:checkbox').prop('checked', false);
|
|
|
|
|
// 如果取消了行的选择,将该行的checkbox设置为未选中状态
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
|
|
|
|
|
//table checkboxes
|
|
|
|
|
$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
|
|
|
|
|
// 将表头和表体中的所有checkbox设置为未选中状态
|
|
|
|
|
//table checkboxes
|
|
|
|
|
$('th input[type=checkbox], td input[type=checkbox]').prop('checked', false);
|
|
|
|
|
// 将表头和表体中的所有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(){
|
|
|
|
|
var th_checked = this.checked;//checkbox inside "TH" table header
|
|
|
|
|
// 获取表头checkbox的选中状态
|
|
|
|
|
$('#dynamic-table').find('tbody > tr').each(function(){
|
|
|
|
|
var row = this;
|
|
|
|
|
if(th_checked) myTable.row(row).select();
|
|
|
|
|
else myTable.row(row).deselect();
|
|
|
|
|
// 根据表头checkbox的状态,选择或取消选择每一行
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
// 监听表头checkbox的点击事件,根据点击状态选择或取消选择所有行
|
|
|
|
|
// 当复选框被选中或取消选中时,选择或取消选择对应的行
|
|
|
|
|
$('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
|
var row = $(this).closest('tr').get(0); // 获取当前复选框所在的行
|
|
|
|
|
// 注意这里的逻辑可能有问题:通常当复选框被选中时应该选择行,被取消选中时应该取消选择行
|
|
|
|
|
// 但这里的代码是在复选框被选中时调用 deselect 方法,在取消选中时调用 select 方法
|
|
|
|
|
// 这可能是个错误,或者是特定上下文中的特殊逻辑
|
|
|
|
|
if(this.checked) myTable.row(row).deselect(); // 如果复选框被选中,则取消选择该行
|
|
|
|
|
else myTable.row(row).select(); // 如果复选框被取消选中,则选择该行
|
|
|
|
|
});
|
|
|
|
|
//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(){
|
|
|
|
|
var th_checked = this.checked;//checkbox inside "TH" table header
|
|
|
|
|
// 获取表头checkbox的选中状态
|
|
|
|
|
$('#dynamic-table').find('tbody > tr').each(function(){
|
|
|
|
|
var row = this;
|
|
|
|
|
if(th_checked) myTable.row(row).select();
|
|
|
|
|
else myTable.row(row).deselect();
|
|
|
|
|
// 根据表头checkbox的状态,选择或取消选择每一行
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
// 监听表头checkbox的点击事件,根据点击状态选择或取消选择所有行
|
|
|
|
|
// 当复选框被选中或取消选中时,选择或取消选择对应的行
|
|
|
|
|
$('#dynamic-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
|
var row = $(this).closest('tr').get(0); // 获取当前复选框所在的行
|
|
|
|
|
// 注意这里的逻辑可能有问题:通常当复选框被选中时应该选择行,被取消选中时应该取消选择行
|
|
|
|
|
// 但这里的代码是在复选框被选中时调用 deselect 方法,在取消选中时调用 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) {
|
|
|
|
|
e.stopImmediatePropagation(); // 立即停止事件冒泡
|
|
|
|
|
e.stopPropagation(); // 停止事件冒泡
|
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
|
});
|
|
|
|
|
$(document).on('click', '#dynamic-table .dropdown-toggle', function(e) {
|
|
|
|
|
e.stopImmediatePropagation(); // 立即停止事件冒泡
|
|
|
|
|
e.stopPropagation(); // 停止事件冒泡
|
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 对于没有 TableTools 或 dataTables 的简单表格
|
|
|
|
|
// 根据表头复选框选中状态选择或取消选择所有行
|
|
|
|
|
var active_class = 'active'; // 定义活动行的类名
|
|
|
|
|
$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
|
|
|
|
|
var th_checked = this.checked; // 获取表头复选框的选中状态
|
|
|
|
|
$(this).closest('table').find('tbody > tr').each(function(){ // 遍历表格中的所有行
|
|
|
|
|
var row = this; // 当前行
|
|
|
|
|
if(th_checked) { // 如果表头复选框被选中
|
|
|
|
|
$(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); // 移除当前行的活动类名,并取消选中复选框
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
var active_class = 'active'; // 定义活动行的类名
|
|
|
|
|
$('#simple-table > thead > tr > th input[type=checkbox]').eq(0).on('click', function(){
|
|
|
|
|
var th_checked = this.checked; // 获取表头复选框的选中状态
|
|
|
|
|
$(this).closest('table').find('tbody > tr').each(function(){ // 遍历表格中的所有行
|
|
|
|
|
var row = this; // 当前行
|
|
|
|
|
if(th_checked) { // 如果表头复选框被选中
|
|
|
|
|
$(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); // 移除当前行的活动类名,并取消选中复选框
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 当简单表格中的复选框被选中或取消选中时,选择或取消选择对应的行(并添加或移除活动类名)
|
|
|
|
|
$('#simple-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
|
var $row = $(this).closest('tr'); // 获取当前复选框所在的行
|
|
|
|
|
if($row.is('.detail-row ')) return; // 如果当前行是详情行,则直接返回,不做任何操作
|
|
|
|
|
if(this.checked) $row.addClass(active_class); // 如果复选框被选中,则为当前行添加活动类名
|
|
|
|
|
else $row.removeClass(active_class); // 如果复选框被取消选中,则移除当前行的活动类名
|
|
|
|
|
});
|
|
|
|
|
$('#simple-table').on('click', 'td input[type=checkbox]' , function(){
|
|
|
|
|
var $row = $(this).closest('tr'); // 获取当前复选框所在的行
|
|
|
|
|
if($row.is('.detail-row ')) return; // 如果当前行是详情行,则直接返回,不做任何操作
|
|
|
|
|
if(this.checked) $row.addClass(active_class); // 如果复选框被选中,则为当前行添加活动类名
|
|
|
|
|
else $row.removeClass(active_class); // 如果复选框被取消选中,则移除当前行的活动类名
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 为小视图操作按钮添加工具提示
|
|
|
|
|
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement}); // 使用自定义的 tooltip_placement 函数来确定工具提示的位置
|
|
|
|
|
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement}); // 使用自定义的 tooltip_placement 函数来确定工具提示的位置
|
|
|
|
|
|
|
|
|
|
// 工具提示位置在右侧或左侧的判断函数
|
|
|
|
|
function tooltip_placement(context, source) {
|
|
|
|
|
var $source = $(source); // 获取触发工具提示的元素
|
|
|
|
|
var $parent = $source.closest('table'); // 获取最近的表格父元素
|
|
|
|
|
var off1 = $parent.offset(); // 获取表格的偏移量
|
|
|
|
|
var w1 = $parent.width(); // 获取表格的宽度
|
|
|
|
|
var off2 = $source.offset(); // 获取触发元素的偏移量
|
|
|
|
|
// 这里的 w2 没有被使用,可能是原始代码中的遗留部分
|
|
|
|
|
// 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';
|
|
|
|
|
return 'left';
|
|
|
|
|
}
|
|
|
|
|
function tooltip_placement(context, source) {
|
|
|
|
|
var $source = $(source); // 获取触发工具提示的元素
|
|
|
|
|
var $parent = $source.closest('table'); // 获取最近的表格父元素
|
|
|
|
|
var off1 = $parent.offset(); // 获取表格的偏移量
|
|
|
|
|
var w1 = $parent.width(); // 获取表格的宽度
|
|
|
|
|
var off2 = $source.offset(); // 获取触发元素的偏移量
|
|
|
|
|
// 这里的 w2 没有被使用,可能是原始代码中的遗留部分
|
|
|
|
|
// 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';
|
|
|
|
|
return 'left';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击显示详情按钮时,切换详情行的显示状态,并切换按钮图标
|
|
|
|
|
$('.show-details-btn').on('click', function(e) {
|
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
|
$(this).closest('tr').next().toggleClass('open'); // 切换下一行的 'open' 类名,用于显示或隐藏详情行
|
|
|
|
|
$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up'); // 切换按钮图标
|
|
|
|
|
});
|
|
|
|
|
/***************/
|
|
|
|
|
/**
|
|
|
|
|
//add horizontal scrollbars to a simple table
|
|
|
|
|
$('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
|
|
|
|
|
{
|
|
|
|
|
horizontal: true,
|
|
|
|
|
styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
|
|
|
|
|
size: 2000,
|
|
|
|
|
mouseWheelLock: true
|
|
|
|
|
}
|
|
|
|
|
).css('padding-top', '12px');
|
|
|
|
|
*/
|
|
|
|
|
})
|
|
|
|
|
// 点击显示详情按钮时,切换详情行的显示状态,并切换按钮图标
|
|
|
|
|
$('.show-details-btn').on('click', function(e) {
|
|
|
|
|
e.preventDefault(); // 阻止默认行为
|
|
|
|
|
$(this).closest('tr').next().toggleClass('open'); // 切换下一行的 'open' 类名,用于显示或隐藏详情行
|
|
|
|
|
$(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up'); // 切换按钮图标
|
|
|
|
|
});
|
|
|
|
|
/***************/
|
|
|
|
|
/**
|
|
|
|
|
//add horizontal scrollbars to a simple table
|
|
|
|
|
$('#simple-table').css({'width':'2000px', 'max-width': 'none'}).wrap('<div style="width: 1000px;" />').parent().ace_scroll(
|
|
|
|
|
{
|
|
|
|
|
horizontal: true,
|
|
|
|
|
styleClass: 'scroll-top scroll-dark scroll-visible',//show the scrollbars on top(default is bottom)
|
|
|
|
|
size: 2000,
|
|
|
|
|
mouseWheelLock: true
|
|
|
|
|
}
|
|
|
|
|
).css('padding-top', '12px');
|
|
|
|
|
*/
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|