Fix list check issue
This commit is contained in:
parent
82268b1d4f
commit
26980ebf33
|
@ -1,4 +1,6 @@
|
||||||
var ListCheck = function(element) {
|
$(function() {
|
||||||
|
var ListCheckData = {},
|
||||||
|
ListCheck = function(element) {
|
||||||
this.element = $(element);
|
this.element = $(element);
|
||||||
this.element.data('exists', true);
|
this.element.data('exists', true);
|
||||||
if(this.element.context.parentNode.tagName == "TD") {
|
if(this.element.context.parentNode.tagName == "TD") {
|
||||||
|
@ -11,47 +13,70 @@ var ListCheck = function(element) {
|
||||||
this.element.before('<i class="icon-check-empty" />');
|
this.element.before('<i class="icon-check-empty" />');
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.listCheck = function (callback) {
|
$.fn.listCheck = function () {
|
||||||
this.each(function (i) {
|
$(this).each(function() {
|
||||||
|
var $this = $(this),
|
||||||
|
$el = $this.find('input[type="checkbox"]');
|
||||||
|
$el.each(function (i) {
|
||||||
if(!$(this).data('exists')) {
|
if(!$(this).data('exists')) {
|
||||||
new ListCheck(this);
|
new ListCheck(this);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
this.on(clickEvent, function(e) {
|
$this.on(clickEvent, $el, function(e) {
|
||||||
if($(this).prop('checked')) {
|
if($(e.target).prop('checked')) {
|
||||||
$(this).siblings('i').addClass('icon-check').removeClass('icon-check-empty').closest('tr').addClass('checkHit');
|
$(e.target).siblings('i').addClass('icon-check').removeClass('icon-check-empty').closest('tr').addClass('checkHit');
|
||||||
} else {
|
} else {
|
||||||
$(this).siblings('i').addClass('icon-check-empty').removeClass('icon-check').closest('tr').removeClass('checkHit');
|
$(e.target).siblings('i').addClass('icon-check-empty').removeClass('icon-check').closest('tr').removeClass('checkHit');
|
||||||
};
|
};
|
||||||
if ($(this).closest('.listCheckHead').length) {
|
if($(e.target).closest('th').hasClass('listCheckHead')) {
|
||||||
$('.listCheck .list-check').prop('checked', $(this).prop('checked'));
|
$this.find('.listCheck input[type="checkbox"]').prop('checked', $(e.target).prop('checked'));
|
||||||
if($(this).prop('checked')) {
|
if($(e.target).prop('checked')) {
|
||||||
$('.listCheck i').addClass('icon-check').removeClass('icon-check-empty').closest('tr').addClass('checkHit');
|
$this.find('.listCheck i').addClass('icon-check').removeClass('icon-check-empty').closest('tr').addClass('checkHit');
|
||||||
} else {
|
} else {
|
||||||
$('.listCheck i').addClass('icon-check-empty').removeClass('icon-check').closest('tr').removeClass('checkHit');
|
$this.find('.listCheck i').addClass('icon-check-empty').removeClass('icon-check').closest('tr').removeClass('checkHit');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var _isCheck = $('tbody .list-check').filter(':checked').length,
|
var _isCheck = $this.find('tbody').find($el).filter(':checked').length,
|
||||||
_defaultLength = $('tbody .list-check').length;
|
_defaultLength = $this.find('tbody').find($el).length;
|
||||||
|
|
||||||
if(_isCheck > 0 && _isCheck < _defaultLength) {
|
if(_isCheck > 0 && _isCheck < _defaultLength) {
|
||||||
$('.listCheckHead i').removeClass('icon-check-empty icon-check').addClass('icon-minus');
|
$this.find('.listCheckHead i').removeClass('icon-check-empty icon-check').addClass('icon-minus');
|
||||||
} else if(!_isCheck) {
|
} else if(!_isCheck) {
|
||||||
$('.listCheckHead i').removeClass('icon-minus icon-check').addClass('icon-check-empty');
|
$this.find('.listCheckHead i').removeClass('icon-minus icon-check').addClass('icon-check-empty');
|
||||||
} else {
|
} else {
|
||||||
$('.listCheckHead i').removeClass('icon-check-empty icon-minus').addClass('icon-check');
|
$this.find('.listCheckHead i').removeClass('icon-check-empty icon-minus').addClass('icon-check');
|
||||||
}
|
}
|
||||||
_isCheck ? $('.list-active-btn').removeClass('disabled').data('actionable', true) : $('.list-active-btn').addClass('disabled').data('actionable', false);
|
_isCheck ? $this.find('.list-active-btn').removeClass('disabled').data('actionable', true) : $this.find('.list-active-btn').addClass('disabled').data('actionable', false);
|
||||||
});
|
});
|
||||||
};
|
$this.on(clickEvent, '.list-active-btn', function(e) {
|
||||||
function clearCheck() {
|
if(!$(this).hasClass('disabled')) {
|
||||||
$('.list-check').each(function() {
|
ListCheckData.url = $(this).attr('rel');
|
||||||
$(this).prop('checked', false);
|
ListCheckData.name = $this.find('tbody').find('input[type="checkbox"]').attr('name');
|
||||||
})
|
ListCheckData.action = $(this).data('checkAction');
|
||||||
|
ListCheckData.values = [];
|
||||||
|
ListCheckData.element = $this
|
||||||
|
$this.find('tbody').find('input[type="checkbox"]').each(function (i) {
|
||||||
|
this.checked && ListCheckData.values.push("ids[]=" + this.value);
|
||||||
|
});
|
||||||
|
console.log(ListCheckData.values.join("&"));
|
||||||
|
$('#dialog').modal('show');
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
clearCheck($(this));
|
||||||
|
};
|
||||||
|
|
||||||
|
function clearCheck(element) {
|
||||||
|
element.find('input[type="checkbox"]').each(function() {
|
||||||
|
$(this).prop('checked', false).siblings('i').addClass('icon-check-empty').removeClass('icon-check').closest('tr').removeClass('checkHit');
|
||||||
|
});
|
||||||
|
element.find('.list-active-btn').addClass('disabled');
|
||||||
|
};
|
||||||
|
|
||||||
function actionSuccess(e) {
|
function actionSuccess(e) {
|
||||||
$("tbody .list-check").each(function() {
|
ListCheckData.element.find('tbody').find('input[type="checkbox"]').each(function() {
|
||||||
switch(e) {
|
switch(e) {
|
||||||
case 'list-be-hide':
|
case 'list-be-hide':
|
||||||
$(this).filter(':checked').closest('tr').addClass('checkHide');
|
$(this).filter(':checked').closest('tr').addClass('checkHide');
|
||||||
|
@ -67,32 +92,17 @@ function actionSuccess(e) {
|
||||||
};
|
};
|
||||||
$('.list-check').siblings('i').removeAttr('class').addClass('icon-check-empty').closest('tr').removeClass('checkHit');
|
$('.list-check').siblings('i').removeAttr('class').addClass('icon-check-empty').closest('tr').removeClass('checkHit');
|
||||||
});
|
});
|
||||||
clearCheck();
|
clearCheck(ListCheckData.element);
|
||||||
}
|
}
|
||||||
$(function() {
|
|
||||||
var $t = null,
|
|
||||||
_data = null;
|
|
||||||
clearCheck();
|
|
||||||
$('.list-check').listCheck();
|
$('.list-check').listCheck();
|
||||||
$('.list-active-btn').data('actionable', false).on(clickEvent, function(e) {
|
|
||||||
$t = $(this)
|
|
||||||
_data = $(this).data()
|
|
||||||
_data.actionable ? $('#dialog').modal('show') : "";
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
$('.delete-item').on(clickEvent, function() {
|
$('.delete-item').on(clickEvent, function() {
|
||||||
var _v = [];
|
if(ListCheckData.url.indexOf("?") > -1) {
|
||||||
$("tbody .list-check").each(function() {
|
$.ajax(ListCheckData.url + "&" + ListCheckData.values.join("&")).done(function() {
|
||||||
this.checked && _v.push("ids[]="+this.value)
|
actionSuccess(ListCheckData.action);
|
||||||
});
|
|
||||||
var _t = $t.attr("rel");
|
|
||||||
if(_t.indexOf("?") > -1) {
|
|
||||||
$.ajax(_t + "&" + _v.join("&")).done(function() {
|
|
||||||
actionSuccess(_data.checkAction)
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$.ajax(_t + "?" + _v.join("&")).done(function() {
|
$.ajax(ListCheckData.url + "?" + ListCheckData.values.join("&")).done(function() {
|
||||||
actionSuccess(_data.checkAction)
|
actionSuccess(ListCheckData.action);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
$('#dialog').modal('hide');
|
$('#dialog').modal('hide');
|
||||||
|
|
|
@ -4,8 +4,8 @@
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding: 0 0 0 10px!important;
|
padding: 0 0 0 10px!important;
|
||||||
}
|
}
|
||||||
.listCheckHead .list-check,
|
.listCheckHead input[type="checkbox"],
|
||||||
.listCheck .list-check {
|
.listCheck input[type="checkbox"] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin: -12px 0 0 -1px;
|
margin: -12px 0 0 -1px;
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div class="tab-pane fade in active" id="send-log">
|
<div class="tab-pane fade in active list-check" id="send-log">
|
||||||
<p class="">
|
<p class="">
|
||||||
<a href="#" class="btn list-active-btn disabled" data-check-action="list-be-remove" rel="/panel/announcement/back_end/bulletins/delete"><i class="icons-trash"></i></a>
|
<a href="#" class="btn list-active-btn disabled" data-check-action="list-be-remove" rel="/panel/announcement/back_end/bulletins/delete"><i class="icons-trash"></i></a>
|
||||||
</p>
|
</p>
|
||||||
|
@ -71,7 +71,7 @@
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
<input type="checkbox" class="list-check" name="to_delete[]" value="b" />
|
<input type="checkbox" name="to_delete[]" value="b" />
|
||||||
</th>
|
</th>
|
||||||
<th><%= t(:sent_date) %></th>
|
<th><%= t(:sent_date) %></th>
|
||||||
<th><%= t(:subject) %></th>
|
<th><%= t(:subject) %></th>
|
||||||
|
@ -81,26 +81,10 @@
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<input type="checkbox" class="list-check" name="to_delete[]" value="b" />
|
|
||||||
</td>
|
|
||||||
<td>2014-01-16 17:57</td>
|
|
||||||
<td>【轉知】國家教育研究院辦理普通高級中學語文及社會領域課綱微調分區公聽會
|
|
||||||
<div class="quick-edit">
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li><a href="#" class="text-error"><%= t(:delete_) %></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>alluser@tea.ntue.edu.tw</td>
|
|
||||||
<td>蔣 欣潔</td>
|
|
||||||
<td>er_email</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane fade in" id="waiting-sent">
|
<div class="tab-pane fade in list-check" id="waiting-sent">
|
||||||
<p class="">
|
<p class="">
|
||||||
<a href="#" class="btn list-active-btn disabled" data-check-action="list-be-remove" rel="/panel/announcement/back_end/bulletins/delete"><i class="icons-trash"></i></a>
|
<a href="#" class="btn list-active-btn disabled" data-check-action="list-be-remove" rel="/panel/announcement/back_end/bulletins/delete"><i class="icons-trash"></i></a>
|
||||||
</p>
|
</p>
|
||||||
|
@ -108,32 +92,15 @@
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
<input type="checkbox" class="list-check" name="to_delete[]" value="b" />
|
<input type="checkbox" name="to_delete[]" value="b" />
|
||||||
</th>
|
</th>
|
||||||
<th>Sentdate</th>
|
<th><%= t(:sent_date) %></th>
|
||||||
<th>Subject</th>
|
<th><%= t(:subject) %></th>
|
||||||
<th>Mail To</th>
|
<th><%= t(:mail_to) %></th>
|
||||||
<th>Mail User</th>
|
<th><%= t(:mail_from_app) %></th>
|
||||||
<th>Mail From App</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<input type="checkbox" class="list-check" name="to_delete[]" value="b" />
|
|
||||||
</td>
|
|
||||||
<td>2014-01-16 17:57</td>
|
|
||||||
<td>【轉知】國家教育研究院辦理普通高級中學語文及社會領域課綱微調分區公聽會
|
|
||||||
<div class="quick-edit">
|
|
||||||
<ul class="nav nav-pills">
|
|
||||||
<li><a href="#" class="text-error"><%= t(:delete_) %></a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>alluser@tea.ntue.edu.tw</td>
|
|
||||||
<td>蔣 欣潔</td>
|
|
||||||
<td>er_email</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -66,7 +66,7 @@
|
||||||
|
|
||||||
<div id="module-content">
|
<div id="module-content">
|
||||||
<div class="nano">
|
<div class="nano">
|
||||||
<div class="content">
|
<div class="content list-check">
|
||||||
<%=render :partial => @right_partial %>
|
<%=render :partial => @right_partial %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue