使用數據綁定復選框的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/