我想过滤一个实际包含数字的列,但是这些数字以2MM,1K等格式显示。当用户想要过滤该列中的数据时,我更愿意给他一个搜索选项显示的格式ex 2MM而不使用实际数字放尾随零。为了实现这一点,我使用了一个未绑定的列和一个隐藏列,并且我已将数据类型设置为字符串。我用css中的数字过滤器替换了字符串过滤器,但是当我尝试使用'greaterThanOrEqualTo'调用过滤器方法时,我得到以下异常infragistics.datasource.js:36未捕获错误:传递的过滤条件是不承认:greaterThanOrEqualTo。有没有办法克服这个问题?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ignite UI sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.loader.js"></script>
<script type="text/javascript">
var data = [];
for (var i = 0; i < 100; i++) {
//data.push({ "type": "Type " + i, "child": { "name": "child " + i, "age": i}});
//data.push({ "type": "Type " + i, "child": { "name": "child " + i}});
data.push({ "type": "Type " + i, "child": i});
}
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/",
cssPath: "http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/",
resources: "igGrid.Filtering,igCombo"
});
$.ig.loader(function () {
$("#grid1").igGrid({
width: "700px",
autoCommit: true,
renderCheckboxes: true,
columns: [
{ headerText: "type", key: "type", dataType: "string"},
{ headerText: "child", key: "child", dataType: "object", hidden: true, formatter: function(val) {
if(val === 0)
return "zero";
else if(val === 1)
return "one";
else if(val === 2)
return "two";
else if(val === 3)
return "three";
else
return "four";
}},
{ headerText: "child", key: "child_name", unbound: true, dataType: "string", formula: function (row) {
return row.child;
}, formatter: function(val) {
if(val == 1)
return "one";
else if(val === 2)
return "two";
else if(val === 3)
return "three";
else
return "four";
}}
],
autoGenerateColumns: false,
dataSource: data,
height: "300px",
features: [
{
name: "Filtering",
dataFiltering: handler,
//dropDownClosing: setSelectedFilter,
columnSettings: [
{
columnKey: "child_name",
allowFiltering: true,
}
]
}
]
});
$('div#grid1_dd_child_name ul').replaceWith("<ul class='ui-menu ui-widget ui-widget-content ui-iggrid-filterddlist ui-corner-all'><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericonclear'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Clear Filter </span></li><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericonequals'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Equals </span></li><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericondoesnotequal'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Does not equal </span></li><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericongreaterthan'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Greater than </span></li><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericonlessthan'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Less than </span></li><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericongreaterthanorequalto'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Greater than or equal to </span></li><li class='ui-iggrid-filterddlistitemicons ui-state-default'><span class='ui-iggrid-filtericoncontainer'><span class='ui-iggrid-filtericon ui-iggrid-filtericonlessthanorequalto'></span></span><span class='ui-iggrid-filterddlistitemcontainer'> Less than or equal to </span></li></ul>");
$('tr[data-role="filterrow"] td:nth-child(2) span input').replaceWith("<input class='ui-igedit-field ui-iggrid-filtereditor' style='text-align: left; height: 23px; width: 317px;'>")
$('tr[data-role="filterrow"] td:nth-child(2) span input').igTextEditor({
width: 200,
nullText: "Equals...",
valueChanged: equals
});
$('#grid1_dd_child_name ul li').click(function() {
var text = $(this).text();
if(text === ' Greater than or equal to ') {
var cond = 'greaterThanOrEqualTo';
$('tr[data-role="filterrow"] td:nth-child(2) span input').igTextEditor({
width: 200,
nullText: text + '...',
valueChanged: cond
});
$("#grid1").igGridFiltering("filter", ([{fieldName: "child_name", expr: 1, cond: 'greaterThanOrEqualTo'}]));
} else if(text === ' Clear Filter ') {
var cond = 'greaterThanOrEqualTo';
$('tr[data-role="filterrow"] td:nth-child(2) span input').igTextEditor({
width: 200,
nullText: text + '...',
valueChanged: cond
});
}
});
});
function equals(e, args) {
if (args.value !== null) {
if(args.value == "one")
args.value = 1;
else if(args.value === "two")
args.value = 2;
else if(args.value === "three")
args.value = 3;
else
args.value = 4;
var selectedValue = args.value;
$("#grid1").igGridFiltering("filter", ([{fieldName: "child_name", expr: selectedValue, cond: "greaterThanOrEqualTo"}]));
} else {
$("#grid1").igGridFiltering("filter", ([{fieldName: "child_name", expr: "", cond: "equals"}]));
}
};
function handler(event, args) {
if(args.columnKey === "child_name" && args.newExpressions.length !== 0) {
if(args.newExpressions[0].expr === "one")
args.newExpressions[0].expr = 1;
}
}
</script>
</head>
<body>
<table id="grid1">
</table>
</body>
</html>
此代码用于检查是否可以实现所描述的功能。
答案 0 :(得分:4)
您会看到此错误,因为条件是“大于或等”。不适用于字符串数据类型。
作为一种方法,我可以建议您不要使用未绑定的列,而是拦截过滤操作并转换过滤器表达式。这种方法还将保留数字数据类型的过滤条件。
以下是步骤:
代码:
ui.owner.headersTable().find(".ui-iggrid-filterrow td.ui-iggrid-filtercell:eq(1)>span.ui-igedit").igEditor("option", "type", "text");
以下是代码:
function handler(event, ui) {
for (var i = 0; i < ui.newExpressions.length; i++) {
if (ui.newExpressions[i].fieldName === "child") {
ui.newExpressions[i].expr = getExpr(ui.newExpressions[i].expr);
}
}
}
function getExpr(val) {
if(val == "one")
return 1;
else if(val === "two")
return 2;
else if(val === "three")
return 3;
else
return 4;
}
整页:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ignite UI sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.loader.js"></script>
<script type="text/javascript">
var data = [];
for (var i = 0; i < 100; i++) {
//data.push({ "type": "Type " + i, "child": { "name": "child " + i, "age": i}});
//data.push({ "type": "Type " + i, "child": { "name": "child " + i}});
data.push({ "type": "Type " + i, "child": i});
}
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/",
cssPath: "http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/",
resources: "igGrid.Filtering,igCombo"
});
$.ig.loader(function () {
$("#grid1").igGrid({
width: "700px",
autoCommit: true,
renderCheckboxes: true,
columns: [
{ headerText: "type", key: "type", dataType: "string"},
{ headerText: "child", key: "child", dataType: "number", hidden: false, formatter: function(val) {
if(val === 0)
return "zero";
else if(val === 1)
return "one";
else if(val === 2)
return "two";
else if(val === 3)
return "three";
else
return "four";
}}
],
autoGenerateColumns: false,
dataSource: data,
height: "300px",
features: [
{
name: "Filtering",
dataFiltering: handler
}
],
rendered: function (evt, ui) {
// this will work only for versions up to 15.1
ui.owner.headersTable().find(".ui-iggrid-filterrow td.ui-iggrid-filtercell:eq(1)>span.ui-igedit").igEditor("option", "type", "text");
}
});
});
function handler(event, ui) {
for (var i = 0; i < ui.newExpressions.length; i++) {
if (ui.newExpressions[i].fieldName === "child") {
ui.newExpressions[i].expr = getExpr(ui.newExpressions[i].expr);
}
}
}
function getExpr(val) {
if(val == "one")
return 1;
else if(val === "two")
return 2;
else if(val === "three")
return 3;
else
return 4;
}
</script>
</head>
<body>
<table id="grid1">
</table>
</body>
</html>