3

json データソースを使用してYUI datatableレンダリングしましたupdatepanel... その updatepanel 内のボタンをクリックするpostbackと、yui データテーブルが消えます

  • updatepanel 内の 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 に答える