JqG​​rid搜索带有多个文本框的字段

问题描述

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

I am wondering if it is possible with JqGrid advanced search to display multiple text boxes for some of the fields I want to search on.For example, if I have a 'Phone Number' field, I want to be able to visualize 2 boxes, one for area code and the other for the rest of the phone number.Then after pressing 'Find' I want to able to get the two values and merge them or do something else.

任何帮助，我们都会感激的，

Any help would be appreciated,

谢谢

fromano2802

fromano2802

推荐答案

您有一个有趣的问题，但是我建议您使电话号码的输入更加美观和用户友好.有一个不错的jQuery"Masked Input"插件.它允许您在输入字段内显示掩码，例如( _)_ -____"，并且只允许输入数字.要了解生活，请打开页面 http://digitalbush.com/projects/masked-input-plugin/#demo ，将焦点设置在电话"字段中，然后尝试键入一些内容.不好吗！

You have an interesting question, but I suggest you to make input of the phone number more nice and user friendly. There are a nice jQuery "Masked Input" Plugin. It allow you display a mask inside a input field, something like "(_) _-____" and allow only input of numbers. To see life what I mean open the page http://digitalbush.com/projects/masked-input-plugin/#demo, set focus to the Phone field and try to type something. Is it not nice!

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

To do this inside of JqGrid advanced search dialog you should do following

1. 从.
2. 从您的网页的此JavaScript文件中插入一个.

3. 在colModel搜索选项块中的电话号码"列的定义中添加以下内容

1. Download jquery.maskedinput-1.2.2.js or/and jquery.maskedinput-1.2.2.min.js from http://digitalbush.com/projects/masked-input-plugin/.
2. Insert one from this JavaScript files in you web page.

3. Add to the definition of your 'Phone Number' column in colModel searchoptions block like following

{名称:"PhoneNumber"，宽度:83，索引:"PhoneNumber"，对齐:"center"， 搜索选项:{ dataInit:函数(元素){ $(elem).mask([phone]"); } }}

{ name: 'PhoneNumber', width: 83, index: 'PhoneNumber', align: 'center', searchoptions: { dataInit: function (elem) { $(elem).mask("[phone]"); } }}

就这些.现在，只需打开高级搜索对话框"，选择电话号码"字段，然后在输入字段中设置焦点即可. jqGrid文档中dataInit > 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 .

It's all. Now just open "Advanced Search dialog", choose 'Phone Number' field and set focus in the input field. The function dataInit described in the jqGrid documentation under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config&s[]=datainita and in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules&s[]=datainit.

通过这种方式，您可以在数据编辑(表单编辑和内联编辑)期间接收相同的掩码输入.只需定义与searchoption s相同的editoption:

By the way you can receive the same masked input during data editing (both form edit and inline edit). Just define the same editoption like searchoptions:

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

这篇关于JqG​​rid搜索带有多个文本框的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！