使用数据绑定复选框的Kendo UI网格自定义过滤器

Question

这就是我想要简单地实现的目标：

使用复选框添加自定义过滤器的功能在选中时会将自定义过滤器值应用于除true或false之外的Kendo UI网格。

这是我的自定义过滤器模板：

<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>

这是我的自定义过滤功能：

function orderNumberFilter(element) {           
        element.after('<div>' + $('#orderNumberFilterTemplate').html() + '</div>');
};

这是我对网格的过滤函数的应用：

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

我在这里得到的是，当有人勾选一个复选框时，我希望使用{field：'myfield'，operator：'startswith'，value：6}更新过滤器，但作为一个复选框，它会自动更新它们的值：选中时为true。 有没有办法创建自定义过滤器而不是指定值而不是过滤器的复选框true或false。

此外，是否可以应用一个绑定属性来指定使用何种类型的运算符，因为我真的希望让kendo的标准文本框过滤器正常工作，但下面的这些复选框使用的运算符与应用的运算符不同到文本框。

Answer 1

是的，复选框值为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>

我已经更换了你value由data-value 。 现在，我可以这样做：

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

示例： http ： //jsfiddle.net/OnaBai/cY9Wg/