在 GridMVC 中创建自定义时间小部件

Posted 2023-03-27

【中文标题】在 GridMVC 中创建自定义时间小部件

【英文标题】：Creating Custom Time Widget in GridMVC

【发布时间】：2014-12-05 11:37:09

【问题描述】：

我正在尝试创建时间小部件以在 Grid MVC 中按时间过滤记录。我能够看到控件，但它不过滤任何记录。这是脚本。我还添加了脚本、查看 mvc 网格和索引页面的代码。

脚本

function TimeWidget() 

this.getAssociatedTypes = function () 
    return ["TimeFilterWidget"];
;
this.onShow = function () 
;

this.showClearFilterButton = function () 
    return true;
;

this.onRender = function (container, lang, typeName, values, cb, data) 
    //store parameters:
    this.cb = cb;
    this.container = container;
    this.lang = lang;

    //this filterwidget demo supports only 1 filter value for column column
    this.value = values.length > 0 ? values[0] :  filterType: 1, filterValue: "" ;

    this.renderWidget(); //onRender filter widget
    //this.loadCustomers(); //load customer's list from the server
    this.registerEvents(); //handle events
;

this.renderWidget = function () 
    var html = '\<p>Select Time to filter:</p>\
                <p><input class="time" type="time" id="tminput"/></p>\
                ';
    this.container.append(html);
;

this.registerEvents = function ()                 
    var x = document.getElementById("tminput");
    x.addEventListener("blur", myBlurFunction, true);        
;

function myBlurFunction() 
    var $context = this;
    var values = [ filterValue: $(this).val(), filterType: 1 /* Equals */ ];        
    $context.cb(values);

网格视图

@using GridMvc.Html
@using GridMvc.Sorting
@model IEnumerable<GridMvc.Site.Logging>

@Html.Grid(Model).Named("ordersGrid").Columns(columns =>

    /* Adding "OrderID" column: */

    columns.Add(o => o.ID)
           .Titled("Number")
           .SetWidth(100);
    columns.Add(o => o.DateTime, "Date")
            .Titled("Date")
            .SortInitialDirection(GridSortDirection.Descending)
            .Format("0:dd/MM/yyyy")
            .SetWidth(110);
    columns.Add(o => o.DateTime, "Time")
            .Titled("Time")
            .SortInitialDirection(GridSortDirection.Descending)
            .Format("0:hh:mm tt")                
            .SetWidth(110)
            .SetFilterWidgetType("TimeFilterWidget");
    columns.Add(o => o.Type)
           .Titled("Type")
           .SetWidth(150)
           .ThenSortByDescending(o => o.ID)
           .SetFilterWidgetType("TypeFilterWidget");
    columns.Add(o => o.Description)
           .Titled("Description")
           .SetWidth(250);
    columns.Add(o => o.Reference)
            .Titled("Reference")
            .SetWidth(150)
            .Css("hidden-xs"); //hide on phones
    columns.Add(o => o.Response)
            .Titled("Response")
            .SetWidth(150)
            .Css("hidden-xs"); //hide on phones        


).WithPaging(15).Sortable().Filterable().WithMultipleFilters()

索引视图

<script>
$(function () 
    pageGrids.ordersGrid.addFilterWidget(new TypeWidget());
    pageGrids.ordersGrid.addFilterWidget(new TimeWidget());
);
</script>

【参考方案1】：

如果那么可能会有所帮助。需要在页面上的网格中添加此代码。 .Named("ordersGrid") 示例代码：

@Html.Grid(Model).Named("ordersGrid").Columns(columns =>

    columns.Add(o => o.Customer.CompanyName)
           .Titled("Company")
           .SetWidth(250)
           .ThenSortByDescending(o => o.OrderID)
           .Filterable(true)
           .SetFilterWidgetType("CustomCompanyNameFilterWidget"); )

文件 gridmvc.customwidgets.js 中的这个工作需要 JavaScrip 方法 addFilterWidget

我希望它对某人有所帮助。