如何解决数据表 - 带有链式下拉列表的 stateLoadCallback 方法 - 重新加载到页面时重置上次选择的选项
我受到这篇文章的启发来设置链式下拉列表 How to Implement Dependent/Chained Dropdown List with Django。
我在名为 table 的 Datatable (https://datatables.net) 上方创建了三个链接的下拉列表（分别命名为 id_division、id_section id_cellule）：
<div class="form-row" style="margin-left: 0" id="id-orga-form"
data-divisions-url="{% url 'load_divisions' %}"
data-sections-url="{% url 'load_sections' %}"
data-cellules-url="{% url 'load_cellules' %}">
<span style="margin-right: 10px">Filtrer : </span>
<div class="form-group col-md-2">
<label for="id_division">Division</label>
<select name="Division" id="id_division" class="form-control-sm"></select>
</div>
<div class="form-group col-md-2">
<label for="id_section">Section</label>
<select name="Section" id="id_section" class="form-control-sm"></select>
</div>
<div class="form-group col-md-2">
<label for="id_cellule">Cellule</label>
<select name="Cellule" id="id_cellule" class="form-control-sm"></select>
</div>
</div>
每个列表用于对特定列应用过滤器。这非常有效。
$('#id_division').change(function () {
divisionId = $(this).val();
$("#id_section").html('');
// initialize an AJAX request for SECTION
$.ajax({
url: $("#id-orga-form").attr("data-sections-url"),// add the division id to the GET parameters
data: { 'division': divisionId },// replace the contents of the section input with the data
success: function (data) { $("#id_section").html(data); }
});
search_division = $.trim($('#id_division option:selected').text());
if ( divisionId === null || search_division === '---------')
{ table.column([7]).search('').draw(); }
else
{ table.column([7]).search('"' + search_division + '"').draw(); }
$("#id_section").trigger("change");
});
$("#id_section").change(function () {
sectionId = $(this).val();
$("#id_cellule").html('');
// initialize an AJAX request for CELLULE
$.ajax({
url: $("#id-orga-form").attr("data-cellules-url"),// add the division id section id to the GET parameters
data: { 'division': divisionId,'section': sectionId },// replace the contents of the section input with the data
success: function (data) { $("#id_cellule").html(data); }
});
search_section = $.trim($('#id_section option:selected').text());
if ( sectionId === null || search_section === '---------')
{ table.column([8]).search('').draw(); }
else
{ table.column([8]).search('"' + search_section + '"').draw();}
$("#id_cellule").trigger("change");
});
$("#id_cellule").change(function () {
celluleId = $(this).val();
search_cellule = $.trim($('#id_cellule option:selected').text());
if ( celluleId === null || search_cellule === '---------')
{ table.column([9]).search('').draw(); }
else
{ table.column([9]).search('"' + search_cellule + '"').draw();}
});
我无法解决的问题：当我回到这个页面时，我无法为每个链接的下拉列表设置最后选择的选项。
我可以在 Datatables (https://datatables.net/reference/option/stateSaveCallback) 中使用回调方法保存每个列表的状态
stateSaveCallback: function () {
localStorage.setItem( 'divisionId',$("#id_division").val() )
localStorage.setItem( 'sectionId',$("#id_section").val() )
localStorage.setItem( 'celluleId',$("#id_cellule").val() )
},但是，即使使用 stateLoadCallback 方法 (https://datatables.net/reference/option/stateLoadCallback) 重新加载页面时，列表也不会恢复其最后的值。
stateLoadCallback: function(settings,callback) {
$.ajax( {
url: "{% url 'load_effectif' %}",dataType: 'json',success: function (json) {callback( json );}
} );
value_division = JSON.parse(localStorage.getItem( 'divisionId' ));
//$('#id_division option[value="' + value_division + '"]').prop("selected",true);
$('#id_division option[value="' + value_division + '"]').prop("selected","selected");
$("#id_division").trigger("change");
value_section = JSON.parse(localStorage.getItem( 'sectionId' ));
//$('#id_section option[value="' + value_section + '"]').attr("selected",true);
$('#id_section option[value="' + value_section + '"]').attr("selected","selected");
$("#id_section").trigger("change");
value_cellule = JSON.parse(localStorage.getItem( 'celluleId' ));
//$('#id_cellule option[value="' + value_cellule + '"]').attr("selected",true);
$('#id_cellule option[value="' + value_cellule + '"]').attr("selected","selected");
$("id_cellule").trigger("change");
localStorage.clear()
}
你知道如何解决这个问题吗？
--- 编辑 2021-03-13 ---
我想我错过了一些很简单的东西。我试图从我的第一个列表 (id_division) 中选择所需的选项。以下是我尝试过的不同方法的列表：
-
试用 #1
stateLoadCallback: function(settings,callback) { $.ajax( { url: "{% url 'load_effectif' %}",success: function (json) {callback( json );} } ); value_division = JSON.parse(localStorage.getItem( 'divisionId' )); alert(value_division); if(value_division != null) {$('#id_division').val("'" + value_division + "'").change();} alert($("#id_division").val()); } -
trial #2：我首先改变了 stateLoadCallBack
stateLoadCallback: function(settings,callback) { $.ajax( { url: "{% url 'load_effectif' %}",success: function (json) {callback( json );} } ); value_division = JSON.parse(localStorage.getItem( 'divisionId' )); if(value_division != null){ $('#id_division').data('events',value_division).trigger('change'); } localStorage.clear() }, -
trial #2：然后是 id_division 更改函数
$('#id_filter_division').on('change',function(event) { division_old_state = $(this).data('events'); // get the call back value if (division_old_state != null) { alert(division_old_state); $(this).val(division_old_state); } divisionId = $(this).val(); $("#id_section").html(''); // initialize an AJAX request for SECTION $.ajax({ url: $("#id-orga-form").attr("data-sections-url"),// add the division id to the GET parameters data: { 'division': divisionId },// replace the contents of the section input with the data success: function (data) { $("#id_section").html(data); } }); search_division = $.trim($('#id_division option:selected').text()); if ( divisionId === null || search_division === '---------') { table.column([7]).search('').draw(); } else { table.column([7]).search('"' + search_division + '"').draw(); } $('#id_section').data('events',null).trigger('change'); });
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
