* change UI of buttons in table footer.
This commit is contained in:
@@ -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 = <<<EOT
|
||||
<script>
|
||||
$(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);});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
EOT;
|
||||
global $lang;
|
||||
if($asGroup) $string .= "<div class='btn-group'>";
|
||||
$string .= "<a id='allchecker' class='btn btn-select-all check-all $appendClass' data-scope='$scope' href='javascript:;' >{$lang->selectAll}</a>";
|
||||
$string .= "<a id='reversechecker' class='btn btn-select-reverse check-inverse $appendClass' data-scope='$scope' href='javascript:;'>{$lang->selectReverse}</a>";
|
||||
if($asGroup) $string .= "</div>";
|
||||
return $string;
|
||||
return "<div class='checkbox $appendClass'><label><input type='checkbox' data-scope='$scope' class='rows-selector'> $lang->select</label></div>";
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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.';
|
||||
|
||||
@@ -73,6 +73,7 @@ $lang->fold = '-';
|
||||
$lang->preShortcutKey = '[快捷键:←]';
|
||||
$lang->nextShortcutKey = '[快捷键:→]';
|
||||
|
||||
$lang->select = '选择';
|
||||
$lang->selectAll = '全选';
|
||||
$lang->selectReverse = '反选';
|
||||
$lang->loading = '稍候...';
|
||||
|
||||
+22
-17
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user