3

我用我YUI datatable的 json 数据源在一个updatepanel......postback

  • 为什么更新面板中的 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 
            }; 
        }(); 
    }
4

2 回答 2

2

嘿伙计们，

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

于 2010-02-16T04:09:46.263 回答
1

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

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

于 2010-02-04T21:05:20.820 回答