【发布时间】：2021-09-01 02:53:03
【问题描述】：
我有一个 gijgo 网格，其中有一列 Year（其值为 2011、2012、2013 等）。当我调试 javascript 中返回的 json 数据时， 年份值是数字，但是当我在此列上过滤此网格时，我收到一个错误 -“未捕获的 TypeError：f.toUpperCase 不是 gijgo.min.js:1 的函数”
javascript代码如下
function CreateRegionChartGrid() {
var retrievedObject = JSON.parse(localStorage.getItem('stackedRegionChartSourceData'));
if (retrievedObject !== null) {
///Make Grid visible
document.getElementById('regionChartGrid').style.visibility = "visible";
regChartGrid = $('#regionChartGrid').grid({
primaryKey: retrievedObject.salesByRegQuery.ProductCategoryKey,
dataSource: retrievedObject.salesByRegQuery,
responsive: true,
columns: [
{ field: 'ProductCategoryKey', hidden: true },
{ field: 'EnglishProductCategoryName', sortable: true, title: 'Category' },
{ field: 'SalesTerritoryKey', hidden: true },
{ field: 'SalesTerritoryRegion', sortable: true, title: 'Region' },
{ field: 'CalendarYear', sortable: true, title: 'Year' },
{ field: 'Total_Sales', sortable: true, title: 'Total Sales' },
{ field: 'Total_cost', sortable: true, title: 'Total Cost' },
{ field: 'Total_Margin', sortable: true, title: 'Total Margin' }
],
pager: { limit: 5 }
});
regChartGrid.render(retrievedObject.salesByRegQuery);
}
}
$('#btnRegionSearch').on('click', function () {
regChartGrid.reload({
page: 1, EnglishProductCategoryName: $('#txtProductCategory').val(),
SalesTerritoryRegion: $('#txtRegion').val(), CalendarYear: parseInt($('#txtCalendarYear').val(),10)
});
});
$('#btnRegionClear').on('click', function () {
$('#txtProductCategory').val('');
$('#txtRegion').val('');
$('#txtCalendarYear').val('');
regChartGrid.reload({ EnglishProductCategoryName: '', SalesTerritoryRegion: '', CalendarYear: '' });
});
下面是代码sn-p。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<script src="https://gijgo.com/Areas/Development/dist/libraries/jquery/jquery.js"></script>
<script src="https://gijgo.com/Areas/Development/dist/modular/js/core.js" type="text/javascript"></script>
<link href="https://gijgo.com/Areas/Development/dist/modular/css/core.css" rel="stylesheet" type="text/css">
<link href="https://gijgo.com/Areas/Development/dist/modular/css/grid.css" rel="stylesheet" type="text/css">
<script src="https://gijgo.com/Areas/Development/dist/modular/js/grid.js"></script>
</head>
<body style="padding: 8px;">
<div class="card">
<div class="card-body" style="position: relative;">
<div>
<input id="txtName" class='display-inline-block' style="float:left;" type="text" placeholder="Product Category" />
<input id="txtPlaceOfBirth" class='display-inline-block' style="float:left;" type="text" placeholder="Region" />
<input id="txtdYear" class='display-inline-block' style="float:left;" type="number" placeholder="Year" />
<button id="btnRegionSearch" style="float:left;" type="button" class="btn btn-default">Search</button>;
<button id="btnRegionClear" style="float:left;" type="button" class="btn btn-default">Clear</button>
</div>
<table id="grid"></table>
</div>
</div>
<script>
var grid, data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria', CountryName: 'Bulgaria', dYear: '2011' },
{ 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil', CountryName: 'Brazil', 'dYear': 2012 },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England', CountryName: 'England', 'dYear': 2012 },
{ 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany', CountryName: 'Germany', 'dYear': 2011 },
{ 'ID': 5, 'Name': 'James Rodríguez', 'PlaceOfBirth': 'Cúcuta, Colombia', CountryName: 'Colombia', 'dYear': 2013 },
{ 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria', CountryName: 'Bulgaria', 'dYear': 2014 }
];
grid = $('#grid').grid({
dataSource: data,
columns: [{ field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' }, { field: 'dYear', type: 'number', cssClass: 'grid-number' }]
});
$('#btnRegionSearch').on('click', function () {
grid.reload({
page: 1, EnglishProductCategoryName: $('#txtName').val(),
SalesTerritoryRegion: $('#txtPlaceOfBirth').val(), CalendarYear: parseInt($('#txtdYear').val().toString(), 10)
});
});
</script>
</body>
</html>在 sn-p 中，我已将列类型明确指定为年份的数字，此列上的过滤器不适用于此网格。我找不到任何 gijgo 示例或关于在返回数字的列上过滤网格的帖子。请帮我解决这个问题。
【问题讨论】：
-
也许这个例子会对你有所帮助：gijgo.com/grid/demos/ajax-sourced-data。只需使用日期搜索扩展示例。在您的示例中，搜索完全失败。
-
@BernhardBeatus 如果我为搜索选项添加 DOB 字段，它将不起作用。我尝试过这个。 Gijgo 网格似乎只接受其网格上的过滤字符串。如果任何绑定字段具有不同的数据类型
标签： javascript jquery gijgo-grid