`

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();
};

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    dhtmlx的免费grid组件

    **DHTMLX Grid组件详解** DHTMLX是一个广泛使用的JavaScript库,它提供了多个富客户端UI组件,其中之一就是“Grid”组件。这个免费的grid组件在Web应用开发中扮演着重要角色,尤其对于数据密集型应用,它能提供高效...

    网页Grid组件 GT-Grid组件

    网页Grid组件,特别是GT-Grid组件,是Web开发中一种强大的数据展示工具,它为开发者提供了灵活、高效且功能丰富的表格解决方案。Grid组件在网页应用中扮演着至关重要的角色,用于展示结构化数据,支持排序、筛选、...

    测试Grid组件的程序

    在IT领域,Grid组件是一种常见的数据展示和管理工具,它被广泛应用于网页和应用程序中,以展示和操作结构化的数据。在本项目“测试Grid组件的程序”中,我们聚焦于一个基于JQuery的Grid实现,它展示了这个组件的强大...

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...

    Android自动Grid组件02

    官方android开发工具,并没有Grid 针对于优秀的三层工具Remobjects DataAbstract for java 开发一个简单易用的Grid for DA 使用方法很简单: tableGrid = (DataViewGrid) findViewById(R.id.dvg); tableGrid....

    vue 封装grid 布局-表单.zip

    这个压缩包"vue 封装grid 布局-表单.zip"显然包含了利用Vue.js进行组件封装的实践,特别是针对表格(grid)布局和表单设计。Vue与Element-UI或Iview-UI的结合是常见的做法,这两个都是基于Vue的UI组件库,提供了丰富...

    Android自动Grid组件

    官方android开发工具,并没有Grid 针对于优秀的三层工具Remobjects DataAbstract for java 开发一个简单易用的Grid for DA 使用方法很简单: tableGrid = (DataViewGrid) findViewById(R.id.dvg); tableGrid....

    GridDemo.zip

    《Flex中的Grid组件深度解析——以GridDemo.zip为例》 在Web应用开发领域,Adobe Flex以其强大的富互联网应用程序(RIA)构建能力而受到广大开发者喜爱。Flex提供了丰富的UI组件库,其中,Grid组件是用于展示数据...

    基于jQuery 开发的几个组件 (Table, Grid ,Menu ,Layout)

    Grid组件通常用于显示大量可操作的数据,它支持滚动、分页和列自定义。jQuery UI的Grid(即jqGrid)是此类组件的一个例子。jqGrid提供了一套完整的API和事件,允许用户与数据进行交互,如编辑、添加、删除和搜索...

    gt_grid国产表格组件反编译原码

    本文将基于已获取的反编译源码,对GT_GRID组件进行深度剖析,并探讨其内在的工作原理和应用技巧。 首先,我们来了解GT_GRID的基本架构。GT_GRID的核心设计是基于JavaScript,充分利用了Web前端的技术优势,实现了...

    页面获取grid中的数据

    在本篇博文中,我们将探讨如何从网页或Web应用程序的Grid组件中提取数据,以及可能涉及的工具和技术。 首先,我们需要了解Grid组件的基本概念。Grid是Web开发中的一个布局工具,它允许我们以表格形式展示数据,这些...

    微信小程序组件---grid实现行和列同时滑动

    在gridview里分为三个区域:首行、首列、数据区域。当首行左右滑动时,数据区域同步左右滑动;当首列上下滑动时,数据区域同步上下滑动;当数据区域左右滑动时,首行与之同步滑动;当数据区域上下滑动时,首列与之...

    使用Vue-Grid-Layout实现自定义工作台

    Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统,它允许开发者创建自定义的工作台,用户可以根据需要自由调整各个组件的位置和大小。在本教程中,我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...

    org.eclipse.nebula.widgets.grid_1.0.0.jar_gridview_everyt8y_

    标题中的"org.eclipse.nebula.widgets.grid_1.0.0.jar_gridview_everyt8y_"暗示了我们正在讨论的是Eclipse Nebula项目中的一个组件,具体是Grid Viewer相关的库,版本为1.0.0。这个库是用于构建用户界面的,特别适用...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    MERN-Syncfusion:带有Syncfusion Grid组件的MERN样本

    带有网格组件的MERN示例。 在该示例中,我们使用mangoDB来处理数据库操作,使用expressJS来处理REST服务以与客户端和服务器进行通信,使用R​​eact来创建客户端,使用webpack来处理源捆绑。 Syncfusion Essential ...

    angularjs ui-grid datepicker 日期控件

    综上所述,"angularjs ui-grid datepicker"是一个将AngularJS的UI-Grid组件与日期选择器功能相结合的技术,它提供了更丰富的用户体验,简化了日期数据的输入过程。在实际开发中,根据具体需求调整和配置,可以实现...

    EXT-JS Grid 用法

    EXT Designer是Sencha公司提供的一个可视化设计工具,它可以帮助开发者更加直观地构建EXT-JS应用程序,包括Grid组件。 EXT-JS Grid的基本结构包含行、列和单元格,可以绑定到数据源,如JSON或XML文件,也可以通过...

Global site tag (gtag.js) - Google Analytics