2010-01-28 62 views
3

我得到了我YUI datatable呈現與我的JSON數據源的updatepanel內...如果我點擊一個按鈕內的UpdatePanel導致postback和我的衣數據表中消失爲什麼我的yui datatable在updatepanel內消失後回發?

  • 爲什麼衣的DataTable一個UpdatePanel內回傳後消失?

編輯:

我每次回發是不是一個表單提交後再次呈現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 
      }; 
     }(); 
    } 
+0

@Pandiya Chendur我可以幫你,如果你發佈你的代碼。如果可能,請使用http://jsbin.com/來顯示您的應用程序的外觀。否則,我很難想象發生了什麼 – 2010-02-09 17:51:05

+0

@Arthur Ronald現在看到我的編輯... – 2010-02-10 04:24:26

回答

1

任何生成客戶端的東西都必須在每次頁面刷新後(以及每次部分頁面刷新後,如果該部分包含客戶端生成的html)重新生成。

因爲YUI數據表在客戶端上獲取它的數據,所以每次替換html的那一段時都必須再次渲染它。

+0

爲什麼downvotes,人? – 2010-02-10 16:38:54

2

海傢伙,

我得到了我的qusetion答案....它我回發引發的問題,我通過在我的web應用程序中使用ajax enabled WCF Service Ajax調用解決它......一切正常現在....

相關問題