jqGrid 过滤器下拉列表不适用于特殊字符
jqGrid filter dropdownlist not working with special characters
当使用 jqGrid 内置的列搜索功能时,dropdwonlist 拒绝显示特殊字符,例如 ç、È 等。由于某种原因,它们被分成两行。这意味着如果我们输入一个词 "Dfëstuç" ,下拉列表或选项列表将生成如下:
- Dfë
- 未定义
- 学
- 未定义
我的代码如下:
@model WS.ViewModels.CaseViewModel
@{
ViewBag.Title = "";
Layout = "~/Views/Shared/_Layout.cshtml";
<meta charset="utf-8">
string idVendbanimiSelectValues = ":";
foreach (var item in Model.NomenklaturaVendbanimiDropDownListData.OrderBy(n => n.IdVendbanimi))
{
idVendbanimiSelectValues += ";" + item.IdVendbanimi + ":" + item.EnPershkrimi;
}
}
@section AdditionalCss {
@Styles.Render("~/Content/Styles/ui.jqgrid.min.css")
}
@section AdditionalJavaScript {
@Scripts.Render("~/bundles/jqgrid")
@Scripts.Render("~/Scripts/jqgrid-listsearch.js")
@Scripts.Render("~/Scripts/jquery.searchFilter.min.js")
<script type="text/javascript">
$(function () {
var idVendbanimiSelectValues = "@idVendbanimiSelectValues";
$('#list-grid').jqGrid({
url: '/Lenda/GridDataWithFilters/',
datatype: 'json',
mtype: 'GET',
colNames: ['CaseId','IdVendbanimi'],
colModel: [
{ name: 'CaseId', index: 'CaseId', align: 'right' },
{ name: 'IdVendbanimi', index: 'IdVendbanimi', align: 'left', stype: 'select', edittype: 'select', editoptions: { value: idVendbanimiSelectValues }, autoencode: false }
],
pager: $('#list-pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'CaseId',
sortorder: "asc",
viewrecords: true,
height: '100%',
width: '1200',
ignoreCase: true,
autoencode: true,
}).jqGrid('navGrid', '#list-pager', { edit: false, add: false, del: false, search: false, refresh: false });
$('#list-grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, beforeSearch: function () {
// verify entered data before searching
var postData = $('#list-grid').jqGrid('getGridParam', 'postData');
var searchData = $.parseJSON(postData.filters);
var isThereValidationErrors = false;
var validationErrors = "";
for (var iRule = 0; iRule < searchData.rules.length; iRule++) {
var enteredValue = searchData.rules[iRule].data;
if (searchData.rules[iRule].field == "CaseId" && !isNumeric(enteredValue)) {
validationErrors += " Id Lenda must be a valid number.";
isThereValidationErrors = true;
}
}
if(isThereValidationErrors)
alert($.trim(validationErrors));
return isThereValidationErrors;
}
});
});
</script>
}
<h2>@ViewBag.Title</h2>
<br /><br />
<table id="list-grid"></table>
<div id="list-pager"></div>
您的 JSON 数据是否正确进行了 UTF-8 编码?例如:
- ë 字符应该用两个字节编码,0xC3 0xAB。
- JSON 数据可能需要一个 UTF-8 前导码,0xEF 0xBB 0xBF。
当使用 jqGrid 内置的列搜索功能时,dropdwonlist 拒绝显示特殊字符,例如 ç、È 等。由于某种原因,它们被分成两行。这意味着如果我们输入一个词 "Dfëstuç" ,下拉列表或选项列表将生成如下:
- Dfë
- 未定义
- 学
- 未定义
我的代码如下:
@model WS.ViewModels.CaseViewModel
@{
ViewBag.Title = "";
Layout = "~/Views/Shared/_Layout.cshtml";
<meta charset="utf-8">
string idVendbanimiSelectValues = ":";
foreach (var item in Model.NomenklaturaVendbanimiDropDownListData.OrderBy(n => n.IdVendbanimi))
{
idVendbanimiSelectValues += ";" + item.IdVendbanimi + ":" + item.EnPershkrimi;
}
}
@section AdditionalCss {
@Styles.Render("~/Content/Styles/ui.jqgrid.min.css")
}
@section AdditionalJavaScript {
@Scripts.Render("~/bundles/jqgrid")
@Scripts.Render("~/Scripts/jqgrid-listsearch.js")
@Scripts.Render("~/Scripts/jquery.searchFilter.min.js")
<script type="text/javascript">
$(function () {
var idVendbanimiSelectValues = "@idVendbanimiSelectValues";
$('#list-grid').jqGrid({
url: '/Lenda/GridDataWithFilters/',
datatype: 'json',
mtype: 'GET',
colNames: ['CaseId','IdVendbanimi'],
colModel: [
{ name: 'CaseId', index: 'CaseId', align: 'right' },
{ name: 'IdVendbanimi', index: 'IdVendbanimi', align: 'left', stype: 'select', edittype: 'select', editoptions: { value: idVendbanimiSelectValues }, autoencode: false }
],
pager: $('#list-pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'CaseId',
sortorder: "asc",
viewrecords: true,
height: '100%',
width: '1200',
ignoreCase: true,
autoencode: true,
}).jqGrid('navGrid', '#list-pager', { edit: false, add: false, del: false, search: false, refresh: false });
$('#list-grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, beforeSearch: function () {
// verify entered data before searching
var postData = $('#list-grid').jqGrid('getGridParam', 'postData');
var searchData = $.parseJSON(postData.filters);
var isThereValidationErrors = false;
var validationErrors = "";
for (var iRule = 0; iRule < searchData.rules.length; iRule++) {
var enteredValue = searchData.rules[iRule].data;
if (searchData.rules[iRule].field == "CaseId" && !isNumeric(enteredValue)) {
validationErrors += " Id Lenda must be a valid number.";
isThereValidationErrors = true;
}
}
if(isThereValidationErrors)
alert($.trim(validationErrors));
return isThereValidationErrors;
}
});
});
</script>
}
<h2>@ViewBag.Title</h2>
<br /><br />
<table id="list-grid"></table>
<div id="list-pager"></div>
您的 JSON 数据是否正确进行了 UTF-8 编码?例如:
- ë 字符应该用两个字节编码,0xC3 0xAB。
- JSON 数据可能需要一个 UTF-8 前导码,0xEF 0xBB 0xBF。