thomasJang / axisj

javascript UI library
http://axisj.com/
GNU Lesser General Public License v2.1
310 stars 86 forks source link

안녕하세요. ^^ 페이징 처리가 잘되지 않아 질문 드립니다. #924

Open mjm4sky opened 8 years ago

mjm4sky commented 8 years ago

코드는 아래와 같습니다.

  1. 페이징 갯수 등은 표시가 잘되는데, 다음페이지 또는 페이지 콤보박스 선택시 데이터가 변경되지 않고 있습니다. 한마디로 다음페이지 버튼을 눌러도 ajax 호출이 안되고 있습니다.
  2. myGrid.setList() 를 하면 로딩 이미지가 표시되는데, setData() 를 하면 표시가 안되네요. 이게 맞는 것인지요? 그리고 setData() 시에도 로딩 이미지가 표시되게 하려면 어떻게 해야 할까요?

조언 부탁드립니다.

var fnObj = {
    pageStart: function(){
        fnObj.searchInit();
        fnObj.grid.init();
    },
    pageResize: function(){

    },
    searchInit: function(){
        mySearch.setConfig({
            targetID:"AXSearchTarget",
            theme : "AXSearch",
            rows:[
                {display:true, addClass:"", style:"", list:[
                    {label:"", labelWidth:"", type:"selectBox", width:"100", key:"srh_state", addClass:"secondItem", valueBoxStyle:"", value:"",
                        options:[ 
                            {optionValue:'1', optionText:'일반'}, 
                            {optionValue:'2', optionText:'탈퇴'} 
                        ]
                    },
                    {label:"", labelWidth:"", type:"selectBox", width:"100", key:"searchBy", addClass:"secondItem", valueBoxStyle:"", value:"",
                        options:[ 
                            {optionValue:'userId', optionText:'아이디'}, 
                            {optionValue:'depositors', optionText:'이름'}, 
                            {optionValue:'nickName', optionText:'닉네임'}
                        ]
                    },
                    {label:"", labelWidth:"", type:"inputText", width:"100", key:"searchWord", addClass:"", valueBoxStyle:"", value:""},

                    {label:"", labelWidth:"", type:"button", width:"80", key:"button", addClass:"", valueBoxStyle:"padding-left:0px;padding-right:5px;", value:"검색하기",
                        onclick: function(){
                            fnObj.grid.search();
                        }
                    }
                ]}
            ]
        });
    },

    grid: {
        init: function () {
            myGrid.setConfig({
                emptyListMSG: "데이터가 존재하지 않습니다.",
                targetID: "AXGridTarget",
                colHeadAlign: "center",
                colHeadTool : false,
                theme: "AXGrid",
                colGroup: [
                    { key: "m_ID", label: "checkbox", width: "30", align: "center", formatter: "checkbox", checked: function(){ } },
                    { key: "userId", label: "아이디(닉네임)", width: "150", align: "center", formatter: function() {
                        var userId = this.item.userId + '(' + this.item.nickName + ')';
                        return userId;
                    } },
                    { key: "depositors", label: "이름", width: "100", align: "center", formatter: "dec" },
                    { key: "mGrade", label: "등급", width: "80", align: "center" },
                    { key: "recommend_CNT", label: "추천수", width: "70", align: "right" }
                ],

                body: {
                    onclick: function () {
                    }
                },
                page:{
                    paging:true,
                    onchange: function(pageNo){
                        trace(this, pageNo);
                    }
                }
            });

            fnObj.grid.search();
        },

        search: function () {
            var pars = mySearch.getParam();

            new AXReq("member_list_ajax.asp", {
                method: "POST", 
                pars: pars,
                onsucc:function(res){
                    var data = {
                        list: res.data,
                        page:{
                            pageNo: res.pageNo, // 현재페이지
                            pageSize: res.pageSize,
                            pageCount: res.pageCount, // 전체 페이지수
                            listCount: res.listCount // 우측하단 카운트 표시 갯수
                        }
                    };
                    myGrid.setData(data);
                }
            });

            return false;
        }
    };
dkswjdals89 commented 8 years ago

search 함수 내에서 AXReq를 이용해서 ajax 콜을 하지 마시고, setList 함수에서 ajaxUrl 설정을 하셔서 로드하시면 됩니다. Grid ajax & paging 페이지를 참고해보세요.


myGrid.setList({
                ajaxUrl : "member_list_ajax.asp",
                ajaxPars: pars,
                onLoad  : function(){
                    //trace(this);
                }
            });