Javascript Infragistics使用igTextEditor过滤数字_Javascript_Infragistics_Ignite Ui_Iggrid

Javascript Infragistics使用igTextEditor过滤数字

javascript

Javascript Infragistics使用igTextEditor过滤数字,javascript,infragistics,ignite-ui,iggrid,Javascript,Infragistics,Ignite Ui,Iggrid,我想过滤一个实际包含数字的列，但数字以2MM、1K等格式显示。当用户想过滤该列中的数据时，我更愿意让他选择使用显示格式e.x.2MM进行搜索，而不是使用实际数字加上尾随零。为了实现这一点，我使用了一个未绑定列和一个隐藏列，并将数据类型设置为string。我用css中的数字过滤器替换了字符串过滤器，但是当我尝试使用'greaterThanOrEqualTo'调用过滤器方法时，例如，我得到以下异常Infrastics.datasource.js:36未捕获错误：传递的过滤器条件未被识别：greate

我想过滤一个实际包含数字的列，但数字以2MM、1K等格式显示。当用户想过滤该列中的数据时，我更愿意让他选择使用显示格式e.x.2MM进行搜索，而不是使用实际数字加上尾随零。为了实现这一点，我使用了一个未绑定列和一个隐藏列，并将数据类型设置为string。我用css中的数字过滤器替换了字符串过滤器，但是当我尝试使用'greaterThanOrEqualTo'调用过滤器方法时，例如，我得到以下异常Infrastics.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>


点燃UI样本
var数据=[]；
对于（变量i=0；i<100；i++）{
//push（{“type”：“type”+i，“child”：{“name”：“child”+i，“age”：i}}）；
//push（{“type”：“type”+i，“child”：{“name”：“child”+i}）；
push（{“type”：“type”+i，“child”：i}）；
}
$.ig.loader({
脚本路径：“http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/",
cssPath:“http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/",
参考资料：“igGrid.Filtering，igCombo”
});
$.ig.loader（函数（）{
$（“#grid1”）.igGrid({
宽度：“700px”，
自动提交：对，
rendercheckbox：正确，
栏目：[
{headerText:“type”，key:“type”，dataType:“string”}，
{headerText:“child”，键：“child”，数据类型：“object”，隐藏：true，格式化程序：函数（val）{
如果（val==0）
返回“零”；
else if（val==1）
返回“一”；
else if（val==2）
返回“二”；
否则如果（val==3）
返回“三”；
其他的
返回“四”；
}},
{headerText:“child”，键：“child_name”，未绑定：true，数据类型：“string”，公式：函数（行）{
返回row.child；
}，格式化程序：函数（val）{
如果（val==1）
返回“一”；
else if（val==2）
返回“二”；
否则如果（val==3）
返回“三”；
其他的
返回“四”；
}}
],
自动生成列：false，
数据源：数据，
高度：“300px”，
特点：[
{                   
名称：“过滤”，
数据过滤：处理程序，
//下拉关闭：设置选定的过滤器，
列设置：[
{ 
columnKey:“孩子的名字”，
允许过滤：对，
} 
]
}
]
});
$（'div#grid1_dd_child_name ul'）。替换为("清除过滤器
等于
不等于dlistitemicons ui状态默认值>大于
大于或等于


此代码用于检查所描述的功能是否可以实现。
您看到此错误，因为条件“greaterThanOrEqualTo”不适用于字符串数据类型
作为一种方法，我可以建议您不要使用未绑定的列，而是截取筛选操作并转换筛选表达式。这种方法还将保留数字数据类型筛选条件
以下是步骤
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>