From 18f97e6478fbd5edaf8419838da0f0f83d841963 Mon Sep 17 00:00:00 2001 From: Catouse Date: Mon, 7 Mar 2016 13:35:13 +0800 Subject: [PATCH] * change UI of buttons in table footer. --- lib/front/front.class.php | 27 ++----------------------- module/common/lang/en.php | 1 + module/common/lang/zh-cn.php | 1 + www/js/my.full.js | 39 ++++++++++++++++++++---------------- www/theme/default/style.css | 10 +++++---- 5 files changed, 32 insertions(+), 46 deletions(-) diff --git a/lib/front/front.class.php b/lib/front/front.class.php index 0e7326bfba..108b8816f4 100644 --- a/lib/front/front.class.php +++ b/lib/front/front.class.php @@ -672,38 +672,15 @@ EOT; * Create select buttons include 'selectAll' and 'selectReverse'. * * @param string $scope the scope of select reverse. - * @param bool $asGroup * @param string $appendClass * @static * @access public * @return string */ - static public function selectButton($scope = "", $asGroup = true, $appendClass = '') + static public function selectButton($scope = "", $appendClass = 'btn') { - $string = << -$(function() -{ - if($('body').data('bindSelectBtn')) return; - $('body').data('bindSelectBtn', true); - $(document).on('click', '.check-all, .check-inverse, #allchecker, #reversechecker', function() - { - var e = $(this); - if(e.closest('.datatable').length) return; - scope = e.data('scope'); - scope = scope ? $('#' + scope) : e.closest('.table'); - if(!scope.length) scope = e.closest('form'); - scope.find('input:checkbox').each(e.hasClass('check-inverse') ? function() { $(this).prop("checked", !$(this).prop("checked"));} : function() { $(this).prop("checked", true);}); - }); -}); - -EOT; global $lang; - if($asGroup) $string .= "
"; - $string .= "{$lang->selectAll}"; - $string .= "{$lang->selectReverse}"; - if($asGroup) $string .= "
"; - return $string; + return "
"; } /** diff --git a/module/common/lang/en.php b/module/common/lang/en.php index 7c63104b21..fd8a1b2b65 100644 --- a/module/common/lang/en.php +++ b/module/common/lang/en.php @@ -73,6 +73,7 @@ $lang->fold = '-'; $lang->preShortcutKey = '[Shortcut key:←]'; $lang->nextShortcutKey = '[Shortcut key:→]'; +$lang->select = 'Select'; $lang->selectAll = 'All'; $lang->selectReverse = 'Inverse'; $lang->notFound = 'Sorry, the object not found.'; diff --git a/module/common/lang/zh-cn.php b/module/common/lang/zh-cn.php index df32ba4017..639c28eda6 100644 --- a/module/common/lang/zh-cn.php +++ b/module/common/lang/zh-cn.php @@ -73,6 +73,7 @@ $lang->fold = '-'; $lang->preShortcutKey = '[快捷键:←]'; $lang->nextShortcutKey = '[快捷键:→]'; +$lang->select = '选择'; $lang->selectAll = '全选'; $lang->selectReverse = '反选'; $lang->loading = '稍候...'; diff --git a/www/js/my.full.js b/www/js/my.full.js index f8eba7d31b..90ca60414b 100644 --- a/www/js/my.full.js +++ b/www/js/my.full.js @@ -649,28 +649,33 @@ function setComment() */ function autoCheck() { - $(document).on('click', '.tablesorter tr :checkbox', function(){clickInCheckbox = 1;}); - - $(document).on('click', '.tablesorter:not(.table-datatable) tr', function() + var checkRow = function() { if(document.activeElement.type != 'select-one' && document.activeElement.type != 'text') { - if(typeof(clickInCheckbox) != 'undefined' && clickInCheckbox == 1) + var $this = $(this); + var $tr = $(this).closest('tr'); + var $checkbox = $tr.find(':checkbox'); + var isChecked = $checkbox.prop('checked'); + if(!$this.is(':checkbox')) { - clickInCheckbox = 0; - } - else - { - if($(this).find(':checkbox').attr('checked')) - { - $(this).find(':checkbox').attr('checked', false); - } - else - { - $(this).find(':checkbox').attr('checked', true); - } + isChecked = !isChecked; + $checkbox.prop('checked', isChecked); } + if(!$tr.hasClass('.active-disabled')) $tr.toggleClass('active', isChecked); + $tr.closest('.table').find('.rows-selector').prop('checked', false); } + }; + $('.tablesorter:not(.table-datatable)').on('click', 'tbody > tr :checkbox', function(e){checkRow.call(this); e.stopPropagation();}).on('click', 'tbody > tr', checkRow); + + $(document).on('change', '.rows-selector:checkbox', function() + { + var $checkbox = $(this); + if($checkbox.closest('.datatable').length) return; + var scope = $checkbox.data('scope'); + var $target = scope ? $('#' + scope) : $checkbox.closest('.table'); + var isChecked = $checkbox.prop('checked'); + $target.find('tbody > tr').toggleClass('active', isChecked).find('td :checkbox').prop('checked', isChecked); }); } @@ -1264,7 +1269,7 @@ function setModal4List(triggerClass, replaceID, callback, width) */ function setTableBehavior() { - $('#wrap .table:not(.table-data, .table-form, .active-disabled)').on('click', 'tbody tr:not(.active-disabled) td', function(){$(this).closest('tr').toggleClass('active');}); + $('#wrap .table:not(.table-data, .table-form, .active-disabled, .tablesorter)').on('click', 'tbody tr:not(.active-disabled) td', function(){$(this).closest('tr').toggleClass('active');}); $('#wrap .outer > .table, #wrap .outer > form > .table, #wrap .outer > .mian > .table, #wrap .outer > .mian > form > .table, #wrap .outer > .container > .table').not('.table-data, .table-form, .table-custom').addClass('table table-condensed table-hover table-striped tablesorter'); } diff --git a/www/theme/default/style.css b/www/theme/default/style.css index f687f6ff1f..3f97f9a26c 100644 --- a/www/theme/default/style.css +++ b/www/theme/default/style.css @@ -518,6 +518,7 @@ body {font-size: 13px; color:#141414;padding-bottom: 40px;} .outer .table thead tr th {text-align: center;} .outer .table thead tr th.text-left {text-align: left;} .outer .table tbody td {vertical-align: middle;} +.outer .table tbody > tr > td:first-child {text-align: left} .outer .table th {vertical-align: middle;} .outer .table tr > th:first-child, .outer .table tr > td:first-child {padding-left: 10px} .outer .table tr > th:last-child, .outer .table tr > td:last-child {padding-right: 10px} @@ -530,7 +531,7 @@ body {font-size: 13px; color:#141414;padding-bottom: 40px;} .outer .table.table-data.table-borderless tbody > tr:last-child td, .outer .table.table-form tbody > tr:last-child td {border: none} .outer .table tfoot td {border-top: 1px solid #ddd} .outer .table tfoot .form-control {padding: 1px 8px; height: 30px} -.outer .table tfoot .btn {padding-top: 4px; padding-bottom: 4px;} +.outer .table tfoot .btn {padding: 2px 6px; font-size: 13px; line-height: 20px;} .outer .table tfoot .btn > i {display: inline-block; margin-right: 1px; opacity: 0.8} .outer .table tfoot .datepicker-wrapper:before {top: 5px} .outer .table tfoot .form-control.form-date {width: 110px} @@ -538,10 +539,11 @@ body {font-size: 13px; color:#141414;padding-bottom: 40px;} .outer .table tfoot .chosen-single {padding: 4px 6px; height: 30px; } .outer .table tfoot .chosen-container-single .chosen-single abbr {top: 4px;} .table-actions {float: left;} -.table-actions > .btn-group, .table-actions > .btn, .table-actions > .input-group, .table-actions > .text {float: left; margin-right: 10px;} -.table-actions > .text {line-height: 30px; color: #808080} +.table-actions > .checkbox {float: left; margin: 0} +.table-actions > .btn-group, .table-actions > .btn, .table-actions > .input-group, .table-actions > .text {float: left; margin-right: 6px;} +.table-actions > .text {line-height: 24px; color: #808080} .table-actions > .text strong {color: #333} -.outer .table tfoot .pager {margin: 0;} +.outer .table tfoot .pager {margin: -3px 0;} /* color of a when visited */ .outer .table tbody td > a:visited, #crumbs > a:visited, .side > a:visited {color: #551A8B}