为什么我的更新面板中的 yui 数据表在回发后消失了？答案

【问题标题】：Why my yui datatable within an updatepanel disappears after postback?为什么我的更新面板中的 yui 数据表在回发后消失了？
【发布时间】：2010-01-28 03:39:25
【问题描述】：

我的YUI datatable 在updatepanel 中使用我的json 数据源呈现...如果我单击该更新面板中的按钮会导致postback 并且我的yui 数据表消失

为什么更新面板中的 yui 数据表在回发后消失了？

编辑：

我在每次回发后再次呈现 YUI 数据表，这不是表单提交...我知道这是一种不好的做法... 为此可以做些什么......任何建议......

 if (!IsPostBack)
    {
        GetEmployeeView();
    }


public void GetEmployeeView()
{
    DataTable dt = _employeeController.GetEmployeeView().Tables[0];
    HfJsonString.Value = GetJSONString(dt);
    Page.ClientScript.RegisterStartupScript(Page.GetType(), "json",
    "EmployeeDatatable('" + HfJsonString.Value + "');", true);
}

When i click any button in that page it causes postback and i have to 
regenerate YUI Datatable once again with the hiddenfield value containing
json string..


protected void LbCancel_Click(object sender, EventArgs e)
{
    HfId.Value = "";
    HfDesigId.Value = "";
    ScriptManager.RegisterClientScriptBlock(LbCancel, typeof(LinkButton),
     "cancel", "EmployeeDatatable('" + HfJsonString.Value + "');, true);
}

我的 javascript：

function EmployeeDatatable(HfJsonValue){
        var myColumnDefs = [ 
            {key:"Identity_No", label:"Id", width:50, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
            {key:"Emp_Name", label:"EmployeeName", width:150, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}}, 
            {key:"Address", label:"Address", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}}, 
            {key:"Desig_Name", label:"Category", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
            {key:"", formatter:"checkbox"}
        ]; 
        var jsonObj=eval('(' + HfJsonValue + ')');
        var target = "datatable";
        var hfId = "ctl00_ContentPlaceHolder1_HfId";
        generateDatatable(target,jsonObj,myColumnDefs,hfId)
    }



function generateDatatable(target,jsonObj,myColumnDefs,hfId){   
        var root;
        for(key in jsonObj){
            root = key; break;
        }
        var rootId = "id";
        if(jsonObj[root].length>0){
            for(key in jsonObj[root][0]){
                rootId = key; break;
            }
        }
        YAHOO.example.DynamicData = function() { 
            var myPaginator =  new YAHOO.widget.Paginator({ 
                rowsPerPage: 10, 
                template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE, 
                rowsPerPageOptions: [10,25,50,100], 
                pageLinks: 10 });

            // DataSource instance 
            var myDataSource = new YAHOO.util.DataSource(jsonObj); 
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
            myDataSource.responseSchema = {resultsList: root,fields:new Array()};
            myDataSource.responseSchema.fields[0]=rootId;
            for(var i=0;i<myColumnDefs.length;i++){
                myDataSource.responseSchema.fields[i+1] = myColumnDefs[i].key;
            }
            // DataTable configuration 
            var myConfigs = { 
                 sortedBy : {key:myDataSource.responseSchema.fields[1], dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
                 paginator : myPaginator
            }; 
             // DataTable instance 
            var myDataTable = new YAHOO.widget.DataTable(target, myColumnDefs, myDataSource, myConfigs); 
            myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow); 
            myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow); 
            myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);

            myDataTable.subscribe("checkboxClickEvent", function(oArgs){
                var hidObj = document.getElementById(hfId);
                var elCheckbox = oArgs.target;
                var oRecord = this.getRecord(elCheckbox);
                var id=oRecord.getData(rootId);
                if(elCheckbox.checked){
                    if(hidObj.value == ""){
                        hidObj.value = id;
                    }
                    else{ 
                        hidObj.value += "," + id;
                    }
                }      
                else{
                    hidObj.value = removeIdFromArray(""+hfId,id);  
                }
            });
            myPaginator.subscribe("changeRequest", function (){

                if(document.getElementById(hfId).value != "")
                {
                     if(document.getElementById("ConfirmationPanel").style.display=='block')
                       {
                         document.getElementById("ConfirmationPanel").style.display='none';
                       }
                    document.getElementById(hfId).value="";
                }
                return true;
            });
            myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { 
                oPayload.totalRecords = oResponse.meta.totalRecords; 
                return oPayload; 
            } 
            return { 
                ds: myDataSource, 
                dt: myDataTable 
            }; 
        }(); 
    }

【问题讨论】：

@Pandiya Chendur 如果您发布代码，我可以帮助您。如果可能，请使用jsbin.com 来展示您的应用的外观。否则，我很难想象发生了什么
@Arthur Ronald 现在看到我的编辑...

标签： asp.net updatepanel yui postback yui-datatable

【解决方案1】：

大家好，

我的问题得到了答案....是我的回发导致了问题，我通过在我的 Web 应用程序中使用 ajax enabled WCF Service 进行 ajax 调用解决了这个问题...现在一切正常....

【讨论】：

【解决方案2】：

您在客户端生成的任何内容都必须在每次页面刷新后重新生成（以及在每次部分页面刷新后，如果该部分包含客户端生成的 html）。

因为 YUI 数据表在客户端获取数据，所以每次替换 html 的那部分时都必须重新呈现它。

【讨论】：