Enjoy html输出自动换行问题

定义模板

#define icon(name)
#switch(name)
#case("feather-home")
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
#case("feather-cpu")
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
#case("feather-arrow-left")
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
#case("feather-arrow-right")
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
#case("feather-search")
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
#case("feather-copy")
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
#default
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
#end
#end

输出icon

<script>
    $('#zero-config').DataTable({
        dom: '<"row"<"col-md-12"<"row"<"col-md-6"B><"col-md-6"f> > ><"col-md-12"rt> <"col-md-12"<"row"<"col-md-5"i><"col-md-7"p>>> >',
        buttons: {
            buttons: [
                { extend: 'copy', className: 'btn' ,text: '复制#@icon("feather-copy")'},
                { extend: 'excel', className: 'btn' ,text: '导出'},
                { extend: 'print', className: 'btn' ,text: '打印'}
            ]
        },
        "oLanguage": {
            "oPaginate": { 
                "sPrevious": '#@icon("feather-arrow-left")', 
                "sNext": '#@icon("feather-arrow-right")' 
            },
            "sInfo": '从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条',
            "sSearch": '#@icon("feather-search")',
            "sSearchPlaceholder": '搜索...',
            "sLengthMenu": '每页 :  _MENU_',
        },
        "stripeClasses": [],
        "lengthMenu": [10, 20, 50],
        "pageLength": 10
    });
</script>


输出结果

<script>
    $('#zero-config').DataTable({
        dom: '<"row"<"col-md-12"<"row"<"col-md-6"B><"col-md-6"f> > ><"col-md-12"rt> <"col-md-12"<"row"<"col-md-5"i><"col-md-7"p>>> >',
        buttons: {
            buttons: [
                { extend: 'copy', className: 'btn' ,text: '复制<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
'},
                { extend: 'excel', className: 'btn' ,text: '导出'},
                { extend: 'print', className: 'btn' ,text: '打印'}
            ]
        },
        "oLanguage": {
            "oPaginate": { 
                "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
', 
                "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
' 
            },
            "sInfo": '从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条',
            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
',
            "sSearchPlaceholder": '搜索...',
            "sLengthMenu": '每页 :  _MENU_',
        },
        "stripeClasses": [],
        "lengthMenu": [10, 20, 50],
        "pageLength": 10
    });
</script>


结果自动换行了,请教各位大神,有没有方法让enjoy输出不换行?

详细截图

微信截图_20200306204551.png微信截图_20200306204609.png微信截图_20200306204638.png


评论区

Leifantan

2020-03-06 20:25

自动换行后就js运行报错

JFinal

2020-03-06 20:33

@Leifantan 高版本的 enjoy 是严格按照你的模板内容进行换行的,决不会自做主张去换行

注意检查实际生成的数据,还要检查一下 enjoy 版本是不是较高版本

Leifantan

2020-03-06 20:39

@JFinal 检查了,是最新jfinal4.8

Leifantan

2020-03-06 20:49

@JFinal 已重新编辑,有劳大佬了

Leifantan

2020-03-06 20:49

@JFinal 麻烦看看

JFinal

2020-03-06 21:04

@Leifantan 这个不用看的,严格测试过, 你的模板内容中有换行,那么 enjoy 生成出来的就有换行

Leifantan

2020-03-06 21:40

Leifantan

2020-03-06 21:46

@JFinal 的确是严格要求了,把switch里面换行取消了就行了,但是模板方法为了可读性,还是需要换行的,有没有打算更新个可以消除换行的指令呢,目前我打算写个方法去消除了

JFinal

2020-03-06 23:01

@Leifantan 模板引擎是需要严格按照用户给定的模板内容来换行的,否则现在满足了你的需求, 但会造成其他人更大的疑惑

如果不按模板内容,私自对换行、空格干预,最后生成出来的内容是不严谨的,后患无穷

山东小木

2020-03-07 00:50

你可以自定义模板指令 去掉换行符后输出

l745230

2020-03-09 10:40

@JFinal 同样有遇到过这个问题, 最终为了生成代码的正确性,牺牲掉了模板的可读性.为了生成代码不生成多余空格,多个标签之间都没有空格,代码全挤在一起. 后期维护起来难度非常高... #for #if else 全部写在一行上. 是不是可以提供个官方解决方案呢.

JFinal

2020-03-09 11:16

@l745230 可以用自定义指令来处理,例如:
#trim()
这里是需要被处理的代码块,例如:
#if (...)
...
#else
...
#end
#end

以上的 #trim 指令是假想的指令扩展,做起来应该不难

jfinal 官方以前做过一个 trim 指令,后来丢弃了,对性能会有一定影响,而且并不优雅

这是一个两难问题,不过就目前来看,enjoy 上线三年多了这种需求碰到得很少

热门分享

扫码入社