JqGrid Поиск с несколькими текстовыми полями для поля

Question

Мне интересно, возможно ли с помощью расширенного поиска JqGrid отображать несколько текстовых полей для некоторых полей, по которым я хочу выполнить поиск. Например, если у меня есть поле «Номер телефона», я хочу иметь возможность визуализировать 2 поля, одно для кода города, а другое для остальной части номера телефона. Затем после нажатия «Найти» я хочу получить два значения и объединить их или сделать что-то еще.

Любая помощь будет оценена,

Спасибо

fromano2802

Answer 1

У вас есть интересный вопрос, но я предлагаю вам сделать ввод номера телефона более приятным и удобным для пользователя. Есть хороший плагин jQuery "Masked Input". Это позволяет вам отображать маску внутри поля ввода, что-то вроде «( _) _ -____» и разрешать только ввод чисел. Чтобы увидеть, что я имею в виду, откройте страницу http://digitalbush.com/projects/masked-input-plugin/#demo,, установите фокус на поле Телефон и попробуйте что-нибудь напечатать. Разве это не приятно!

Чтобы сделать это в диалоге расширенного поиска JqGrid, вам нужно выполнить

1. Скачать jquery.maskedinput-1.2.2.js или / и jquery.maskedinput-1.2.2.min.j с из http://digitalbush.com/projects/masked-input-plugin/.
2. Вставьте один из этих файлов JavaScript на своей веб-странице.

3. Добавьте к определению столбца «Номер телефона» в colModel блоке поиска, как показано ниже

   {name: 'PhoneNumber', ширина: 83, индекс: 'PhoneNumber', выравнивание: 'center', Поиски: { dataInit: function (elem) { $ (elem) .mask ("(999) 999-9999"); } } }

Это все. Теперь просто откройте «Диалог расширенного поиска», выберите поле «Номер телефона» и установите фокус в поле ввода. Функция dataInit описана в документации jqGrid в http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita и в http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s[]=datainit.

Кстати, вы можете получить один и тот же маскированный ввод во время редактирования данных (как редактирования формы, так и встроенного редактирования). Просто определите те же editoption как searchoption s:

{ name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center',
  editoptions: {
    dataInit: function (elem) {
      $(elem).mask("(999) 999-9999");
    }
  },
  searchoptions: {
    dataInit: function (elem) {
      $(elem).mask("(999) 999-9999");
    }
  }
}