如何使用jQuery DataTable重新初始化表控制器列表

Question

我已经使用了2个表格一个，其中有Outustfield，另一个在我的代码中使用Inputfields并使用jQuery DataTable，我正在构造一个表。

按钮点击：编辑 - 在编辑模式（输入字段）中打开数据表取消 - 以ReadOnly模式（outputfield）

打开数据表

desc：当我单击"编辑"按钮时，在编辑模式下打开表，如果我更改输入字段的某些值并单击"取消"，以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属性。

Answer 1

您不需要jQuery来做您要做的事情。

我建议您在扩展程序或自定义控制器类中创建类属性，以保持编辑模式的状态：

public with sharing class ExampleExtensionClass {
    public Boolean editMode {
        get {
            if (editMode == null) {
                editMode = false;
            }
            return editMode;
        }
        set;
    }
}

然后，在VF页面中，您可以将Apex Action函数绑定到复选框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>

Answer 2

我解决了问题。

渲染无法解决问题，因为Inputfield绑定了该值并刷新它有两种方法

1. 刷新jQuery中的列表（无论您在控制器中引用或使用任何其他列表，都不会留下该值）

2. 将输出字段的数据复制到取消的输入字段。

   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);