javascript 实现datagrid

最新推荐文章于 2021-05-03 15:22:03 发布

doubleicon

最新推荐文章于 2021-05-03 15:22:03 发布

阅读量1.7k

点赞数

分类专栏： jquery JavaScript 文章标签： dategrid jquery.pagination

本文链接：https://blog.csdn.net/u011872945/article/details/31770761

版权

JavaScript 同时被 2 个专栏收录

37 篇文章

订阅专栏

jquery

16 篇文章

订阅专栏

1、本文主要是实现datagrid,分页采取的jQuery.pagination.js,首先我们需要引入jQuery与jQuery.pagination.js,然后实现datagrid，代码如下：

/*
* 扩展jQuery方法：
* @author doubleicon
* @url http://blog.csdn.net/u011872945 
* @name datagrid.js
* @since 2014/6/17
*/
(function ($) {
    $.fn.datagrid = function (data, parameter) {
        var _columnCount = 0;
        var _iconWidth = 32;
        var _iconHeight = 32;
        var field_array = new Array();
        var title_array = new Array();
        var width_array = new Array();
        var align_array = new Array();
        var toolbar_width = 0;
        for (var i = 0; i < parameter.columns.length; i++) {
            _columnCount++;
            field_array[i] = parameter.columns[i].field;
            title_array[i] = parameter.columns[i].title || "";
            width_array[i] = parameter.columns[i].width || 100;
            align_array[i] = parameter.columns[i].align || "left";
        }

        var sbBuilder = new Array();

        for (var i = 0; i < parameter.toolbar.length; i++) {
            var width = parameter.toolbar[i].width || 100;
            toolbar_width += width;
        }

        sbBuilder = sbBuilder.concat("<table> ");
        sbBuilder = sbBuilder.concat("<tr>");
        if (parameter.toolbar.length > 0) {
            sbBuilder = sbBuilder.concat("<td style='width:" + toolbar_width + "px;background: linear-gradient(to bottom, #f9f9f9 0px, #efefef 100%) repeat-x scroll 0 0 rgba(0, 0, 0, 0);'></td>");
        }

        for (var i = 0; i < _columnCount; i++) {
            sbBuilder = sbBuilder.concat("<td style='width:" + width_array[i] + "px;background: linear-gradient(to bottom, #f9f9f9 0px, #efefef 100%) repeat-x scroll 0 0 rgba(0, 0, 0, 0);' align='" + align_array[i] + "'>");
            sbBuilder = sbBuilder.concat(title_array[i]);
            sbBuilder = sbBuilder.concat("</td>");
        }
        sbBuilder = sbBuilder.concat("</tr>");

        for (var i = 0; i < data.length; i++) {
            sbBuilder = sbBuilder.concat("<tr>");
            if (parameter.toolbar.length > 0) {
                sbBuilder = sbBuilder.concat("<td style='width:" + toolbar_width + "px'>");
                for (var j = 0; j < parameter.toolbar.length; j++) {
                    var barf_width = 100;
                    var barf_height = 100;
                    if (parameter.toolbar[j].width && parameter.toolbar[j].height) {
                        barf_width = parameter.toolbar[j].width;
                        barf_height = parameter.toolbar[j].height;
                    }
                    if (parameter.toolbar[j].text) {
                        if (parameter.toolbar[j].icon) {
                            sbBuilder = sbBuilder.concat("<div style='width:" + barf_width + "px;height:" + barf_height + "px;float:left;'>");
                            sbBuilder = sbBuilder.concat("<a href='javascript:void(0)' class='" + parameter.toolbar[j].icon + "' title='" + parameter.toolbar[j].text + "'>");
                            sbBuilder = sbBuilder.concat("</a> ");
                            sbBuilder = sbBuilder.concat("<span>");
                            sbBuilder = sbBuilder.concat(parameter.toolbar[j].text);
                            sbBuilder = sbBuilder.concat("</span>");
                            sbBuilder = sbBuilder.concat("</div>");
                        } else {
                            sbBuilder = sbBuilder.concat("<div style='width:" + barf_width + "px;height:" + barf_height + "px;float:left;'>");
                            sbBuilder = sbBuilder.concat("<span>");
                            sbBuilder = sbBuilder.concat(parameter.toolbar[j].text);
                            sbBuilder = sbBuilder.concat("</span>");
                            sbBuilder = sbBuilder.concat("</div>");
                        }
                    } else {
                        if (parameter.toolbar[j].icon) {
                            sbBuilder = sbBuilder.concat("<div style='width:" + barf_width + "px;height:" + barf_height + "px;float:left;'>");
                            sbBuilder = sbBuilder.concat("<a href='javascript:void(0)' class='" + parameter.toolbar[j].icon + "' title='" + parameter.toolbar[j].text + "'>");
                            sbBuilder = sbBuilder.concat("</a> ");
                            sbBuilder = sbBuilder.concat("</div>");
                        }
                    }
                }
                sbBuilder = sbBuilder.concat("</td>");
            }
            for (var j = 0; j < parameter.columns.length; j++) {
                sbBuilder = sbBuilder.concat("<td>");
                var field = parameter.columns[j].field;
                var text = eval("data[" + i + "]." + field);
                sbBuilder = sbBuilder.concat(text);
                sbBuilder = sbBuilder.concat("</td>");
            }
            sbBuilder = sbBuilder.concat("</tr>");
        }
        sbBuilder = sbBuilder.concat("</table>");
        $(this).html("");
        $(this).append(sbBuilder.join(""));

        $(this).find("tr").each(function (i) {
            $(this).eq(0).find("div").each(function (j) {
                $(this).click(function () {
                    parameter.toolbar[j].handler(data[i - 1]);
                });
            });
        });
    }
})(jQuery);</span>

调用方法：

<span style="font-family:Comic Sans MS;font-size:12px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="script/jquery-2.1.0.js"></script>
    <link href="style/pagination.css" rel="stylesheet" />
    <script src="script/jquery.pagination.js"></script>
    <script src="script/datagrid.js"></script>
    <link href="style/datagrid.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            var data = [
              { "id": 1, "Name": "小吴", "Sex": "male", "Age": 20 },
              { "id": 2, "Name": "小王", "Sex": "female", "Age": 22 },
              { "id": 4, "Name": "李芳", "Sex": "male", "Age": 23 },
              { "id": 8, "Name": "张芳", "Sex": "female", "Age": 18 },
              { "id": 10, "Name": "张波", "Sex": "male", "Age": 22 },
              { "id": 11, "Name": "王辉", "Sex": "male", "Age": 21 },
              { "id": 12, "Name": "张一", "Sex": "female", "Age": 24 },
              { "id": 14, "Name": "郭伟", "Sex": "male", "Age": 26 },
              { "id": 18, "Name": "张伟", "Sex": "female", "Age": 13 },
              { "id": 110, "Name": "宁伟", "Sex": "male", "Age": 24 },
              { "id": 21, "Name": "张宁", "Sex": "male", "Age": 24 },
              { "id": 22, "Name": "李宁", "Sex": "female", "Age": 23 },
              { "id": 24, "Name": "王宁", "Sex": "male", "Age": 27 },
              { "id": 28, "Name": "王晓宁", "Sex": "female", "Age": 19 },
              { "id": 210, "Name": "王宇", "Sex": "male", "Age": 20 },
              { "id": 182, "Name": "张晓伟", "Sex": "female", "Age": 13 },
              { "id": 1120, "Name": "宁晓伟", "Sex": "male", "Age": 24 },
              { "id": 212, "Name": "张晓宁", "Sex": "male", "Age": 24 },
              { "id": 222, "Name": "李晓宁", "Sex": "female", "Age": 23 },
              { "id": 224, "Name": "王宁宇", "Sex": "male", "Age": 27 },
              { "id": 228, "Name": "王晓宁", "Sex": "female", "Age": 19 },
              { "id": 2210, "Name": "张雨", "Sex": "male", "Age": 20 }
            ];
            var parameters = {
                columns: [
                        { field: "id", title: "编号", width: 80 },
                        { field: "Name", title: "姓名", width: 180 },
                        { field: "Age", title: "年龄", width: 180 }
                ],
                toolbar: [
                    {
                        text: "zoom to", width: 100, height: 30, icon: "icon-0-0", handler: function (rowData) {
                        }
                    },
                    {
                        text: "parcel print", width: 150, height: 30, icon: "icon-1-0", handler: function (rowData) {
                        }
                    },
                    {
                        text: "detail info", width: 150, height: 30, icon: "icon-2-0", handler: function (rowData) {

                        }
                    }
                ]
            };
            var pageSelectCallback = function (pageindex) {
                var data_detail = new Array(data[pageindex]);
                $("#content").datagrid(data_detail, parameters);//第一个参数是数据，第二个参数是配置
            }
			//jQuery.pagination.js的分页
            $("#paging").pagination(data.length, {
                callback: pageSelectCallback,//点击
                prev_text: "上一页",
                next_text: "下一页",
                items_per_page: 1,
                load_first_page: true,
                ellipse_text: "...",
                num_edge_entries: 2,
                num_display_entries:4
            });
        });
    </script>
</head>
<body>
     <div style="border: 0px solid blue;" id="content">

    </div>
    <div id="paging" style="margin-top:10px;">

    </div>
</body>
</html></span>

运行效果如下图：

Query.pagination.js不是本文主要说明的，这里只列出其参数使用说明，参数说明如下图：

jQuery.pagination.js参照文章：http://www.zhangxinxu.com/wordpress/?p=616
jquery.pagination.js官网：http://plugins.jquery.com/project/pagination