如何在jqgrid的form editing中添加关联datepicker

最新推荐文章于 2021-04-08 18:01:09 发布

原创最新推荐文章于 2021-04-08 18:01:09 发布 · 238 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #PHP #IDEA #ViewUI

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在jqGrid的formediting中集成DatePicker插件。通过在afterShowForm事件中调用自定义函数实现日期选择功能，并展示了具体的代码实现。

最近接了一个项目，用的还是jqgrid，jqgrid更新的很快，现在都是3.8.1的版本了，功能也比以前强大了很多，很多激动人心的功能都实现了! :idea:
开发过程中需要对form editing中的字段添加datepicker，网上找到了一篇，大概思路是一样的，就是对jqgrid的navGrid进行定义，首先查jqgrid的wiki，具体的文档可以看这里http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
都文档得知我们需要用到的events主要是这个afterShowForm

我的解决思路是，在用户点击navGrid中的edit图标按钮时，弹出编辑窗口，也就是form editing，
定义一个函数

function showudate(tmpob)
{
$(function() {
		tmpob.datepicker({
			changeMonth: true,
			changeYear: true,
			dateFormat: "yy-mm-dd"

		});
	});
}

这个函数我就不需要解释了，很简单
然后在afterShowForm中调用这个函数就可以了，具体的写法：

jQuery("#list2").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true},{width:400,height:400,afterShowForm:function(){showudate($("#tt\\.mt_date"));}},{width:400,height:400},{},{multipleSearch:true},{});//注释tt.mt_date是我关联datepicker的输入框的id的名称，width:400,height:400是定义的form editing的大小

具体效果见附件中的图片