Использование .NET MVC с представлением, имеющим таблицу с 14 столбцами.Я разрешаю пользователю открывать модальные окна и устанавливать / снимать флажки, чтобы скрывать и показывать эти столбцы.Но код громоздкий и неэффективный.Это, однако, работает, я просто ищу ответ о том, как сделать эту вещь лучше.
То, как я это сделал, я пометил TH следующим образом:
<th id="col1" class="toggleMe1">
UW
</th>
<th class="toggleMe2">
@Html.DisplayNameFor(model => model.Client)
</th>
И ТАК ВКЛ для TH и TD
<td class="toggleMe1">
@Html.DisplayFor(modelItem => item.NameOf)
</td>
<td class="toggleMe2">
@Html.DisplayFor(modelItem => item.Client)
</td>
Здесьэто Jquery, который я использую.Чтобы изолировать эти столбцы по отдельности, не отключая и не отключая другие, я должен изолировать их таким образом.Класс ColorMe имеет отображение: нет;имущество.Вот и все.
if ($("#col1Off").is(":checked")){
$('.toggleMe1').addClass("ColorMe");
} else {
$('.toggleMe1').removeClass("ColorMe");
}
if ($("#col2Off").is(":checked")) {
$('.toggleMe2').addClass("ColorMe");
} else {
$('.toggleMe2').removeClass("ColorMe");
}
Я должен сделать это для всех 14 столбцов.Есть ли способ, которым я могу сократить это?Некоторые более эффективные?
РЕДАКТИРОВАТЬ.КОД СНИППЕТ.
Модал для хранения флажков. Посмотрите в div class = "Modal-body", найдите их.Сейчас только два
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="checkbox" id="col1Off" data-chclass="toggleMe1" />
<label for="col1">Uw</label>
<input type="checkbox" id="col2Off" data-chclass="toggleMe2" />
<label for="col2">Client</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
CODE, чтобы открыть MODAL, и код для переключения классов на скрытие / отображение.
$('#exampleModal').on('hide.bs.modal', function (e) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
$('input[type=checkbox]').change(function () {
var el = $(this).data('chclass');
$('.' + el).toggleClass("ColorMe");
});
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Hide or Unhide Columns')
modal.find('.modal-body input').val(recipient)
})
Многое из этого, вероятно, не нужно.Я просто тестировал модал и скопировал пример кода для тестирования.
Я должен открыть его дважды, чтобы класс переключения работал