Question

我在YUI datatable内使用我的json数据源渲染了我的updatepanel ...如果我点击该更新面板中的按钮导致postback并且我的yui数据表消失

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

修改

我在每个帖子后面再次渲染YUI Datatable，这不是表单提交......我知道这是一个不好的做法...... 可以做些什么....任何建议.....

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

Answer 1

Hai guys，

我得到了我的问题的答案....我的回发引起了问题，我通过在我的网络应用程序中使用ajax enabled WCF Service进行ajax调用来解决它...现在一切正常......

Answer 2

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

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

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

2 个答案: