2010-01-28 68 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调用解决它......一切正常现在....

相关问题