1. 程式人生 > >點選載入更多先載入5條,然後依次分批載入

點選載入更多先載入5條,然後依次分批載入

html頁面

<center>
             <div id="more" data-status="1" onclick="app.hospital.dept.busy.loadMore();" style="margin: 20px;display:none;">
                               載入更多
              </div>
          </center>

js相關程式碼

app.hospital.dept.busy = {
    orgCode:"",
    dataSource:null,
    count:5,
    init : function() {
        debugger;
        app.hospital.dept.busy.findHosInfo();
        app.hospital.dept.busy.queryDeptStaicData();
    },
    queryDeptStaicData :function(){
        app.loading.show();
        app.api.hospital.queryDeptStaicData({
            data : {orgCode : app.hospital.dept.busy.orgCode},
            success : function(result) {
                if (result.responseCode == "0") {
                    app.alert(result.responseMsg, '錯誤');
                } else {
                    debugger;
                    app.hospital.dept.busy.dataSource = result.datas;
                     if (app.hospital.dept.busy.dataSource.length<=5) {
                         j$("#more").hide();
                     }
                    for(var i=0; i<5; i++){
                             var id = "deptEchartsDiv_"+i;
                             var template = j$("#deptEchartsDivTemplate").clone();
                             var div = j$(template.html());
                             div.attr("id",id);
                             j$("#deptEchartsShowDiv").append(div);
                             var bd = app.hospital.dept.busy.dataSource[i].BUSY_DATE;
                             var onum = app.hospital.dept.busy.dataSource[i].O_NUM;
                             var dn = app.hospital.dept.busy.dataSource[i].DEPT_NAME;
                             app.hospital.dept.busy.createEcharts(id,dn,bd.split(","),onum.split(","));
                    }
                    j$("#more").show();  
                }
                app.hospital.dept.busy.count=5;
                app.loading.hide();
            },
            error : app.api.error
        });
    },
    findHosInfo:function(){
        app.api.hospital.queryHositoryInfo({
            data : {orgCode : app.hospital.dept.busy.orgCode},
            success : function(result) {
                debugger;
                if (result.responseCode == "0") {
                    app.alert(result.responseMsg, '錯誤');
                } else {
                    var datasTemp = result.datas;
                    //alert(datasTemp);
                    var template = $('#tmpl-hospital-introduction-list').html();
                    $('#hospital-introduction-list').html($m.tmpl(template, datasTemp));

                }
            },
            error : app.api.error
        });
    },
    createEcharts : function(id,name,bd,onum){
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            title: {
                text: name
            },
            tooltip: {},
            legend: {
                data:['科室']
            },
            xAxis: {
                data: bd,
                axisLabel:{
                     interval:0,
                     rotate:-30,
                }
            },
            
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: onum
            }]
        };
        myChart.setOption(option);
    },
    
    loadMore : function(){
        var index=5;
        if (app.hospital.dept.busy.count<app.hospital.dept.busy.dataSource.length) {
            if(app.hospital.dept.busy.dataSource.length-app.hospital.dept.busy.count<5){
                debugger;
                index = app.hospital.dept.busy.dataSource.length-app.hospital.dept.busy.count;
            }
            for(var i=app.hospital.dept.busy.count; i<app.hospital.dept.busy.count+index; i++){
                
                var id = "deptEchartsDiv_"+i;
                var template = j$("#deptEchartsDivTemplate").clone();
                var div = j$(template.html());
                div.attr("id",id);
                j$("#deptEchartsShowDiv").append(div);
                var bd = app.hospital.dept.busy.dataSource[i].BUSY_DATE;
                var onum = app.hospital.dept.busy.dataSource[i].O_NUM;
                var dn = app.hospital.dept.busy.dataSource[i].DEPT_NAME;
                app.hospital.dept.busy.createEcharts(id,dn,bd.split(","),onum.split(","));
           }
            
            app.hospital.dept.busy.count+=index;
            if(app.hospital.dept.busy.count>=app.hospital.dept.busy.dataSource.length){
                j$("#more").hide();
            }    
        }        
        app.loading.hide();
    },
    
    open : function(orgCode){
        debugger;
        app.hospital.dept.busy.orgCode = orgCode;
        if(typeof(navigator.connection) != "undefined" && typeof(Connection) != "undefined"){
            if(navigator.connection.type == Connection.NONE) {
                app.alert('網路連線不穩定,請檢查網路後重新整理重試。', '網路異常');
            } else {
                app.viewMain.router.load({url: 'pages/guide/deptBusy.html'});
            }
        }else{
            app.viewMain.router.load({url: 'pages/guide/deptBusy.html'});
        }
    }
};