Question

我有条件选择框，如：

Select Column
Select Operator 
 <option value="">Choose operator</option>
 <option value="=">Equals</option>
 <option value="!=">Does not equal</option>
 <option value="LIKE%%">Contains</option>
 <option value="NOT LIKE%%">Does not contain</option>
 <option value="<">Less then (&lt;)</option>
 <option value=">">Greater then (&gt;)</option>
 <option value="<=">Equals or less then (&lt;=)</option>
 <option value=">=">Equals or greater (&gt;=)</option>
AND Value

我在阵列中得到了所有这些：

var filterby = [];
    $.each(panels, function(index, row) {
        var obj = {};
        obj['column'] = $(row).find('.dt_column').val();
        obj['operator'] = $(row).find('.dt_operator').val();
        obj['value'] = $(row).find('.dt_value').val();
        filterby.push(obj);
    });

现在我有filterby数组，并希望将它们实现到数组中。

我在这里：

var generatedData=tableData.filter(function(index,data){
    $.each(conditions,function(index,condition){
        if(data[condition.column])

    });
});

条件是什么？ if(data[condition.column])？
可以在javascript或jQuery中使用吗？
我正在过滤DataTable

Answer 1

如果没有html或任何相关名称，这将是一个通用的。我将从你的条件语句开始。

<option value="">Choose operator</option>
<option value="=">Equals</option>
<option value="!=">Does not equal</option>
<option value="LIKE%%">Contains</option>
<option value="NOT LIKE%%">Does not contain</option>
<option value="<">Less then (&lt;)</option>
<option value=">">Greater then (&gt;)</option>
<option value="<=">Equals or less then (&lt;=)</option>
<option value=">=">Equals or greater (&gt;=)</option>

您将不得不将这些转换为函数，这些函数期望使用左侧和右侧参数进行调用。

var conditionalFunctions = {
    "=" : function(left,right){ return left === right },
    "!=" : function(left,right){ return left !== right },
    "LIKE%%" : function(left,right){ return left.indexOf(right) > -1 },
    "NOT LIKE%%" : function(left,right){ return left.indexOf(right) == -1 },
    "<" : function(left,right){ return left < right },
    ">" : function(left,right){ return left > right },
    "<=" : function(left,right){ return left <= right },
    ">=" : function(left,right){ return left >= right }
};

然后根据您之前选项中的选定值调用这些值，并使用当前行值的参数。

var conditionalFunctions = {
        "=" : function(left,right){ return left === right },
        "!=" : function(left,right){ return left !== right },
        "LIKE%%" : function(left,right){ return left.indexOf(right) > -1 },
        "NOT LIKE%%" : function(left,right){ return left.indexOf(right) == -1 },
        "<" : function(left,right){ return left < right },
        ">" : function(left,right){ return left > right },
        "<=" : function(left,right){ return left <= right },
        ">=" : function(left,right){ return left >= right }
    };

var oper = document.querySelector("#operator"),
    rows = document.querySelectorAll(".row");
document.querySelector("#compare").onclick = function(){
    var func = conditionalFunctions[oper.value];
    for(var i = 0; i < rows.length; i++){
        var row = rows[i],
            left = row.querySelector(".left").innerText,
            right = row.querySelector(".right").innerText;
        row.querySelector(".op").innerText = oper.value;
        row.querySelector(".result").innerText = func(left,right);
       
    }
};

.row span { margin : 5px; }
.result { color: red; }

<select id="operator">
    <option value="">Choose operator</option>
    <option value="=">Equals</option>
    <option value="!=">Does not equal</option>
    <option value="LIKE%%">Contains</option>
    <option value="NOT LIKE%%">Does not contain</option>
    <option value="<">Less then (&lt;)</option>
    <option value=">">Greater then (&gt;)</option>
    <option value="<=">Equals or less then (&lt;=)</option>
    <option value=">=">Equals or greater (&gt;=)</option>
</select>
<button type="button" id="compare">Compare</button>
<div class="row">
  <span class="left">1</span>
  <span class="op"></span>
  <span class="right">2</span>
  <span class="result"></span>
</div>
<div class="row">
  <span class="left">2</span>
  <span class="op"></span>
  <span class="right">2</span>
  <span class="result"></span>
</div>
<div class="row">
  <span class="left">"hello"</span>
  <span class="op"></span>
  <span class="right">"h"</span>
  <span class="result"></span>
</div>

从变量字符串应用条件

1 个答案: