Grid组件

$.fn.grid = function(p) {
    var grid = this;
    var g = {
        reload: function() {
            grid.attr('page', 1);
            po.loadData();
        },
        getSelected: function() {
            var ret = [];
            var rows = [];
            if (g.sm == 'single') {
                rows = $(":radio:checked", g.body).parents('tr');
            }
            if (g.sm == 'multi') {
                rows = $(":checkbox:checked", g.body).parents('tr');
            }
            rows.each(function() {
                var rowIndex = this.rowIndex - 1;
                ret.push(g.data[rowIndex]);
            });
            return ret;
        }

    };
    var po = {
        init: function() {
            g.url = grid.addClass("grid").attr({
                page: 1,
                pagesize: 10
            }).attr("url");
            g.sm = grid.attr("sm");
            g.header = $("tr.gridheader", grid);
            g.cm = $("td", g.header);
            g.header.prepend(po.createHeaderSm());
            po.loadData();

        },
        createHeaderSm: function() {
            var td = $('<td>').width(30).attr('align', 'center');
            if (g.sm == 'single') {
                return td.html('选择');

            }
            if (g.sm == 'multi') {
                var c = $("<input type='checkbox'/>");
                c.bind('click',
                function() {
                    $(":checkbox", g.body).attr('checked', $(this).attr('checked'));
                });
                return td.append(c);

            }
        },
        createBodySm: function() {
            var td = $('<td>').width(30).attr('align', 'center');
            if (g.sm == 'single') {
                var c = $("<input type='radio' name='smitem'/>");
                return td.append(c);
            }
            if (g.sm == 'multi') {
                var c = $("<input type='checkbox'/>");
                return td.append(c);
            }
        },
        getParams: function() {
            if (typeof(p) == 'function') {
                var temp = p();
                if (typeof(temp) == 'string') {
                    var arr = temp.split("&");
                    var ret = {};
                    $(arr).each(function() {
                        var k = this.split("=")[0];
                        var v = this.split("=")[1];
                        ret[k] = v;
                    });
                    return ret;
                }
                if (typeof(temp) == 'object') {
                    return t;
                }
            }
            if (typeof(p) == 'object') {
                return p;
            }
            return {};

        },
        loadData: function() {
            grid.loading();
            var params = po.getParams();
            var page = parseInt(grid.attr('page'));
            var pagesize = parseInt(grid.attr('pagesize'));
            params['page'] = page;
            params['pagesize'] = pagesize;
            $.ajax({
                url: g.url,
                type: "post",
                async: true,
                data: params,
                dataType: "json",
                context: this,
                success: function(d) {
                    g.total = d['total'];
                    g.data = d['data'];
                    var page = parseInt(grid.attr('page'));
                    var pagesize = parseInt(grid.attr('pagesize'));
                    g.page = page;
                    g.pagesize = pagesize;
                    g.pagecount = Math.ceil(g.total / g.pagesize);
                    po.showData();
                }
            });
        },
        showData: function() {
            $(":checkbox", g.header).attr('checked', false);
            $("tr.gridbody", grid).remove();
            $('tr.gridpagebar', grid).remove();
            $(g.data).each(function() {
                var row = $('<tr>').addClass('gridbody');
                row.append(po.createBodySm());
                var record = this;
                g.cm.each(function() {
                    var html = "";
                    var p = $(this).attr("property");
                    var render = $(this).attr("render");
                    var align = $(this).attr("align");
                    var width = $(this).width();
                    var html = record[p];
                    if (render) {
                        html = eval(render).call(this, record, record[p]);

                    }
                    var cell = $("<td>").width(width).attr("align", align).html(html);
                    row.append(cell);

                });
                grid.append(row);

            });
            g.body = $("tr.gridbody", grid);
            g.body.filter(":odd").css("background", "#eee");
            po.buildPager();

        },
        buildPager: function() {
            var tr = $('<tr>').addClass('gridpagebar').height(30);
            var colspan = g.sm ? (g.cm.size() + 1) : g.cm.size();
            var td = $("<td>").attr('colspan', colspan);
            if (g.total > 0) {
                if (g.pagecount > 1) {
                    td.append(po.displayMsg());
                    td.append(po.changePager());

                }
                tr.append(td);

            } else {
                tr.append(td.html('没有数据'));

            }
            grid.append(tr);
            g.pagebar = $("tr.gridpagebar", grid);
            grid.unloading();

        },
        displayMsg: function() {
            var space = "&nbsp;&nbsp;&nbsp;&nbsp;";
            var msg = "总共{total}条记录" + space + "当前第{page}/{pagecount}页" + space + "显示第{from}~{to}条记录";
            var start = (g.page - 1) * g.pagesize;
            var limit = (g.page < g.pagecount) ? g.pagesize: (g.total % g.pagesize);
            var from = parseInt(start) + 1;
            var to = parseInt(start) + parseInt(limit);
            msg = msg.replace(/{total}/g, g.total);
            msg = msg.replace(/{page}/g, g.page);
            msg = msg.replace(/{pagecount}/g, g.pagecount);
            msg = msg.replace(/{from}/g, from).replace(/{to}/g, to);
            return $('<span>').html(msg);

        },
        changePager: function() {
            var space = $("<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>");
            var first = $("<a>").attr("href", "javascript:void(0)").html('首&nbsp;&nbsp;&nbsp页').click(function() {
                if (g.page > 1) {
                    grid.attr('page', 1);
                    po.loadData();

                }

            });
            var prev = $("<a>").attr("href", "javascript:void(0)").html('上一页').click(function() {
                if (g.page > 1) {
                    grid.attr('page', g.page - 1);
                    po.loadData();

                }

            });
            var next = $("<a>").attr("href", "javascript:void(0)").html('下一页').click(function() {
                if (g.page < g.pagecount) {
                    grid.attr('page', g.page + 1);
                    po.loadData();

                }

            });
            var last = $("<a>").attr("href", "javascript:void(0)").html('尾&nbsp;&nbsp;&nbsp页').click(function() {
                if (g.page < g.pagecount) {
                    grid.attr('page', g.pagecount);
                    po.loadData();

                }

            });
            if (g.page == 1) {
                first.attr("disabled", "disabled");
                prev.attr("disabled", "disabled");

            }
            if (g.page == g.pagecount) {
                next.attr("disabled", "disabled");
                last.attr("disabled", "disabled");

            }
            var pm = $('<span>');
            pm.append(space.clone()).append(first);
            pm.append(space.clone()).append(prev);
            pm.append(space.clone()).append(next);
            pm.append(space.clone()).append(last);
            return pm;

        }

    };
    po.init();
    return g;

};

 

(function(){
    var plugins = ['grid'];
    function parser(){
        $(plugins).each(function(){
            var p = $('.rzy-' + this);
            if(p.length){
                $('.rzy-' + this)[this]();       
            }
        });
    }
    $(parser);
})(jQuery);

$.fn.grid = function() {
    var g = this;
	//这里是header
    var header = [];
    header.push("<div class='list-header'>");
    var icon = this.attr('icon');
    var caption = this.attr('caption');
    var toolbar = this.attr('toolbar');
    var url = this.attr('url');
    if(icon){
        header.push("<div class='list-icon icon-");
        header.push(icon);
        header.push("'></div>");
    }
    if(caption){
        header.push("<div class='list-title");
        if(icon){
            header.push(" title-with-icon");
        }
        header.push("'>");
        header.push(caption);
        header.push("</div>");
    }
    if(toolbar){

    }
    header.push("</div>");
    //这里是body
    var body = [];
    body.push("<div class='list-body'><table cellspacing='0' cellpadding='0' class='list-body-table'>");
    //这里是表头
    body.push("<thead><tr>");
    var cols = $('div',g);
    g.empty();
    cols.each(function(){
        body.push("<td>");
        body.push(this.header);
        body.push("</td>");
    });
    body.push("</tr></thead>");
    //这里是数据行
    body.push("<tbody><tr>");
    body.push("<td colspan=");
    body.push(cols.size());
    body.push("></td>");
    body.push("</tr></tbody>");
    body.push("</table>");
    //这里是pager
    var pager = [];
    pager.push("<div class='list-pager'><table cellpadding='0'>");
    var pageList = "<tr><td><select style='margin:0 6px;'><option>10</option><option>15</option><option>20</option></select></td>";
    pager.push(pageList);
    var separator = "<td><div class='pager-separator'></div></td>";
    pager.push(separator);
    var first = "<td><a class='pager-first' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
    pager.push(first);
    var prev = "<td><a class='pager-prev' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
    pager.push(prev);
    pager.push(separator);
    var pagenum = "<td><div>第<input type='text' name='pagenum' class='pager-num' size=2/>共10页</div></td>";
    pager.push(pagenum);
    pager.push(separator);
    var next = "<td><a class='pager-next' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
    pager.push(next);
    var last = "<td><a class='pager-last' href='javascript:void(0)' hidefocus='true'>&nbsp;</a></td>";
    pager.push(last);
    pager.push("</tr></table></div>");
    body.push(pager.join(''));
    body.push("</div>");
    function render(){
        g.append(header.join(''));
        g.append(body.join(''));
    }
    function load(){
    	$.ajax({
            url: url,
            dataType:'json',
            success:function(data){
                var tbody = $('table.list-body-table tbody',g);
                tbody.empty();
                $(data.rows).each(function(){
                    var r = $('<tr>')
                    var row = this;
                    cols.each(function(){
                        $("<td>").html(row[this['field']]).appendTo(r);
                    });
                    tbody.append(r);
                });
            } 
        }); 
    }
    render();
    load();
};