JqG​​rid 使用多个文本框搜索字段

Question

我想知道 JqGrid 高级搜索是否可以为我想要搜索的某些字段显示多个文本框。 例如，如果我有一个“电话号码”字段，我希望能够可视化 2 个框，一个用于区号，另一个用于电话号码的其余部分。 然后按“查找”后，我希望能够获取这两个值并将它们合并或做其他事情。

任何帮助将不胜感激，

谢谢，

来自ano2802

Answer 1

您有一个有趣的问题，但我建议您将电话号码的输入做得更好，更便于用户使用。有一个不错的 jQuery“Masked Input”插件。它允许您在输入字段中显示掩码，例如“(_) _-____”，并且只允许输入数字。要了解我的意思，请打开页面http://digitalbush.com/projects/masked-input-plugin/#demo，将焦点设置到电话字段并尝试输入一些内容。不好看吗！

要在 JqGrid 高级搜索对话框中执行此操作，您应该执行以下操作

1. 从http://digitalbush.com/projects/masked-input-plugin/下载jquery.maskedinput-1.2.2.js或/和jquery.maskedinput-1.2.2.min.js。
2. 在您的网页中插入此 JavaScript 文件中的一个。

3. 在colModel searchoptions 块中添加“电话号码”列的定义，如下所示

   { name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center', 搜索选项：{ 数据初始化：函数（元素）{ $(elem).mask("(999) 999-9999"); } } }

就是这样。现在只需打开“高级搜索对话框”，选择“电话号码”字段并在输入字段中设置焦点。在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 下的jqGrid 文档中描述了函数dataInit。

顺便说一句，您可以在数据编辑（表单编辑和内联编辑）期间接收相同的屏蔽输入。只需定义相同的editoption 就像searchoptions：

{ 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");
    }
  }
}