Question

我一直在使用Struts2和它的JQuery插件大约一个星期，我有点迷失。

我试图做的最后一件事是在我正在页面上显示的jqGrid中按日期实现搜索。为此，我遵循了this tutorial here.

事情是它不起作用，因为当我点击应该弹出日期选择器的搜索字段时，它不会弹出任何东西。我调试了javascript代码，发现当它试图调用datepicker()函数时，出现错误，说“ Uncaught TypeError：Undefined不是函数”。

我不确定为什么会这样，因为我正在使用Struts2-jquery-plugin 3.7.1。我在下面发布我的JSP代码（我省略了与问题无关的所有网格行）：

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true" jquerytheme="south-street" locale="es" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
 datePick = function(elem) {
        $(elem).datepicker({
            firstDay : 1
        });
        $('#ui-datepicker-div').css("z-index", 2000);
}
</script>
<title>Testing</title>
</head>
<body>
<s:url var="remoteurl" action="reservationList"/>
<div id="grid">
    <sjg:grid
        id="reservationsGrid"
        caption="%{getText('reservationTable.title')}"
        dataType="json"
        href="%{remoteurl}"
        pager="true"
        gridModel="gridModel"
        rowList="10,15,30"
        rowNum="15"
        navigator="true"
        navigatorSearch="true"
        autowidth="true"
        navigatorSearchOptions="{multipleSearch:true, closeAfterSearch:true}">
        ...
        <sjg:gridColumn name="date" index="date" title="Date" search="true" formatter="date" sortable="true"  formatoptions="{newformat : 'd/m/Y H:i', srcformat : 'Y-m-d H:i'}" searchoptions="{sopt:['eq','lt','le','gt','ge'], dataInit:datePick}"/>
       ...
    </sjg:grid>

 </div>
</body>
</html>

我是否缺少任何导入/参考或此类事情？

更新
最近我发现了一个hack，它告诉我这个问题与datepicker的导入/引用有关：

我所做的就是在JSP中添加一个新标签：
<sj:datepicker style="display:none" disabled="true"></sj:datepicker>

通过这样做，我想我强迫框架自动导入并初始化一个日期选择器，所以它可以工作，但它不是我正在寻找的解决方案。

所以我的问题是： 如何导入/引用和初始化datepicker？

Answer 1

默认情况下，<sj:head>不会加载所有jQuery ui资源，而是按需加载它们。当您添加<sj:datepicker>标记时，它还会加载所需的资源，并且您的脚本能够运行。

要一次性加载所有资源，请将loadAtOnce标记的<sj:head>属性设置为true。

<sj:head jqueryui="true" loadAtOnce="true"
         jquerytheme="south-street" locale="es" />

Datepicker在搜索弹出窗口内无效

1 个答案: