We_Relese/OnlineApp/Relese/Views/BaseSystem/SysLogs.cshtml

@using WeOnlineApp
@using WeOnlineApp.Authorization
@using WeOnlineApp.Configuration
@using WeOnlineApp.Views.Shared.SearchForm


@{
    /**/
    ViewBag.ActiveMenu = PermissionNames.PagesSystemMgLogMg; //The menu item will be active for this page.
    ViewBag.Title = L("SysLogTitle");
    string serviceNames = ViewBag.ServiceNames;
    string methodNames = ViewBag.MethodNames;
    var searchItems = new SearchFormViewModel(new List<SearchItem>()
{
new SearchItem("methodName", L("methodName")),//.SetSelectItem(methodNames),
new SearchItem("userName", L("userName")),
new SearchItem("clientName",L("clientName")),
new SearchItem("browserInfo", L("browserInfo"))
});

}
@section styles{
    <style>
        .search-unit {
            float: left;
            margin-left: 10px;
        }

        .input-group .form-control.valid {
            border: 1px solid #aaa !important;
        }
    </style>
}
<div class="table-box iwb-bootstrap-table">
    <div class="btn-toolbar row" id="tableTool" role="toolbar" aria-label="Toolbar with button groups" style="">
        <div class="input-group input-group-sm hidden-sm hidden-xs hidden-sm search-box" style="position: relative; width: 100%; max-width: 100%;margin-bottom: 5px;">
            <form id="search-form">
                @{
                    <div class="search-unit" data-index="2" style="width: 32%">
                        <div class="input-group input-group-sm text-non" style="position: relative; width: 100%;">
                            <span class="input-group-prepend" style=""><span class="input-group-text">@(L("executionTime"))</span></span>
                            <input autocomplete="off" class="form-control dataRange KeyWords" id="ExecutionTime" name="ExecutionTime" data-field="ExecutionTime" data-ftype="5" data-etype="4" placeholder="@(L("SearchPlaceholder"))" type="text">

                        </div>
                    </div>
                    <div class="search-unit" data-index="4" style="width: 32%">
                        <div class="input-group input-group-sm text-non" style="position: relative; width: 100%;">

                            <span class="input-group-prepend" style=""><span class="input-group-text">@(L("serviceName"))</span></span>
                            <select id="ServiceName" name="ServiceName" class="form-control KeyWords" data-field="ServiceName" data-ftype="0" data-etype="0" placeholder="@(L("SearchPlaceholder"))...">
                                <option value="">@(L("Select"))</option>
                                @Html.Raw(serviceNames)
                            </select>
                        </div>
                    </div>


                    var selectItemStr = "{";
                    if (searchItems.SearchItems != null)
                    {
                        int i = 0;
                        <div class="search-unit" data-index="1" style="width: 32%">
                            <div class="input-group input-group-sm text-non" style="position: relative; width: 100%;">
                                <select id="Select-KeyField" name="Select-KeyField" class="form-control KeyField" style="width: 100px !important">
                                    @foreach (var item in searchItems.SearchItems)
                                    {
                                        int isSelect = 0;
                                        if (!string.IsNullOrEmpty(item.SelectItemStr))
                                        {
                                            selectItemStr += (selectItemStr == "{" ? "" : ",") + item.SelectItemStr;
                                            isSelect = 1;
                                        }
                                        string selected = i == 0 ? "selected" : "";
                                        int fieldType = (int)item.FieldType;
                                        int expType = (int)item.ExpType;
                                        <option value="@item.Field" data-index="1" data-select="@isSelect" data-field="@item.Field" data-field-type="@fieldType" data-exp-type="@expType" @selected>@item.DisplayName</option>
                                        i++;
                                    }
                                </select>
                                <input id="Select-KeyWords" name="Select-KeyWords" data-field="" data-ftype="0" data-etype="6" class="form-control  pull-right KeyWords" style="width: calc(100% - 200px) !important; " placeholder="@(L("SearchPlaceholder"))..." autocomplete="off" />
                                <span id="Search-btn" class="menu-btn input-group-append" data-type="_btnSearch"><span class="input-group-text" style="padding: 0 10px;"><i class="iconfont icon-search "></i></span></span>
                            </div>
                        </div>
                    }
                    selectItemStr += "}";
                }
            </form>
        </div>

    </div>
    <table id="table"
           data-url="@(IwbConsts.ApiAppUrl)AuditLogs/GetAll"
           data-striped="true" data-id-field="id" data-unique-id="id"
           data-method="post"
           data-side-pagination="server"
           data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
           data-cache="false"
           data-pagination="true"
           data-page-size="25"
           data-page-number="1"
           data-page-list="[25,50,100,200]" data-pagination-detail-h-align="right" data-pagination-h-align="left"
           data-click-to-select="true"
           data-single-select="true">
        <thead>
            <tr class="row" id="header">
                <th data-field="state" data-checkbox="true"></th>
                <th data-align="center" data-field="userName">@(L("userName"))</th>
                <th data-align="center" data-field="serviceName">@(L("serviceName"))</th>
                <th data-align="center" data-field="methodName">@(L("methodName"))</th>
                <th data-align="center" data-field="executionTime" data-formatter="DateTimeFormatter">@(L("executionTime"))</th>
                <th data-align="center" data-field="clientIpAddress">@(L("clientIpAddress"))</th>
                <th data-align="center" data-field="clientName">@(L("clientName"))</th>
                <th data-align="center" data-field="browserInfo">@(L("browserInfo"))</th>


            </tr>
        </thead>
    </table>
</div>

@section modal{

}

@section scripts
{

    <script>
        $(function () {

            var now = new Date();
            $('#ExecutionTime').iwbDateRange({
                endDate: new Date(now.getTime() ),
                startDate: new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000)
            });
            $(".search-unit select").select2();

            $("#Select-KeyField").off("change.keyfield").on("change.keyfield", function () {
                var $that = $(this).find("option:selected");
                var isSelect = $that.data("select"),
                    field = $that.data("field"),
                    expType = $that.data("exp-type"),
                    fieldType = $that.data("field-type");
                changeKeyWord($that, isSelect,field, expType, fieldType);
            });
            LoadTable();

            var selectItem = @Html.Raw(selectItemStr);
            function changeKeyWord($that, isSelect, field, expType, fieldType) {
                var str;
                console.log(fieldType, "-", isSelect);
                if (isSelect) {
                    if (selectItem.length < 0) {
                        return;
                    }
                    str = '<select id="Select-KeyWords" data-field="' + field + '" data-ftype="' + fieldType + '" data-etype="' + expType + '"  name="Select-KeyWords" class="form-control  pull-right KeyWords" style="width: calc(100% - 120px) !important;" placeholder="@(L("SearchPlaceholder"))..." autocomplete="off" data-placeholder="@(L("SearchPlaceholder"))...">';
                    str += selectItem[field];
                    str += '</select>';
                    $("#Select-KeyWords").next("span.select2").remove();
                    $("#Select-KeyWords").remove();
                    $("#Search-btn").before(str);
                    $("#Select-KeyWords").select2();
                    if ($("#Select-KeyField").parent().find(".search-btn").length > 0) {
                        $("#Select-KeyWords").next().find(".select2-selection__arrow").css("right", "30px");
                    }
                } else {
                    if (fieldType === 1) {
                        str = ' <input  id="Select-KeyWords" data-field="' + field + '" data-ftype="' + fieldType + '" data-etype="' + expType + '"  name="Select-KeyWords" class="form-control number pull-right KeyWords" style="width: calc(100% - 100px) !important" placeholder="@(L("SearchPlaceholder"))..." autocomplete="off" />';
                    } else if (fieldType === 5) {
                        str = ' <input  id="Select-KeyWords" data-field="' + field + '" data-ftype="' + fieldType + '" data-etype="' + expType + '"  name="Select-KeyWords" class="form-control dateISO pull-right KeyWords dateRange" style="width: calc(100% - 100px) !important" placeholder="@(L("SearchPlaceholder"))..." autocomplete="off" />';
                    } else {
                        str = '<input  id="Select-KeyWords" data-field="' + field + '" data-ftype="' + fieldType + '" data-etype="' + expType + '"  name="Select-KeyWords" class="form-control  pull-right KeyWords" style="width: calc(100% - 100px) !important" placeholder="@(L("SearchPlaceholder"))..." autocomplete="off" />';
                    }
                    $("#Select-KeyWords").next("span.select2").remove();
                    $("#Select-KeyWords").remove();
                    $("#Search-btn").before(str);
                }
                //AddSearchEvents();
            }
        });

    </script>
}