show一段插件代碼

$.extend($.fn, {
    gridtable: function(opt) {

        this.each(function(i) {
            
            var that = this, $that = $(this);
            var options = $.extend({}, $.fn.gridtable.options, opt);
            var i, len, datas = {};

            if(0 == options.colModel.length) {
                alert("colModel不存在");
                return;
            }

            if(0 == options.colName.length) {
                for(i=0, len=options.colModel.length; i<len; i++) {
                    options.colName[i] = options.colModel[i].names;
                }
            }

            if(options.colName.length != options.colModel.length) {
                alert("colName和colModel長度不一致!");
                return;
            }
            
            var newtable = function() {};

            /**
             * 得到table表頭
             * @param  {[object]} options []
             * @return {[string]}         [表頭字符串]
             */
            newtable.prototype.getThead = function(options) {
                var lengths = options.colModel.length;
                var thead = "<thead><tr class='tb-head'>";

                for(i=0, len=lengths; i<len; i++) { 
                    if (!options.colModel[i].width) {
                        options.colModel[i].width = 150;
                    };
                    if (!options.colModel[i].align) {
                        options.colModel[i].align = "center";
                    };
                    thead += "<td style='width:"+options.colModel[i].width+"px;text-align:"+options.colModel[i].align+";'>"+options.colName[i]+"</td>";
                }
                thead += "</tr></thead>";
                return thead;
            };

            /**
             * 得到table主體
             * @param  {[object]} options []
             * @param  {[string]} url [獲取數據路徑]
             * @return {[string]}         [table主體字符串]
             */
            newtable.prototype.getTbody = function(options) {
                // this.getData(options);
                // var data = this.datas.result;
                var data = datas.result;
                var tbody = "<tbody>";
                for(i=0, len=data.length; i<len; i++) { 
                    tbody += "<tr>";
                    for (var j = 0; j < options.colModel.length; j++) {
                        if (!options.colModel[j].width) {
                            options.colModel[j].width = 150;
                        };
                        if (!options.colModel[j].align) {
                            options.colModel[j].align = "center";
                        };
                        if (j == options.colModel.length-1 && options.colModel[j].names == "act") {
                            tbody += "<td class='td_"+options.colModel[j].names+"' style='width:"+options.colModel[j].width+"px;text-align:"+options.colModel[j].align+";'>"+options.colModel[j].contents+"</td>";
                        } else{
                            tbody += "<td class='td_"+options.colModel[j].names+"' style='width:"+options.colModel[j].width+"px;text-align:"+options.colModel[j].align+";'>"+data[i][options.colModel[j].names]+"</td>";
                        };
                    };
                    tbody += "</tr>";
                }
                tbody += "</tbody>";

                return tbody;
            };

            /**
             * 得到table字符串
             * @param  {[object]} options []
             * @param  {[string]} url [獲取數據路徑]
             * @return {[string]}     
             */
            newtable.prototype.getTable = function(options) {
                var thead = this.getThead(options);
                var tbody = this.getTbody(options);
                var table = thead + tbody;
                return table;
            };

            newtable.prototype.onload = function(options) {
                var table = this.getTable(options);
                $that.append(table);
                options.gridComplete(datas);
            };

            newtable.prototype.empty = function() {
                $that.empty();
            };

            newtable.prototype.reload = function(options) {
                this.empty();
                this.onload(options);
            };

            function param(){

            }

            var page = function(){
                this.defaults = {
                    pageNo : 1,
                    pageSize: 10
                };
            };
            page.prototype.doinit = function(options, fn) {
                var opts = $.extend({}, this.defaults, options);
                var pageNo = parseInt(opts.pageNo);
                var totalPages = opts.totalPages;
                var str = '';
                var startIndex = 1;
                var params = opts;
                var loopNum = Math.min(pageNo+3,totalPages);

                delete params["totalPages"];
                delete params["callback"];

                if (totalPages <= 1) {
                    return false;
                }

                //添加上一頁
                if (pageNo != 1) {
                    params["pageNo"] = pageNo -1;
                    str += '<a href="?';
                    str += $.param(params);
                    str += '" class="page-prev">上一頁</a> ';
                }

                if (totalPages < 6){
                    startIndex = 1;
                    loopNum = totalPages;
                }

                if (totalPages >= pageNo && pageNo > 4) {
                    startIndex = pageNo -3;
                };
                if (pageNo <=4 && totalPages > 6) {
                    loopNum = 6;
                };

                for (; startIndex <= loopNum; startIndex++) {
                    if (startIndex == pageNo) {
                        str += "<span>";
                        str += startIndex;
                        str += "</span> ";
                    } else {
                        params["pageNo"] = startIndex;
                        str += '<a href="?';
                        str += $.param(params);
                        str += '">';
                        str += startIndex;
                        str += '</a> ';
                    }
                }

                if (loopNum < totalPages) {
                    str += '<span class="page-dot">...</span> ';
                };

                //添加下一頁
                if (totalPages !=0 && pageNo != totalPages) {
                    params["pageNo"] = pageNo +1;
                    str += '<a href="?';
                    str += $.param(params);
                    str += '" class="page-next">下一頁</a> ';
                };

                return str;
            };



            $.ajax({
                url:options.url,
                dataType:"json",
                data:options.extraData,
                async: true,
                cache: false,
                type:options.mtype,
                success: function(result) {
                    datas = result.data;
                    var table = new newtable();
                    table.onload(options);

                    // var page = new page();
                    var obj = {
                        totalPages: datas.totalPages,
                        pageNo : datas.pageNo,
                        pageSize:datas.pageSize
                    };

                    $(options.page).html((new page()).doinit(obj));
                },
                error: function(e) {
                    console.log(e);
                }
            });
            
        });
    }
});

$.fn.gridtable.options = {
    "colName":[],
    "colModel":[],
    mtype:"GET",
    extraData:"",
    gridComplete:function(data){}
};


歡迎大家指出不足的地方

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章