剑道组合框在过滤时丢失html字段

Kendo Combobox losing html fields on filtering

本文关键字：html 字段 过滤 组合      更新时间：2023-09-26

我有一个剑道组合框，我之前问过这个问题。过滤工作正常，但过滤完成后，选择列表中的选项将失去其属性。有什么原因吗?请告诉我。

这是Dojo。

过滤前

: 

<select id="users">
                <option value="1" code="user1" data-message="OK1">User 1</option>
                <option value="2" code="user2" data-message="OK2">User 2</option>
              <option value="3" code="user3" data-message="OK3">User 3</option>
              <option value="4" code="user4" data-message="OK4">User 4</option>
                  </select>
过滤后

: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
< select id="users" data - role="combobox" aria - disabled="false" aria - readonly="false" style="display: none;">
  <option value="2">User 2</option>// lost code and data-message
      <option value="3">User 3</option> // lost code and data-message
          </select>

欢呼。

更新:问题是该控件已经在服务器端初始化，而我只是在客户端执行过滤。是否没有办法在不重新初始化控件的情况下执行过滤?

我可能会采取稍微不同的方法，这样做。

  • 为组合框项创建模板
  • 从某处加载数据(在这个例子中，我刚刚在JS中创建了一个数组。
  • 创建Kendo Combobox并分配数据源和模板。
  • 对数据
    • 执行过滤

Dojo示例

<!-- Template for Combobox Items -->  
<script id="template" type="text/x-kendo-template">
  <span value="#: value #" code="#: code #" data-message="#: message#">#: displayText #</span>
</script>
  <!-- Element to convert to Kendo Combobox -->
  <div id='users'></div>

          <script>
            // Data for the ComboBox
            var data = [{value: "1", code: "user1", message:"OK1", displayText: "User 1"},
                       {value: "2", code: "user2", message:"OK2", displayText: "User 2"},
                        {value: "3", code: "user3", message:"OK3", displayText: "User 3"},
                        {value: "4", code: "user4", message:"OK4", displayText: "User 4"}
                       ]

              $(document).ready(function() {
                // Create the ComboBox 
                $('#users').kendoComboBox({
                  dataSource: data,
                  dataTextField: "displayText",
                  dataValueField: "value",
                  template: kendo.template($("#template").html())
                });
                //filtering
               var _flt = { logic: "or", filters: [] };
                _flt.filters.push({ field: 'value', operator: "contains", value: "2" });
                _flt.filters.push({ field: 'value', operator: "contains", value: "3" });
                $('#users').getKendoComboBox().dataSource.filter(_flt);
                //select the first item
                $('#users').getKendoComboBox().select(0);

              });
          </script>
相关文章：