个人中心
gpt4 book ai didi

grails - 使用Grails网站网格main.gsp在我的表单上无法使用Bootstrap日期选择器-但适用于独立表单

转载 作者：行者123 更新时间：2023-12-02 15:43:14 25 4
gpt4 key购买 nike

我正在尝试查看是否可以使Bootstrap datePicker(datePicker)在Grails v3.3.9 / fields插件2.2.10中工作

我已经完成了一个独立页面，即创建了一个 Controller ，并给它一个名为“ldt”的 Action 。

我像这样创建名为ldt.gsp的grails View 。当我点击在浏览器中触发我的 Controller 时，这个简单的页面呈现良好并且datePicker可以正常工作

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap datepicket demo</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script type='text/javascript'>
        $(function(){
            //$('.input-group.date').datepicker({
            $('#datepicker').datepicker({

                calendarWeeks: true,
                todayHighlight: true,
                autoclose: true
            });
        });

    </script>
</head>
<body>
<div class="container">
    <h1>Bootstrap datepicker</h1>
    <div class="input-group date" id="datepicker">
        <input type="text" class="form-control">
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
    </div>
</div>
</body>
</html>

您可以在这里看到。这不是使用普通的Grails网站网格等

enter image description here

所以我试图将相同的内容放入views / layouts / main.gsp

这是我修改后的main.gsp的标题部分。 (我没有包括Bootstrap或jQuery，因为它们带有grails application.js)。 
<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>
        <g:layoutTitle default="Grails"/>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>

    <asset:stylesheet src="application.css"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script type='text/javascript'>
        $(function(){
            $('#datepicker').datepicker({

                calendarWeeks: true,
                todayHighlight: true,
                autoclose: true
            });
        });

    </script>


    <g:layoutHead/>

    <%-- header assets --%>

</head>....

现在，我尝试在域类中呈现特定字段-类型为LocalDateTime。为了尝试执行此操作，我创建了一个_fields / localDateTime / _wrapper.gsp，它看起来像这样，其中设置了输入控件(就像我对独立页面所做的一样)，但是现在给输入一个开始日期时间。

localDateTime / _wrapper.gsp 
<%@ page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class="input-group date" id='datetimepicker1' >
                        <label for=${this.pageScope.property}> ${this.pageScope.getVariable("label")} </label>
                        <input type='text' class="form-control" value="${java.time.LocalDateTime.now().toString()}"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当我在浏览器中进入此页面时，它会呈现，但可点击字段行为等不会触发，并且该字段的右侧没有日历图标(这可能是因为Grails正在加载Bootstrap 4，以及当我尝试独立运行时对于v4.3.1，该图标未呈现-但click事件仍然有效)。

在此处查看呈现的表单-使用“edit”操作，该操作又使用带有 <f:all的标准支架，该支架调用我的_wrapper.gsp。

enter image description here

日期的字符串值可以很好地呈现(未格式化)，但是我得到 没有点击操作并且日历没有弹出- 没有任何 Action 。我在为contractSignedDate属性打开的浏览器中包含了浏览器页面检查的片段。

因此，如果独立页面的gsp正常运行(尽管Grails bau加载了Bootstrap 4)，我的点击操作不会触发

那么，当将main.gsp / normal字段plugin /和_wrapper.gsp用于Java LocalDateTime时，为什么gsp action操作无法触发？它适用于独立的gsp示例，所以我知道datePicker可以工作

如何获得以Grails脚手架形式工作的 Bootstrap datepicker，如此处所述？

PS它不缺少jqueryUI库-我在独立和main.gsp中都包含1.12.1，请从检查器中查看此图像。在独立版本上运行良好，但不使用main.gsp和脚手架形式

PS:如果我按一下_widget.gsp所示的scaffolded form属性，则外部文本框将突出显示为蓝色(bau grails呈现的元素不会显示-因此发生了某种形式的单击操作-只是没有获取日历弹出。

enter image description here

enter image description here

enter image description here

enter image description here

最佳答案

这很奇怪。当在独立gsp上引用并从CDN链接JS / CSS时，该页面有效。

如果我添加<meta name="layout" content="main" />并通过main.gsp中的站点网格物体渲染页面，则它将失败。

我在独立页面<head>中尝试了许多不同的组合，基本上日期选择器似乎不需要引导js才能工作-但它确实需要jQuery，并且必须在标题部分。

如果需要样式，则需要包含bootstrap.css和bootstrap-datepicker3 CSS。

<head>

    <%--<meta name="layout" content="main" />--%>
    <title>Bootstrap datepicket demo</title>


    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <%--<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> --%>

    <script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

</head>

但是，如果您取消注释meta标签，它将全部停止。最后，要使它生效，我必须编辑/assets/application.js并使用/ assets / javascripts中的本地副本删除Bootstrap和jQuery的条目，而直接从main.gsp中的cdn引用它们。

所以我的工作application.js看起来像这样-我包括了自己的LCM应用JS: 
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//= require LCM-app
//= require popper.min
//= require_self

我的LCM-app js看起来像这样，其中我的选择器正在使用类选择器-请注意，您似乎已经在组和日期'.input-group.date'之间添加了点-但这在标记中变成了空格 
// used by bootstrap date picker - matching class selector is for class class='.input-group date'
$(function(){
    $('.input-group.date').datepicker({
        calendarWeeks: true,
        todayHighlight: true,
        autoclose: true
    });
});

然后，我进入main.gsp并在独立页面中的cdn引用中进行了编辑(现在，jQuery和Bootstrap的 Assets 插件已禁用)

main.gsp(头部)-您 不要需要jqueryUI才能正常工作 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>
        <g:layoutTitle default="Grails"/>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>

    <asset:stylesheet src="application.css"/>

    <%-- <script type='text/javascript' src='//code.jquery.com/jquery-1.12.1.js'></script>--%>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>


    <g:layoutHead/>

    <%-- header assets --%>

</head>

现在，当您取消注释独立页面中的 <meta>标记并删除直接引用时，则main.gsp站点网格物体会将它们完全添加回独立页面中

将您的浏览器指向测试页，一切正常。

当我将基本代码放入taglib时，它甚至可以工作(您必须使用静态encodeAsForTags停止转义，并为标签设置为“none”)。 
JdtDateTimeTagLib
class JavaDateTimeTagLib {
    static defaultEncodeAs = [taglib:'html']
    //static encodeAsForTags = [tagName: [taglib:'html'], otherTagName: [taglib:'none']]
    static encodeAsForTags = [ jdtScaffoldField:'none']

    static namespace = "jdt"        //java8 date time name space for tags

    GrailsNameUtils grailsNameUtils = new GrailsNameUtils()


    def jdtScaffoldField = {attrs, body ->

        assert grailsNameUtils

        String propertyName = attrs.propertyName ?: "unknown"
        String property = attrs.property ?: "unknown"
        String value = attrs.value
        String naturalName = grailsNameUtils.getNaturalName(propertyName)
        String label = attrs.label ?: 'unknown'

        String ldtStr = attrs.ldt


        String page = """
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group form-inline">
                    <label class='control-label' for="$propertyName"> ${label} </label>
                    <div class="input-group date"  >
                            <input type='text' class="form-control" value="${ldtStr?.toString()}"/>
                            <span class="input-group-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
"""

        out << page
    }


}

然后，我可以简化_fields / localDateTime / _wrapper.gsp以使用该标签，如下所示 
<%@ page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<jdt:jdtScaffoldField propertyName="xyc" label="my label"></jdt:jdtScaffoldField>

现在，当您进行常规的grails编辑操作时，将渲染我的字段和日历操作。

在此版本中，我丢失了变量，因为我没有将值传递给包装器并将它们转发到我的标签中-但我认为这并不难。照原样查看工作屏幕截图

不幸的是，为了避免Grails脚手架使用它自己的渲染，所以CSS样式不匹配，对齐方式有点错了，但是，如果我可以执行Submit操作等以采用选定的日期并将包转换为LocalDateTime保留在数据库中。

基本上，如果grails <g:datePicker可以被“修复”以使用新的Java时间格式并使用Bootstrap选择器会更好，因为fields插件为普通的Java Date调用 <g:datePicker，但完全不处理Java 8时态的东西。

我试图“找到” grails <g: taglib的实现位置(原本想在​​GSP插件或核心项目中找到它-但我都找不到。

但是，虽然它并不理想-对于我要向人们展示的使用脚手架的迷你演示来说已经足够好了-看起来有点笨拙，因为不一致。

enter image description here

关于grails - 使用Grails网站网格main.gsp在我的表单上无法使用Bootstrap日期选择器-但适用于独立表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54520082/

25 4 0
文章推荐： gradle - 为什么 “grails assemble”和 “gradle assemble”产生不同的WAR存档
文章推荐： grails - Grails sessionFactory等效于Domain.withNewSession和withTransaction
文章推荐： grails - 如何在Grails中呈现来自api的html响应
文章推荐： spring - 如何跳过pre_auth_filter
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com