使用复选框上的数据绑定的 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 到过滤器。

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

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/