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

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

1 个答案: