Kendo UI Grid Multicheck Фильтрация по идентификатору - PullRequest
Новая
       54

Kendo UI Grid Multicheck Фильтрация по идентификатору

0 голосов
/ 13 октября 2018

Допустим, вы хотите отфильтровать столбец в моей таблице Kendo UI Grid на основе набора значений поиска.

Источник данных - это массив объектов, например 

const dataSource = [{id:1,name:"IRL"},{id:2,name:"UK"}]

, и (упрощенный) макет столбца для моей таблицы: 

columns: [{
            field: "name",
            title: "Route",
            filterable: {
              multi: true,
              data: dataSource
            }
          }]

Это будет отображать мульти-проверкувыпадающий фильтр правильно, но мой фильтр field_name, отправленный обратно в мой API, будет «name», а значение фильтра будет, например, «IRL».

Мне нужно, чтобы фильтр field_name был «id» изначение должно быть, например, 1, при этом имя все еще отображается в раскрывающемся списке, например, "IRL".

Возможно ли это?Я встречал некоторые ссылки на переопределение функции фильтра, но я надеялся, что смогу сделать это на уровне источника данных.

1 Ответ

0 голосов
/ 15 октября 2018

Вы можете попробовать это: 

$(document).ready(function() {
  var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"];
  var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"];
  var cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"];
  var titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
    "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"
  ];
  var birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

  function createRandomData(count) {
    var data = [],
      now = new Date();
    for (var i = 0; i < count; i++) {
      var BirthDater = birthDates[Math.floor(Math.random() * birthDates.length)];
      data.push({
        Id: i + 1,
        FirstName: firstNames[Math.floor(Math.random() * firstNames.length)],
        LastName: lastNames[Math.floor(Math.random() * lastNames.length)],
        City: cities[Math.floor(Math.random() * cities.length)],
        Title: titles[Math.floor(Math.random() * titles.length)],
        BirthDate: BirthDater,
        Age: now.getFullYear() - BirthDater.getFullYear()
      });
    }
    return data;
  }

  $("#grid").kendoGrid({
    dataSource: {
      data: createRandomData(50),
      schema: {
        model: {
          fields: {
            City: {
              type: "string"
            },
            Title: {
              type: "string"
            },
            BirthDate: {
              type: "date"
            }
          }
        }
      },
      pageSize: 15
    },
    height: 550,
    scrollable: true,
    filterable: {
      extra: false,
      operators: {
        string: {
          startswith: "Starts with",
          eq: "Is equal to",
          neq: "Is not equal to"
        }
      }
    },
    pageable: true,
    columns: [{
        title: "Name",
        width: 160,
        filterable: false,
        template: "#=FirstName# #=LastName#"
      },
      {
        field: "City",
        width: 130,
        filterable: {
          ui: cityFilter
        }
      },
      {
        field: "Title",
        filterable: {
          ui: titleFilter // Filter like this
        }
      },
      {
        field: "BirthDate",
        title: "Birth Date",
        format: "{0:MM/dd/yyyy HH:mm tt}",
        filterable: {
          ui: "datetimepicker"
        }
      }
    ]
  });
});

function titleFilter(element) {
  element.kendoDropDownList({
    dataSource: cities,
    optionLabel: "--Select Value--"
  });
}

function cityFilter(element) {
  element.kendoDropDownList({
    dataSource: cities,
    optionLabel: "--Select Value--"
  });
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.716/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2014.2.716/styles/kendo.common.min.css" />
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

</head>

<body>

  <div id="example">
    <div id="grid"></div>
  </div>
</body>

</html>

Здесь свойство ui является важной частью ответа, определяя функцию для обработки фильтрации, вы можете фильтровать данный столбец по значению, которое выхочу.Попробуйте выполнить фильтрацию идентификаторов с помощью этого метода:)

...