JqueryGridView

最新推荐文章于 2022-10-20 14:35:49 发布

wskd161

最新推荐文章于 2022-10-20 14:35:49 发布

阅读量640

点赞数

分类专栏： Javascript json

本文链接：https://blog.youkuaiyun.com/wskd161/article/details/8268420

版权

Javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

json

2 篇文章

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.min.js" ></script>
    <script type="text/javascript" language="javascript">

        function createJQGridViewObject(o) {
            this.id = o.id || "tabaleDataListControl";
            //表头集合
            this.getColumns = o.getColumns || function () { };
            //创建表头
            this.createColumns = o.createColumns || function () {

                this.gridViewObject.find("tr").each(function (i) {
                    $(this).remove();
                });

                var columnList = this.getColumns();
                var column;
                var tr = $("<tr>");
                var th;
                for (var r in columnList) {
                    column = columnList[r];

                    th = $("<th>");
                    if (column.Width) {
                        th.css("width", column.Width + "px");
                    }
                    th.html(column.Title);

                    tr.append(th);
                }
                return tr;
            };

            //单个表格html文本
            this.getCellHtmlData = o.getCellHtmlData || function (column, entity) {
                return entity[column.DataField];
            };

this.gridViewObject = $("#" + this.id);
this.gridViewObject.append(this.createColumns());

var gridView = this;

            //获取数据生成列表
            this.getDataList = function (url) {
                $.post(url, function (result) {

                    gridView.gridViewObject.find("tr").each(function (i) {
                        if (i > 0) {
                            $(this).remove();
                        }
                    });

                    if ($.trim(result) != "") {
                        var entityList = eval("(" + result + ")");
                        if (entityList) {
                            var columnList = gridView.getColumns();
                            var tr;
                            var td;
                            var cellHtml;
                            for (var i in entityList) {
                                tr = $("<tr>");
                                for (var j in columnList) {
                                    td = $("<td>");
                                    cellHtml = gridView.getCellHtmlData(columnList[j], entityList[i]);
                                    if (cellHtml) {
                                        td.html(cellHtml);
                                    } else {
                                        td.html(" ");
                                    }

                                    tr.append(td);
                                }
                                gridView.gridViewObject.append(tr);
                            }
                        }
                    }
                });
            };
        }

            gridView.getDataList("bll.aspx?pageIndex=" + gridPageIndex);
            $("#divEditControl").dialog({ autoOpen: false, modal: true, width: 750,
                buttons: {
                    "保存": function () {
                        alert("save");

                    },
                    "关闭": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });

        function previousPage() {
            gridPageIndex--;
            gridView.getDataList("bll.aspx?pageIndex=" + gridPageIndex);

}

        function nextPage() {
            gridPageIndex++;
            gridView.getDataList("bll.aspx?pageIndex=" + gridPageIndex);

$(this).toString();
}

        function createTest(o) {
            this.show = o.show || function () { alert(1); }
        }

        function executeJS() {
            $.get("Edit.aspx", function (result) {
                $("#divEditControl").html(result);
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="上一页" οnclick="previousPage()" />
        <input type="button" value="下一页" οnclick="nextPage()" />
        <input type="button" value="javascript" οnclick="executeJS()" />
        <table id="tabaleDataListControl" align="center" border="1" cellpadding="0" cellspacing="0" width="100%">

        </table>
        <div id="divEditControl">
        </div>
<div class="pager_container">
</div>
    </form>
</body>
</html>