Grid组件

ruanzy888888

$.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 = "    ";            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>    </span>");            var first = $("<a>").attr("href", "javascript:void(0)").html('首  &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页').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'> </a></td>";    pager.push(first);    var prev = "<td><a class='pager-prev' href='javascript:void(0)' hidefocus='true'> </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'> </a></td>";    pager.push(next);    var last = "<td><a class='pager-last' href='javascript:void(0)' hidefocus='true'> </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();};