Javascript 使用复选框上的数据绑定的剑道UI网格自定义过滤器

简而言之，我想实现以下目标：

使用复选框添加自定义筛选器的能力，选中该复选框时，将自定义筛选器值应用于Kendo UI网格，而不是true或false

以下是我的自定义筛选器模板：

<div id="orderNumberFilterTemplate">
    <input type="hidden" data-bind="value:logic" value="or" />
        <label for="customerOrders" title="Show only orders going directly to the customer.">
            <input type="checkbox" class="k-checkbox" id="customerOrders" data-bind="checked:filters[1].value" name="orderTypes" value="6" />Direct to customer
        </label><br />
        <label for="galleryOrders" title="Show only orders going back to the store.">
            <input type="checkbox" class="k-checkbox" id="storeOrders" data-bind="checked:filters[2].value" name="orderTypes" value="5" />Direct to store
        </label><br />
        <label for="stockOrders" title="Show only restocking orders.">
            <input type="checkbox" class="k-checkbox" id="stockOrders" data-bind="checked:filters[3].value" name="orderTypes" value="3" />Stock orders
        </label><br />
</div>

我想说的是，当有人勾选一个复选框时，我希望过滤器更新为{field:'myfield'，operator:'startswith'，value:6}，但作为一个复选框，选中时它会自动更新为value:true。是否有任何方法可以创建自定义筛选器，而不是指定值，而不是为筛选器设置“真”或“假”复选框

---

另外，是否可以应用一个绑定属性来指定使用哪种操作符，因为我真的希望剑道的标准文本框过滤器正常工作，但也希望下面的这些复选框使用不同于应用于文本框的操作符。

是，复选框的值为

true

或

false

，但您可以通过添加

data xyz

属性向其添加一些额外信息，然后请求

xyz

例如：

<label for="customerOrders" title="Show only orders going directly to the customer.">
    <input type="checkbox" class="k-checkbox" id="customerOrders" data-bind="checked:filters[1].value" name="orderTypes" data-value="6" />
    Direct to customer
</label>

---

这里的示例：

问题还涉及将其应用为剑道UI网格过滤器，您的回答虽然很有帮助——请不要误解我的意思，但没有帮助，我需要这两个过滤器工作。如果我像您那样提取值，我知道有几种方法可以将过滤器应用于网格。如果我按照你在fiddle中的建议去做，那么它会在你勾选框后立即应用过滤器，这不是一个选项，我需要它与网格无缝工作，也就是说，只有当用户单击过滤器弹出窗口上的apply按钮时才应用。如果我勾选apply按钮上的click事件，获取所有过滤器并将它们发送到数据源，发生两种情况之一：如果另一列有一个标准的Kendo放置的过滤器，上面有一个实际值，那么Kendo会向数据源重新发送一个filter命令-在我发送的过滤器之后不应用我的过滤器，因此，会发出两个请求，网格最终只应用标准的请求。如果没有其他剑道标准筛选器具有值，则只发送一个请求，即我应用自定义筛选器的请求，这很好，但在使用标准筛选器时无法正常工作：（理想情况下，我希望它能像标准的剑道网格过滤器一样工作，但我对它们或MVVM了解不够，无法让绑定工作，也无法让剑道意识到此过滤器弹出窗口的过滤器中发生了变化。我希望MVVM在绑定的过滤器中有一个标志或一些东西，带有输入元素，可以知道它们何时有b。）即使更改了，它也知道如何重新应用过滤器。我对您（最终）试图实现的目标非常迷茫。我试图解决复选框中的值问题，但您的问题似乎是构建一个过滤器（与其他过滤器增量兼容）并通过网格中的复选框进行选择。对吗？

columns: [
    { 
        field: 'orderNumber', 
        title: 'Order Number', 
        filterable: {
            ui: orderNumberFilter,
        }
    }
]

<label for="customerOrders" title="Show only orders going directly to the customer.">
    <input type="checkbox" class="k-checkbox" id="customerOrders" data-bind="checked:filters[1].value" name="orderTypes" data-value="6" />
    Direct to customer
</label>

function orderNumberFilter(element) {           
    var value = $(element).data("value");
    ...
};