我们如何在网站上制作可编辑的 odoo 12 表格？ （edit/save 形式使用 js/jquery）
how can we make a form in the website editable odoo 12? (edit/save in form using js/jquery)
我在网站中为门户用户创建了一个表单视图。我正在从模型 A 中获取数据。
我想在这里做的是，用户可以使用（跨度中的 t 字段）查看已经获取的数据，并且用户需要编辑和保存结果数据，需要更新到相应的模型。但是，当跨度字段中有数据提取时，用户无法编辑该字段并保存
$('#edit_save').click(function(e) {
e.preventDefault();
editable = !editable;
if (editable) {
$(this).text('Save');
} else {
}
);
alert("Hello! I am an alert box!!"); $(this).text('Edit');
}
$('.input').each(function() {
var that = $(this);
if (editable) {
that.addClass('hidden');
$('<input value="' + that.text() + '">').insertAfter(that);
} else {
var input = that.next();
that.removeClass('hidden');
that.text(input.val());
input.remove();
}
})
})
.input {
margin: 5px;
position: relative;
}
<form class="form-horizontal" style="bg-light">
<t t-set="card_body">
<t t-foreach="health_record" t-as="hr">
#health_record = request.env['model'].search([)]
<div class="form-group">
<t>
<button id="edit_save" class="btn btn-primary">Edit</button>
<button id="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input" title="Name" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span id="age" t-field="hr.age" class="input" title="Age" />
</div>
</t>
</t>
</form>
您可以在 span 标签旁边为姓名和年龄添加 inputs，并在您的页面加载时先隐藏它们。然后，每当您的 edit 按钮被点击时，您可以检查文本是否为 Edit 如果是，您可以显示 inputs-box 并隐藏 span 标签并将编辑按钮更改为 save 按钮。因此，如果用户单击 save 按钮，您可以获取两个输入值并使用 form 提交或 ajax 调用将其发送到后端。
接下来，当 edit 按钮被点击时，您也可以显示 cancel 按钮（可选），因此如果用户点击取消按钮，则不会进行任何更改，inputs 将隐藏起来。
演示代码 :
$(".form-group input").hide() //hide inputs
//on click ofedit button
$(".edit_save").click(function() {
var selector = $(this).closest(".form-group")
var btnText = $(this).text();
if (btnText === 'Edit') {
$(this).text('Save');
$(this).next("button").show(); //hide
selector.find("form span").hide() //span hide
selector.find("form input").show() //show inputs
} else {
$(this).text('Edit');
$(this).next("button").hide();
selector.find("form span").show()
selector.find("form input").hide()
//get values from input box which is edited
var name = selector.find("input[name=name]").val();
var age = selector.find("input[name=age]").val()
//your ajax call put here to send both values and some id to identify record whwere to update...
//put updated values in span again add this inside success fn of ajax call
selector.find("span.names").text(name)
selector.find("span.ages").text(age)
//or submit from here using $(this).closest("form").submit();
//this will submit form with input value to your backed don't forget to add action to form also some hidden input to identify record.
}
});
$('.cancel').click(function() {
var selector = $(this).closest('form')
//get span values
var names = selector.find("span.names").text()
var ages = selector.closest('form').find("span.ages").text()
$(this).hide(); //hide cancel buton
$(this).prev(".edit_save").text('Edit'); //change text
selector.find("span").show() //hide & Show
selector.find("input").hide()
selector.find("input[name=name]").val(names);
selector.find("input[name=age]").val(ages)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="form-group">
<form class="form-horizontal" style="bg-light">
<t>
<button type="button" class="edit_save" class="btn btn-primary">Edit</button>
<!--added this button-->
<button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
<button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input names" title="Name">Abc</span>
<!--added input here you can use t-att-value="hr.partner_id" same for other fields-->
<input type="text" name="name" value="Abc" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span t-field="hr.age" class="input ages" title="Age">20</span><input type="text" name="age" value="20" />
</div>
</form>
</div>
<div class="form-group">
<form class="form-horizontal" style="bg-light">
<t>
<button type="button" class="edit_save" class="btn btn-primary">Edit</button>
<button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
<button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input names" title="Name">Mno</span><input type="text" name="name" value="Mno" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span t-field="hr.age" class="input ages" title="Age">23</span><input type="text" name="age" value="23" />
</div>
</form>
</div>
<div class="form-group">
<form class="form-horizontal" style="bg-light">
<t>
<button type="button" class="edit_save" class="btn btn-primary">Edit</button>
<button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
<button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input names" title="Name">Xyz</span><input type="text" name="name" value="Xyz" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span t-field="hr.age" class="input ages" title="Age">10</span><input type="text" name="age" value="10" />
</div>
</form>
</div>
注意 ：您只需要添加输入值即：t-att-value="yourvalue" 或 value="yourvalue" 我有之前没有使用过 odoo，但其中一个应该可以工作。另外，确保在表单中添加隐藏输入，这将区分每个数据，即：一些 id 对于每个记录都是唯一的，这样它可以帮助您在后端更新数据。
我在网站中为门户用户创建了一个表单视图。我正在从模型 A 中获取数据。
我想在这里做的是，用户可以使用（跨度中的 t 字段）查看已经获取的数据，并且用户需要编辑和保存结果数据，需要更新到相应的模型。但是，当跨度字段中有数据提取时，用户无法编辑该字段并保存
$('#edit_save').click(function(e) {
e.preventDefault();
editable = !editable;
if (editable) {
$(this).text('Save');
} else {
}
);
alert("Hello! I am an alert box!!"); $(this).text('Edit');
}
$('.input').each(function() {
var that = $(this);
if (editable) {
that.addClass('hidden');
$('<input value="' + that.text() + '">').insertAfter(that);
} else {
var input = that.next();
that.removeClass('hidden');
that.text(input.val());
input.remove();
}
})
})
.input {
margin: 5px;
position: relative;
}
<form class="form-horizontal" style="bg-light">
<t t-set="card_body">
<t t-foreach="health_record" t-as="hr">
#health_record = request.env['model'].search([)]
<div class="form-group">
<t>
<button id="edit_save" class="btn btn-primary">Edit</button>
<button id="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input" title="Name" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span id="age" t-field="hr.age" class="input" title="Age" />
</div>
</t>
</t>
</form>
您可以在 span 标签旁边为姓名和年龄添加 inputs，并在您的页面加载时先隐藏它们。然后，每当您的 edit 按钮被点击时，您可以检查文本是否为 Edit 如果是，您可以显示 inputs-box 并隐藏 span 标签并将编辑按钮更改为 save 按钮。因此，如果用户单击 save 按钮，您可以获取两个输入值并使用 form 提交或 ajax 调用将其发送到后端。
接下来，当 edit 按钮被点击时，您也可以显示 cancel 按钮（可选），因此如果用户点击取消按钮，则不会进行任何更改，inputs 将隐藏起来。
演示代码 :
$(".form-group input").hide() //hide inputs
//on click ofedit button
$(".edit_save").click(function() {
var selector = $(this).closest(".form-group")
var btnText = $(this).text();
if (btnText === 'Edit') {
$(this).text('Save');
$(this).next("button").show(); //hide
selector.find("form span").hide() //span hide
selector.find("form input").show() //show inputs
} else {
$(this).text('Edit');
$(this).next("button").hide();
selector.find("form span").show()
selector.find("form input").hide()
//get values from input box which is edited
var name = selector.find("input[name=name]").val();
var age = selector.find("input[name=age]").val()
//your ajax call put here to send both values and some id to identify record whwere to update...
//put updated values in span again add this inside success fn of ajax call
selector.find("span.names").text(name)
selector.find("span.ages").text(age)
//or submit from here using $(this).closest("form").submit();
//this will submit form with input value to your backed don't forget to add action to form also some hidden input to identify record.
}
});
$('.cancel').click(function() {
var selector = $(this).closest('form')
//get span values
var names = selector.find("span.names").text()
var ages = selector.closest('form').find("span.ages").text()
$(this).hide(); //hide cancel buton
$(this).prev(".edit_save").text('Edit'); //change text
selector.find("span").show() //hide & Show
selector.find("input").hide()
selector.find("input[name=name]").val(names);
selector.find("input[name=age]").val(ages)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="form-group">
<form class="form-horizontal" style="bg-light">
<t>
<button type="button" class="edit_save" class="btn btn-primary">Edit</button>
<!--added this button-->
<button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
<button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input names" title="Name">Abc</span>
<!--added input here you can use t-att-value="hr.partner_id" same for other fields-->
<input type="text" name="name" value="Abc" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span t-field="hr.age" class="input ages" title="Age">20</span><input type="text" name="age" value="20" />
</div>
</form>
</div>
<div class="form-group">
<form class="form-horizontal" style="bg-light">
<t>
<button type="button" class="edit_save" class="btn btn-primary">Edit</button>
<button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
<button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input names" title="Name">Mno</span><input type="text" name="name" value="Mno" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span t-field="hr.age" class="input ages" title="Age">23</span><input type="text" name="age" value="23" />
</div>
</form>
</div>
<div class="form-group">
<form class="form-horizontal" style="bg-light">
<t>
<button type="button" class="edit_save" class="btn btn-primary">Edit</button>
<button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
<button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
</t>
<h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
<div style="padding-bottom:1px;" class="col-md text-md-left">
<label class="text-secondary"><strong>Name:</strong></label>
<span t-field="hr.partner_id" class="input names" title="Name">Xyz</span><input type="text" name="name" value="Xyz" />
</div>
<div class="col-md text-md-left">
<label class="text-secondary"><strong >Age:</strong></label>
<span t-field="hr.age" class="input ages" title="Age">10</span><input type="text" name="age" value="10" />
</div>
</form>
</div>
注意 ：您只需要添加输入值即：t-att-value="yourvalue" 或 value="yourvalue" 我有之前没有使用过 odoo，但其中一个应该可以工作。另外，确保在表单中添加隐藏输入，这将区分每个数据，即：一些 id 对于每个记录都是唯一的，这样它可以帮助您在后端更新数据。