Question

如果将表拆分成多个页面，如何使用CheckBoxColumn选择django_tables2表的所有记录？

我已使用此select all rows in django_tables2代码从一个页面中选择所有记录，并使用此How to get information from Django_tables2 row?来对其进行操作。

但是如何在分页限制中选择所有记录？当我在页面上来回走动时，还要保持复选框的状态吗？

Answer 1

我建议在模板中添加“全部选中”复选框。除了在视觉上检查当前页面的所有行（使用JavaScript）之外，正在检查它应该在视图中发出信号，表明用户打算检查所有行。

保持这些复选框的状态是另一回事。它可以导致一些非常大的列表中的簿记。如果需要为特定浏览器会话中的用户保留它们，则可以将它们保留在<script type="text/javascript"> /******************/ /** Set Schedule **/ /******************/ (function() { var schedule = { report: [], template: $('#report_schedule').html(), // Init functions init: function() { this.cacheDom(); this.bindEvents(); }, // Cache elements from DOM cacheDom: function() { this.$setScheduleBtn = $('#setScheduleBtn'); this.$reportSchedule = $('#reportSchedule'); this.$allFieldsets = this.$reportSchedule.find('fieldset'); this.$radioBtns = this.$allFieldsets.find('input[type="radio"]'); this.$saveBtn = $('#saveSchedule'); }, // Set events bindEvents: function() { var that = this; // Show/Hide "Set report" section this.$setScheduleBtn.click(this.showReportScheduler.bind(this)); // Checkbox-radio buttons clicks this.$allFieldsets.each(function() { let fieldset = this; $(this).find('input[type=checkbox]').change(function () { that.toggleRadioButtons(fieldset); }); }); // Update current report this.$radioBtns.change(this.updateReport.bind(this)); // Save button apply changes this.$saveBtn.click(this.saveSchedule.bind(this)); }, // Display on click showReportScheduler: function() { this.$reportSchedule.slideToggle("fast"); }, // Toggle Radio Buttons toggleRadioButtons: function(fs) { var radios = $(fs).find("input[type=radio]"); radios.attr("disabled", !radios.attr("disabled")); radios.removeAttr('checked'); }, updateReport: function(rd) { console.log(rd.get(0).parentNode); }, // Save data saveSchedule: function() { var selectedItems = []; this.$allFieldsets.each(function(){ var newylyChecked = $(this).find('input[type="radio"]:checked').val(); if ( newylyChecked == undefined ) newylyChecked = 0; selectedItems.push(parseInt(newylyChecked)); }); this.report = selectedItems; // console.log(this.report); if (this.sendReport(this.report)) { this.$reportSchedule.slideUp("fast"); } }, // Send report to server sendReport: function() { $.ajax({ type: "POST", url: '/potato/schedule_report.php', data: { weekly: this.report[0], monthly: this.report[1], quarterly: this.report[2], system_user_id: <?php echo $_SESSION["system_user_id"]; ?> }, success: function(data) { console.log(data); return true; } }); } }; schedule.init(); })(); </script>中，如果需要将它们持久保存到数据库，则可以创建模型以跟踪某个记录的选择对于某个用户。

Answer 2

好的，现在我想出了这个JavaScript / jQuery解决方案。它涉及两个方面。首先，要在更改表的排序顺序时存储和显示所选复选框，表格将被过滤，或者当您导航到另一个页面并再次返回表格时。其次，当选择全部＆＃34;选择全部＆＃34;时，检查并存储表格页面上的所有复选框。单击表头中的按钮。在这里，我坚持选择表中的所有行，而不仅仅是在一个表页面上显示的那些行（带有分页）。选定的复选框存储在浏览器的会话存储中。功能上肯定有改进的余地，我不喜欢对表格的所有行进行迭代，但我还没有找到更好的解决方案。我仍然认为在django-tables2中提供这种功能会很好。也许在即将到来的版本中？

复选框列被称为＆＃34; selvars＆＃34;在我的tables.py

中

class dataset_varsTable(tables.Table):
selvars=tables.CheckBoxColumn(accessor='pk',attrs = { "th__input": {"onclick": "toggle(this)"}}, orderable=False)
... (other table columns)

它是我模型的整数主键

class vars(models.Model):
    idvar=models.IntegerField('Var.ID', primary_key=True)
    ...

JavaScript和jQuery函数在带有表

的HTML模板中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var storage_name="checkedvars"; // name of session storage
// function to store/remove checked varids in session storage
function update_checkedvars(varid, check_status){
  var current_checked=[];
  if (sessionStorage.getItem(storage_name)){
    current_checked=sessionStorage.getItem(storage_name).split(",");
  }
  if (isNaN(parseInt(varid))==false && check_status==true){
    current_checked.push(varid);
    // store checked varid in session storage without duplicates
    sessionStorage.setItem(storage_name, Array.from(new Set(current_checked)));
  } else if (isNaN(parseInt(varid))==false && check_status==false){
    // remove unchecked varid from session storage
    sessionStorage.setItem(storage_name, current_checked.filter(e => e !== varid));
  }
}

// toggle button
function toggle(source) {
    checkboxes = document.getElementsByName('selvars');
    for(var i in checkboxes){
        checkboxes[i].checked = source.checked;
        update_checkedvars(checkboxes[i].value, checkboxes[i].checked);
    }
}

$(document).ready( function() {
  // display checkboxes according to selected varids in session storage  
  var current_checked=[];
  if (sessionStorage.getItem(storage_name)){
    current_checked=sessionStorage.getItem(storage_name).split(",");
    checkboxes = document.getElementsByName('selvars');
    for(var i in checkboxes){
      if(current_checked.includes(checkboxes[i].value)){
        checkboxes[i].checked=true;
      }
    }
  }

  // save/remove checked/unchecked varid in session storage  
  $(".selvars").click( function(event) {
    var varid=event.target.value
    var check_status=event.target.checked
    update_checkedvars(varid, check_status);
  });
});
</script>

使用分页选择django tables2中的所有行

2 个答案: