如何使用Jquery数据表重新初始化表控制器列表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Jquery数据表重新初始化表控制器列表相关的知识,希望对你有一定的参考价值。

我在我的代码中使用了两个带有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绑定值并刷新它有两种方法

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

以上是关于如何使用Jquery数据表重新初始化表控制器列表的主要内容,如果未能解决你的问题,请参考以下文章

使用 JQUERY 和 AJAX 在 Laravel 分页中重新填充表数据

动态添加部分视图后如何重新初始化JQuery

使用 JQuery 重新加载局部视图

如何使用 jQuery DataTables 发布整个表的数据

jquery 数据表:“未捕获的类型错误:无法读取未定义的属性‘长度’”在销毁和重新初始化后。表作为数据源

无法重新初始化 JQuery DataTable