<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LogSearch.aspx.cs" Inherits="MESWebSite.Manage.LogSearch" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="/CSS/Basics.css" rel="stylesheet" />
    <link href="/Scripts/jquery-easyui-1.4.3/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/jquery-easyui-1.4.3/themes/color.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-easyui-1.4.3/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-easyui-1.4.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/Scripts/MyJs.js" type="text/javascript"></script>
    <link href="../Show/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="../Show/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../Show/echar/echarts.min.js" type="text/javascript"></script>
    <style>
        #w td {
            padding: 5px 5px;
            text-align: left;
            vertical-align: middle;
        }

        #w .title {
            vertical-align: middle;
            text-align: right;
            width: 80px;
            height: 40px;
            padding: 0px;
        }

        p {
            padding: 0px 5px;
            font-size: small;
            font-family: 微软雅黑;
            margin: 0px;
        }

        .tree-folder-open, .tree-folder, .tree-file {
            display: none;
        }

        .datagrid {
            text-align: center;
        }

        .ttb {
            width: 180px;
            display: block;
        }

        #ReportTable_div {
            margin: 0 auto;
            margin-top: 20px;
        }

        #ReportTable_div table {
            border: 1px solid #000000;
            border-collapse: collapse;
            margin: 0 auto;
            width: 80%;
        }

        #bar {
            float: left;
            margin-left: 0px;
            margin-top: 20px;
            width: 100%;
            height: 500px;
        }
        .search_first {
            margin-left: 40%
        }

        /*  中等屏幕 桌面显示器 992至1400 */
        @media screen and (min-width:992px) and (max-width:1400px) {
            .search_first {
                margin-left: 1%
            }
        }
    </style>
    <title>日志</title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="top">
            <table  style="width: 100%">
                <tr style="display: flex;flex-direction: row; flex-wrap: wrap;">

                    <td><span class="title">日志查询</span>
                    </td>
                    <td style="width: 100px">
                    <td style="width: 400px">创建时间:
                        <input id="StartTime" class="easyui-datebox" style="width: 130px;" />&nbsp;至&nbsp;
                        <input id="EndTime" class="easyui-datebox" style="width: 130px;" />
                    </td>
                    <td style="width: 200px">操作类别:
                        <select id="Op" class="easyui-combobox" style="width: 100px; height: 30px;">
                            <option value=''></option>
                            <option value='Insert'>Insert</option>
                            <option value='Update'>Update</option>
                            <option value='Delete'>Delete</option>
                        </select>
                    </td>
                    <td style="width: 80px" ><a class="topsearchBtn">查询</a></td>
                </tr>
            </table>
        </div>
        <table id="tb" title="日志列表" style="width: 99%;">
        </table>
        
        <div hidden="hidden">
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
        </div>
        <input id="UserID" type="text" hidden="hidden" runat="server" />
        
    <script>
        /****************       全局变量          ***************/
        var PrimaryID;               //要编辑的id
        var dg = $('#tb');      //表格
        var isEdit = false;     //是否为编辑状态

        /****************       DOM加载          ***************/
        $(function () {
            $.ajaxSetup({
                cache: false //关闭AJAX缓存
            });
            
            //搜索按钮
            $('.topsearchBtn').first().click(function () {
                SearchInfo();
            });

           
            dg = $('#tb').datagrid({
                fitColumns: true,
                nowrap: false,
                striped: true,
                collapsible: false,
                url: "/HttpHandlers/LogHandler.ashx?method=QueryList",
                //sortName: 'sortNumber',
                //sortOrder: 'asc',
                remoteSort: false,
                columns: [[
                    { field: 'ID', title: 'ID', hidden: true },
                    { field: 'UserName', title: '操作人', sortable: 'true', width: 3 },
                    { field: 'Op', title: '操作类别', sortable: 'true', width: 3 },
                    { field: 'TableName', title: '表名', sortable: 'true', width: 3 },
                    { field: 'Des', title: '内容', sortable: 'true', width: 30 },
                    { field: 'CreateTime', title: '操作时间', sortable: 'true', width: 8 }
                ]],

                pagination: true,//表示在datagrid设置分页              
                rownumbers: true,
                singleSelect: true
            });

            dg.datagrid('getPager').pagination({
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30, 40, 50],
                beforePageText: '第',//页数文本框前显示的汉字   
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            });
        });

        /****************       主要业务程序          ***************/
        //查询方法
        function SearchInfo() {
            var StartTime = $('#StartTime').datebox('getValue');
            var EndTime = $('#EndTime').datebox('getValue');
            var Op = $('#Op').combo('getValue');;
            
            var queryParams = {
                StartTime: StartTime,
                EndTime: EndTime,
                Op: Op
            };
            dg.datagrid({
                queryParams: queryParams
            });
        }
    </script>
    </form>
</body>
</html>