选择特定字段时，输出与该字段相关的信息ODOO

Question

我正在ODOO模块中创建一个表，我已经创建了自己的视图(表(我有一个表，我想在其中实现选择显示内容的功能例如，用户已经选择了"；标识符"；select中的字段(select在th中(，它将在列中显示有关该标识符的信息这种情况下我该怎么办？我正在使用XML、JS(JQuery(和ODOO

$(document).ready(function() {  
$('.author_ids').prop('checked', false);
$("th[class='author_ids']").hide();
$("td[class='author_ids']").hide();
$('.id').prop('checked', false);
$("th[class='id']").hide();
$("td[class='id']").hide();
$('.display_name').prop('checked', false);
$("th[class='display_name']").hide();
$("td[class='display_name']").hide();
$('.create_uid').prop('checked', false);
$("th[class='create_uid']").hide();
$("td[class='create_uid']").hide();
$('.create_date').prop('checked', false);
$("th[class='create_date']").hide();
$("td[class='create_date']").hide();
$('.write_uid').prop('checked', false);
$("th[class='write_uid']").hide();
$("td[class='write_uid']").hide();
$('.write_date').prop('checked', false);
$("th[class='write_date']").hide();
$("td[class='write_date']").hide();
$('.__last_update').prop('checked', false);
$("th[class='__last_update']").hide();
$("td[class='__last_update']").hide();
$('input:checkbox').change(function(){
var checkBoxClass = $(this).attr("class");    
if(this.checked){
$("th[class='" + checkBoxClass + "']").show();
$("td[class='" + checkBoxClass + "']").show();
// sessionStorage.setItem(this, checkBoxClass.checked);     
}
else{
$("th[class='" + checkBoxClass + "']").hide();
$("td[class='" + checkBoxClass + "']").hide();
// sessionStorage.setItem(this, checkBoxClass.unchecked);     
}
$('div#Debug').text("hiding " + checkBoxClass);
});  
$('.main-item').on('click', function(){
$('.sub-menu').slideToggle(400);
});
$('.field').change(function() {
if ($(this).val() === 'id') {
console.log("lalalala");
}
});
});

<template id="tableID">
<t t-name="tableView">
<div class="row ml16 mr16">
<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a> 
<ul class="sub-menu"> 
<t t-foreach="field_name" t-as="field" class="col-3">
<th>
<div class="menu">
<div class="menu-box">
<input t-att-class="field" type="checkbox" checked="checked"/>
<div style="padding-left: 10px;">
<t t-esc="field"/>
</div>
</div>
</div>
</th>
</t> 
</ul> 
<table border="1" width="100%" cellpadding="5">
<tr>
<t t-foreach="field_name" t-as="field" class="col-3">
<th t-att-class="field">
<select class="field">
<t t-foreach="field_name" t-as="colfield" class="col-3">
<option t-att-value="colfield">                                       
<t t-esc="colfield"/>                                       
</option>
</t>
</select>
</th>
</t>
</tr>
<t t-foreach="groups" t-as="group" class="col-3">
<t t-set="group_data" t-value="groups[group]"/>
<tr>
<t t-foreach="field_name" t-as="field" class="col-3">
<t t-set="filk" t-value="group_data[field]" />
<td t-att-class="field">
<t t-esc="filk"/>
</td>
</t>
</tr> 
</t>
</table>
</div>
<script type="text/javascript" src="/academy/static/js/table_checkboxes.js"></script>
</t>
</template>```

Answer 1

也许Bootstrap可以满足您的需求：根据表头输入值过滤行：https://examples.bootstrap-table.com/#extensions/filter-control.html

否则，您可以添加一个"；数据"；属性到您的选择标签和相应的表格单元格td，以便相应地过滤或更新它们：

<table border="1" width="100%" cellpadding="5">
<tr>
<t t-foreach="field_name" t-as="field" class="col-3">
<th t-att-class="field">
<select class="field" t-att-data="field">
<t t-foreach="field_name" t-as="colfield" class="col-3">
<option t-att-value="colfield">                                       
<t t-esc="colfield"/>                                       
</option>
</t>
</select>
</th>
</t>
</tr>
<t t-foreach="groups" t-as="group" class="col-3">
<t t-set="group_data" t-value="groups[group]"/>
<tr>
<t t-foreach="field_name" t-as="field" class="col-3">
<t t-set="filk" t-value="group_data[field]" />
<td t-att-class="field" t-att-data="field">
<t t-esc="filk"/>
</td>
</t>
</tr> 
</t>
</table>

并在选择标签中添加一些jquery onchange：

$("select.field").on('change', function () {
var select_col_th = $(this).attr("data");
var selected_option = $(this).val();
//var table_all_tr = $(this).closest("tr").siblings();

//Show all the related table cells:
$("td[data='"+select_col_th+"']").show();

//Update all the related table cells:
$("td[data='"+select_col_th+"']").each(function (index, elt ) {
var cur_value = $(elt).text(); 
//transform the value as you want and update:
var new value = "XXX";
$(elt).text(new_value);

});
})