我在我的代码中使用了两个带有outputField的表和另一个带有输入字段的表，并使用了jquery数据表我正在构建一个表。
按钮单击：编辑 - 在编辑模式下打开数据表（输入字段）取消 - 以只读模式（OutputField）打开数据表
说明：当我单击编辑按钮时，在EDIt模式下打开表格，如果我更改输入字段的某些值并单击取消，则在RO模式下渲染表格。
问题：如果再次点击“编辑”按钮，我在上一步中所做的更改仍然存在。
我想：表格列表应该从DB刷新，并应显示原始列表。
脚本标签：
<apex:outputPanel id="DtscriptId">
<script>
var j$ = jQuery.noConflict();
var EditCheck = "{!EditCancelDispCheck}";
var extdisplayPopup ="{!extdisplayPopup}";
console.log('EditCheck'+extdisplayPopup);
var table;
if(EditCheck == 'false' || extdisplayPopup == 'false'){
console.log('Inside Data Table Script1');
document.getElementById("divextdataEditTableId").style.display = "none";
document.getElementById("divextdataTableId").style.display = "block";
table = $('#extdataTableId').DataTable();
}
if(EditCheck == 'true'){
document.getElementById("divextdataTableId").style.display = "none";
document.getElementById("divextdataEditTableId").style.display = "block";
$("#extdataEditTableId").fadeTo(0,1.00);
$('#extdataEditTableId').DataTable().destroy();
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
} );
}
/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val().replace(/\s/g,'') * 1;
} );
}
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val().replace( /,/g, "." ).replace(/\s/g,'') * 1;
} );
}
/* Initialise the table with the required column ordering data types */
$('#extdataEditTableId').DataTable( {
"bDestroy" : true,
"columns": [
null,
{ "orderDataType": "dom-select" },
null,
null,
{ "orderDataType": "dom-select" },
{ "orderDataType": "dom-select" },
{ "orderDataType": "dom-text-numeric" },
{ "orderDataType": "dom-text"},
null
]
} );
}
if(extdisplayPopup == 'true'){
$("#extdataEditTableId").fadeTo(0,0.4);
}
function renderFirstTable(){
document.getElementById("divextdataEditTableId").style.display = "none";
document.getElementById("divextdataTableId").style.display = "block";
var dataTable = $('#extdataTableId').DataTable();
dataTable.clear();
<apex:repeat value="{!existingRowList}" var="i">
dataTable.row.add([
'{!i.Product__r.Name}',
'{!i.OS__c}',
'{!opportunitymarket}',
'{!opportunitycountry}',
'{!i.Quarter__c}',
'{!i.Year__c}',
'{!i.Quantity__c}',
'{!i.Total__c}',
'{!opportunitycurrency}'
]).draw();
</apex:repeat>
}
</script>
</apex:outputPanel>
我想：有没有可能使用jquery刷新带有DB列表的编辑表并仅渲染脚本面板，因为如果我渲染表面板它会丢失它的jquery Datatable属性。
你不需要JQuery去做你想做的事情。
我建议你在Extension或Custom Controller类中创建一个类Property来保持编辑模式的状态：
public with sharing class ExampleExtensionClass {
public Boolean editMode {
get {
if (editMode == null) {
editMode = false;
}
return editMode;
}
set;
}
}
然后在您的VF页面中，您可以将Apex Action Function绑定到Checkbox onchange事件，以在编辑模式下重新呈现表格：
<apex:page standardController="SObject" extensions="ExampleExtensionClass">
<apex:actionFunction name="rerenderTable" reRender="tablePanel"/>
<apex:inputCheckbox value="{!editMode}" onChange="rerenderTable();"/>
<apex:outputPanel layout="block" id="tabelPanel">
<apex:dataTable value="{!sObjectList}" var="sObjectrecord">
<apex:column>
<apex:outputField value="{!sObjectrecord.Name}" rendered="{!NOT(editMode)}"/>
<apex:inputField value="{!sObjectrecord.Name}" rendered="{!editMode}"/>
</apex:column>
</apex:dataTable>
</apex:outputPanel>
</apex:page>
我解决了这个问题。
渲染不能解决问题，因为inputfield绑定值并刷新它有两种方法
function ResetValues(){
var opptid ="{!opptid}";
result = sforce.connection.query("select id, Country__c,Price_Per_Unit__c, Product__r.Name, Quantity__c, OS__c, Quarter__c, Total__c, Year__c from Shipped_Units__c where opportunity__c = '"+opptid+"'");
records = result.getArray("records");
for (i = 0; i < records.length; i++) {
console.log('records1'+records[i].Quantity__c);
var inpos = i +'-inpOS';
var inpqtr = i +'-inpQtr';
var inpyear = i +'-inpYear';
var inpunit = i +'-inpUnit';
var inptotal = i +'-inpTotal';
var osid=document.getElementById(inpos).childNodes[0];
var qtrid=document.getElementById(inpqtr).childNodes[0];
var yearid=document.getElementById(inpyear).childNodes[0];
var unitid=document.getElementById(inpunit).childNodes[0];
var totalid=document.getElementById(inptotal).childNodes[0];
document.getElementById(osid.id).value=records[i].OS__c;
document.getElementById(qtrid.id).value=records[i].Quarter__c;
document.getElementById(yearid.id).value=records[i].Year__c;
document.getElementById(unitid.id).value=parseInt(records[i].Quantity__c);
document.getElementById(totalid.id).value=parseInt(records[i].Total__c);
}
}
或类似于下面的代码行
j$(InpIdmodsp).val(document.getElementById(outsp.id).innerText);