如何在标题中的 jqGrid 文本字段中添加占位符？

Posted 2023-05-07

【中文标题】如何在标题中的 jqGrid 文本字段中添加占位符？

【英文标题】：How to add a placeholder to jqGrid text field in the header?

【发布时间】：2016-05-30 04:05:09

【问题描述】：

我的 jqgrid 包含多个字段，我想过滤网格。例如，假设我的网格包含“名称”字段，并且我想用 name="aron" 过滤网格的数据。现在，我想告诉用户，您应该只在此字段中输入名称来过滤网格。

我是 jqGrid 的新手，需要有人帮助才能继续前进。我想在网格上的标题行文本字段中添加一个占位符，因为我可以向用户提供一些指令以输入数据进行过滤。我想让它通用，每当我向我的网格添加一个文本字段时，都应该向它添加一个通用占位符（输入提示）。我不确定我的 jquery.jqGrid.min.js 是如何工作的，以及在哪里进行更改以满足我的要求。

谁能帮我解决这个问题..？？

提前致谢， 桑托什·曼恩。

 model.dataType = dataType;
    if (dataType == 'datetime' || dataType == 'date') 
        if (!model.formatter)
    model.formatter = 'date';
    
    formatColumns += '<Column><ColName>'+model.xmlmap+'</ColName><ColType>'+dataType+'</ColType></Column>';

        if (!model.formatoptions) 
            model.formatoptions = 
              srcformat: 'SortableDateTime',
              newformat: (dataType == 'date')?'Y-m-d':'Y-m-d H:i:s',
              defaultValue: null
            ;
        
        else 
            if (!model.formatoptions.srcformat)
                model.formatoptions.srcformat = 'SortableDateTime';
            if (!model.formatoptions.newformat)
                model.formatoptions.newformat = (dataType == 'date')?'Y-m-d':'Y-m-d H:i:s';
        
        if (dataType == 'date') 
            model.searchoptions.dataInit = function(el) 
                $(el).datetimepicker(format: 'YYYY-MM-DD', pickDate:true, pickTime:false);
            ;
        
        else 
            model.searchoptions.dataInit = function(el) 
                $(el).datetimepicker(format: 'YYYY-MM-DD HH:mm:ss', useSeconds:true, sideBySide:false);
            ;
        
        model.width = 210;
    

此外，我的 jqgrid 实现如下所示。

<DataGrid> <Columns> <Column name="date" mapping="createdDate".../> </Columns> </DataGrid>

【问题讨论】：

你知道，有一个网站？ guriddo.net/demo/guriddojs ...它有带有代码示例的演示。至少告诉我们你已经尝试过。

我们有一个名为 DataGrid.js 的覆盖文件，用于 jquery.jqGrid.min.js，它支持 xml 标签。因此，我所有的 jqgrid 代码都将采用 xml 格式，并在内部由 DataGrid.hs 转换为脚本。请在下面找到我的数据网格代码。 @MokonaModoki

@MokonaModoki ...

如果这个 xml 扩展是在你的团队内部构建的，为什么会有人知道如何使用它？

@santoshM: 1) 您应该在问题的文本中发布有关问题的所有信息*（单击问题下方的“编辑”并修改文本）2）您应该发布有关什么的更多详细信息你做了什么，你需要实现什么。关于DataGrid 的XML 片段没有关于您的问题的信息。您需要在哪里添加哪个“通用占位符（输入提示）”？对不起，但我仍然不知道你需要实现什么。查看here 获取有关 jqGrid 的第一个信息。

【参考方案1】：

如果您需要将placeholder='mm/dd/yyyy hh:mm' 属性添加到搜索工具栏的<input> 元素，则可以使用

searchoptions: 
    attr:  placeholder: "mm/dd/yyyy hh:mm" 

查看演示https://jsfiddle.net/OlegKi/0v6vkx75/3/

【讨论】：

嗨 Oleg，我对上述问题有一个扩展，只是想从另一个 .js 文件中获取这个占位符的值。我可以使用 colModel 对象获取此占位符属性的值吗？ @Oleg

@santoshM：我不确定你的意思。 searchoptions.attr.placeholder 已经是 colModel 的一部分。是否要保持colModel同步的多个参数（相同）？列中template 的使用可能是您可以使用的功能。我不确定您是否知道列模板以及是否使用该功能。我在免费的 jqGrid 中实现了将 template 定义为函数的可能性，这似乎是您所需要的。如果您发布单独的问题并准确描述您的问题以及您需要实施的内容，那会更好。

感谢您在 jsFiddle 上分享完整代码。但是，日期选择器上的 Today 按钮不适用于日期列过滤器。

@Yayati：如果我正确理解了您的问题，那么这纯粹是关于独立于 jqGrid 的 jQuery UI datepicker 的问题。查看来自官方 jQuery UI 站点的the demo。见the comment。查看使用代码的the demo。这可能不是最终解决方案，但“今天”按钮现在可以使用。

【参考方案2】：

如果你知道如何在 jqgrid "loadcomplete" 中获取列名，

添加此代码：

$("gs_YourColumnNamePropertyValue").attr("placeholder","YourText");

添加任意数量的列。

【讨论】：

你应该发布这样的评论作为对问题的评论，而不是作为问题的答案。

我知道@Oleg。我已经添加了一个注释，这就是原因。在获得 50 声望之前，我无法发表评论。

您好 Oleg 和 Rustin，我已经编辑了我的问题并对代码 sn-p 进行了注释。任何人都可以在这方面帮助我。提前致谢。 @Oleg

我明白你是如何实现 jqgrid 的。我以同样的方式实施。但是对于您的问题，它没有关系，在什么情况下以及如何添加文本框？

@RustinCohle：我已经编辑了我的问题，请您查看一下。我只想将占位符添加到字段的标题中，这建议用户只输入指定的数据来过滤网格。

【参考方案3】：

在我的例子中，我从 xyz.jsp 发送日期时间作为我的数据类型。同样在 jquery.jqGrid.min.js 中检查并添加占位符。

if(k.dataType == 'datetime')
a("td:eq(1)", s).append("<input type='text' placeholder='mm/dd/yyyy hh:mm' style='width:100%;padding:0px;' name='" + (k.index || k.name) + "' id='gs_" + k.name + "' value='" + v + "'/>");
else
a("td:eq(1)", s).append("<input type='text' style='width:100%;padding:0px;' name='" + (k.index || k.name) + "' id='gs_" + k.name + "' value='" + v + "'/>");