<s:radio>标签和<s:checkboxlist>标签实现换行

本文介绍如何在Struts2框架中将默认横向排列的复选框改为竖向排列,通过修改FTL模板文件实现每个复选框一行显示的效果。
     系统定义的时候默认为横向输排列,但我们有时候需要竖向排列,实现竖向排列的方法有两种,第一种可以在标签外面加一个<div>或者<span>标签,设置它们的宽度,但是这样显示效果不是很好控制,所以我喜欢用第二种,修改ftl模版文件。

 

首先在struts2-core-xxx.jar 的template.simple里面找到checkboxlist.ftl,然后在自己项目里新建一个包 名字为template.simple,把checkboxlist.ftl文件拷贝过来,最后就在这里面重新定义自己想要显示的格式,我设置的是一行显示一个,代码如下:

 

<#--
/*
 * $Id: checkboxlist.ftl 1366934 2012-07-29 20:10:06Z jogep $
 *
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
-->
<#assign itemCount = 0/>
<#if parameters.list??>
<@s.iterator value="parameters.list">
    <#assign itemCount = itemCount + 1/>
    <#if parameters.listKey??>
        <#assign itemKey = stack.findValue(parameters.listKey)/>
        <#else>
            <#assign itemKey = stack.findValue('top')/>
    </#if>
    <#if parameters.listValue??>
        <#assign itemValue = stack.findString(parameters.listValue)?default("")/>
        <#else>
            <#assign itemValue = stack.findString('top')/>
    </#if>
    <#if parameters.listCssClass??>
        <#if stack.findString(parameters.listCssClass)??>
          <#assign itemCssClass= stack.findString(parameters.listCssClass)/>
        <#else>
          <#assign itemCssClass = ''/>
        </#if>
    </#if>
    <#if parameters.listCssStyle??>
        <#if stack.findString(parameters.listCssStyle)??>
          <#assign itemCssStyle= stack.findString(parameters.listCssStyle)/>
        <#else>
          <#assign itemCssStyle = ''/>
        </#if>
    </#if>
    <#if parameters.listTitle??>
        <#if stack.findString(parameters.listTitle)??>
          <#assign itemTitle= stack.findString(parameters.listTitle)/>
        <#else>
          <#assign itemTitle = ''/>
        </#if>
    </#if>
    <#assign itemKeyStr=itemKey.toString() />
    <span>${itemCount}.<span/>
<input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}"
       id="${parameters.name?html}-${itemCount}"<#rt/>
    <#if tag.contains(parameters.nameValue, itemKey)>
       checked="checked"<#rt/>
    </#if>
    <#if parameters.disabled?default(false)>
       disabled="disabled"<#rt/>
    </#if>
    <#if itemCssClass?if_exists != "">
     class="${itemCssClass?html}"<#rt/>
    <#else>
        <#if parameters.cssClass??>
     class="${parameters.cssClass?html}"<#rt/>
        </#if>
    </#if>
    <#if itemCssStyle?if_exists != "">
     style="${itemCssStyle?html}"<#rt/>
    <#else>
        <#if parameters.cssStyle??>
     style="${parameters.cssStyle?html}"<#rt/>
        </#if>
    </#if>
    <#if itemTitle?if_exists != "">
     title="${itemTitle?html}"<#rt/>
    <#else>
        <#if parameters.title??>
     title="${parameters.title?html}"<#rt/>
        </#if>
    </#if>
    <#include "/${parameters.templateDir}/simple/css.ftl" />
    <#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
    <#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
        />
<label for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}</label>
    <#if (itemCount-1)%1 == 0>
    <br/><br/>
    </#if>
</@s.iterator>
    <#else>
     
</#if>
<input type="hidden" id="__multiselect_${parameters.id?html}" name="__multiselect_${parameters.name?html}"
       value=""<#rt/>
<#if parameters.disabled?default(false)>
       disabled="disabled"<#rt/>
</#if>
        />

<template> <view class="zy-radio-checklist" :style="{ 'margin-top': isTop + 'px' }"> <template v-if="!isLocal"> <view class="zy-radio-loading"> <uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText" ></uni-load-more> <text v-else>{{ mixinDatacomErrorMessage }}</text> </view> </template> <template v-else> <radio-group class="zy-radio-checklist-group" :class="{ 'is-list': mode === 'list', 'is-wrap': wrap }" @change="change" > <slot name="left-slot"></slot> <label class="zy-radio-checklist-box" :class="[ 'is--' + mode, item.selected ? 'zy-radio-is-checked' : '', disabled || !!item.disabled ? 'zy-radio-is-disable' : '', index !== 0 && mode === 'list' ? 'zy-radio-is-list-border' : '' ]" :style="item.styleBackgroud" v-for="(item, index) in dataList" :key="index" > <radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value] + ''" :checked="item.selected" /> <view v-if="(mode !== 'tag' && mode !== 'list') || (mode === 'list' && icon === 'left')" class="zy-radio-radio__inner" :style="item.styleBackgroud" > <uni-icons v-if="item.selected" :class="[{ 'is-checked-zy-switch__icon': !isChecked }]" :type="checkedIcon" :color=" item.selected && !item.disabled ? '#fff' : item.disabled && item.selected ? '#b7b7b7' : checkedIconColor " :size="checkedIconSize" /> </view> <view class="zy-radio-checklist-content" :class="{ 'list-content': mode === 'list' && icon === 'left' }"> <text class="zy-radio-checklist-text" :style="item.styleIconText">{{ item[map.text] }}</text> <view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view> </view> </label> <slot name="right-slot"></slot> </radio-group> </template> </view> </template> <script> /** * DataChecklist 数据选择器 * @description 通过数据渲染radio * @property {String} mode = [default| list | button | tag] 显示模式 * @value default 默认横排模式 * @value list 列表模式 * @value button 按钮模式 * @value tag 标签模式 * @property {Array|String|Number} value 默认值 * @property {Array} localdata 本地数据 ,格式 [{text:'',value:''}] * @property {Boolean} wrap 是否换行显示 * @property {String} icon = [left|right] list 列表模式下icon显示位置 * @property {String} selectedColor 选中颜色 * @property {String} emptyText 没有数据时显示的文字 ,本地数据无效 * @property {String} selectedTextColor 选中文本颜色,如不填写则自动显示 * @property {String} checkedIcon 选中文icon * @property {String} checkedIconColor 选中文icon颜色 * @property {String} checkedIconSize 选中icon大小 * @property {Object} map 字段映射, 默认 map={text:'text',value:'value'} * @value left 左侧显示 * @value right 右侧显示 * @event {Function} change 选中发生变化触发 */ export default { name: 'uniDataChecklist', mixins: [uniCloud.mixinDatacom || {}], emits: ['input', 'update:modelValue', 'change'], props: { mode: { type: String, default: 'default' }, value: { type: [Array, String, Number], default() { return '' } }, // TODO vue3 modelValue: { type: [Array, String, Number], default() { return '' } }, localdata: { type: Array, default() { return [] } }, wrap: { type: Boolean, default: false }, icon: { type: String, default: 'left' }, selectedColor: { type: String, default: '' }, selectedTextColor: { type: String, default: '' }, emptyText: { type: String, default: '暂无数据' }, disabled: { type: Boolean, default: false }, map: { type: Object, default() { return { text: 'text', value: 'value' } } }, checkedIcon: { type: String, default: 'checkmarkempty' }, checkedIconColor: { type: String, default: '#0f56d5' }, checkedIconSize: { type: [String, Number], default: 12 } }, watch: { localdata: { handler(newVal) { this.range = newVal this.dataList = this.getDataList(this.getSelectedValue(newVal)) }, deep: true }, mixinDatacomResData(newVal) { this.range = newVal this.dataList = this.getDataList(this.getSelectedValue(newVal)) }, value(newVal) { this.dataList = this.getDataList(newVal) }, modelValue(newVal) { this.dataList = this.getDataList(newVal) }, iconColor: { type: String, default: '' } }, data() { return { dataList: [], range: [], contentText: { contentdown: '查看更多', contentrefresh: '加载中', contentnomore: '没有更多' }, isLocal: true, styles: { selectedColor: '#0f56d5', selectedTextColor: '#333' }, isTop: 0 } }, computed: { dataValue() { if (this.value === '') return this.modelValue if (this.modelValue === '') return this.value return this.value } }, created() { if (this.localdata && this.localdata.length !== 0) { this.isLocal = true this.range = this.localdata this.dataList = this.getDataList(this.getSelectedValue(this.range)) } else { if (this.collection) { this.isLocal = false this.loadData() } } }, methods: { loadData() { this.mixinDatacomGet() .then(res => { this.mixinDatacomResData = res.result.data if (this.mixinDatacomResData.length === 0) { this.isLocal = false this.mixinDatacomErrorMessage = this.emptyText } else { this.isLocal = true } }) .catch(err => { this.mixinDatacomErrorMessage = err.message }) }, /** * 获取父元素实例 */ getForm(name = 'uniForms') { let parent = this.$parent let parentName = parent.$options.name while (parentName !== name) { parent = parent.$parent if (!parent) return false parentName = parent.$options.name } return parent }, change(e) { const values = e.detail.value let detail = { value: [], data: [] } const range = this.range.find(item => item[this.map.value] + '' === values) if (range) { detail = { value: range[this.map.value], data: range } } // TODO 兼容 vue2 this.$emit('input', detail.value) // // TOTO 兼容 vue3 this.$emit('update:modelValue', detail.value) this.$emit('change', { detail }) this.dataList = this.getDataList(detail.value) }, /** * 获取渲染的新数组 * @param {Object} value 选中内容 */ getDataList(value) { // 解除引用关系,破坏原引用关系,避免污染源数据 let dataList = JSON.parse(JSON.stringify(this.range)) let list = [] if (Array.isArray(value) && value.length) { value = value[0] } dataList.forEach((item, index) => { item.disabled = item.disable || item.disabled || false item.selected = value === item[this.map.value] list.push(item) }) return this.setRange(list) }, /** * 处理最大最小值 * @param {Object} list */ setRange(list) { let selectList = list.filter(item => item.selected) let min = Number(this.min) || 0 let max = Number(this.max) || '' list.forEach((item, index) => { this.setStyles(item, index) list[index] = item }) return list }, /** * 设置 class * @param {Object} item * @param {Object} index */ setStyles(item, index) { // 设置自定义样式 item.styleBackgroud = this.setStyleBackgroud(item) item.styleIcon = this.setStyleIcon(item) item.styleIconText = this.setStyleIconText(item) item.styleRightIcon = this.setStyleRightIcon(item) }, /** * 获取选中值 * @param {Object} range */ getSelectedValue(range) { return this.dataValue }, /** * 设置背景样式 */ setStyleBackgroud(item) { let styles = {} let selectedColor = this.selectedColor ? this.selectedColor : '#0f56d5' if (this.selectedColor) { if (this.mode !== 'list') { styles['border-color'] = item.selected ? selectedColor : '#DCDFE6' } if (this.mode === 'tag') { styles['background-color'] = item.selected ? selectedColor : '#f5f5f5' } } let classles = '' for (let i in styles) { classles += `${i}:${styles[i]};` } return classles }, setStyleIcon(item) { let styles = {} let classles = '' if (this.selectedColor) { let selectedColor = this.selectedColor ? this.selectedColor : '#0f56d5' styles['background-color'] = item.selected ? selectedColor : '#fff' styles['border-color'] = item.selected ? selectedColor : '#DCDFE6' if (!item.selected && item.disabled) { styles['background-color'] = '#F2F6FC' styles['border-color'] = item.selected ? selectedColor : '#DCDFE6' } } for (let i in styles) { classles += `${i}:${styles[i]};` } return classles }, setStyleIconText(item) { let styles = {} let classles = '' if (this.selectedColor) { let selectedColor = this.selectedColor ? this.selectedColor : '#0f56d5' if (this.mode === 'tag') { styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#333' } else { styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) : '#333' } if (!item.selected && item.disabled) { styles.color = '#999' } } for (let i in styles) { classles += `${i}:${styles[i]};` } return classles }, setStyleRightIcon(item) { let styles = {} let classles = '' if (this.mode === 'list') { styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6' } for (let i in styles) { classles += `${i}:${styles[i]};` } return classles } } } </script> <style lang="scss"> @mixin flex { /* #ifndef APP-NVUE */ display: flex; /* #endif */ } .zy-radio-is-checked.zy-radio-is-disable { opacity: 0.4; .zy-radio-radio__inner { border-color: #cccccc; background-color: #f5f5f5; } } .zy-radio-loading { @include flex; flex-direction: row; justify-content: center; align-items: center; height: 36px; padding-left: 10px; color: #999; } .zy-radio-checklist { position: relative; z-index: 0; flex: 1; .zy-radio-checklist-group { @include flex; flex-direction: row; flex-wrap: wrap; &.is-list { flex-direction: column; } .zy-radio-checklist-box { @include flex; flex-direction: row; align-items: center; position: relative; margin: 5px 0; margin-right: 25px; .hidden { position: absolute; opacity: 0; } // 文字样式 .zy-radio-checklist-content { @include flex; flex: 1; flex-direction: row; align-items: center; justify-content: space-between; .zy-radio-checklist-text { font-size: $uni-font-size-17; color: $uni-text-color; margin-left: 8px; line-height: $uni-font-size-17; } .checkobx__list { border-right-width: 1px; border-right-color: $uni-primary; border-right-style: solid; border-bottom-width: 1px; border-bottom-color: $uni-primary; border-bottom-style: solid; height: 12px; width: 6px; left: -5px; transform-origin: center; transform: rotate(45deg); opacity: 0; } } // 单选样式 .zy-radio-radio__inner { /* #ifndef APP-NVUE */ flex-shrink: 0; box-sizing: border-box; /* #endif */ position: relative; width: 22px; height: 22px; border: 1px solid $uni-border-color; border-radius: 50%; background-color: #fff; z-index: 1; } // 默认样式 &.is--default { // 禁用 &.zy-radio-is-disable { opacity: 0.4; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ .checkbox__inner { background-color: #f2f6fc; border-color: $uni-border-color; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ } .zy-radio-checklist-text { color: #999; } .zy-radio-radio__inner { border-color: #cccccc; background-color: #f5f5f5; } } // 选中 &.zy-radio-is-checked { .checkbox__inner { border-color: $uni-primary; background-color: $uni-primary; .checkbox__inner-icon { opacity: 1; transform: rotate(45deg); } } .zy-radio-radio__inner { border-color: $uni-primary; background-color: $uni-primary; } .zy-radio-checklist-text { color: $uni-primary; } // 选中禁用 &.zy-radio-is-disable { opacity: 0.4; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ .checkbox__inner { background-color: #f2f6fc; border-color: $uni-border-color; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ } .zy-radio-radio__inner { border-color: #cccccc; background-color: #f5f5f5; } .zy-radio-checklist-text { color: #333; } } } } // 按钮样式 &.is--button { margin-right: 10px; padding: 5px 10px; border: 1px $uni-border-color solid; border-radius: 3px; transition: border-color 0.2s; // 禁用 &.zy-radio-is-disable { opacity: 0.4; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ border: 1px #eee solid; opacity: $uni-mask-0_55; .checkbox__inner { background-color: #f2f6fc; border-color: $uni-border-color; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ } .zy-radio-checklist-text { color: #999; } } &.zy-radio-is-checked { /* #ifdef H5 */ cursor: not-allowed; /* #endif */ border: 1px #eee solid; opacity: $uni-mask-0_55; .checkbox__inner { background-color: #f2f6fc; border-color: $uni-border-color; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ } .zy-radio-checklist-text { color: #999; } } } // 标签样式 &.is--tag { margin-right: 10px; padding: 5px 10px; border: 1px $uni-border-color solid; border-radius: 3px; background-color: #f5f5f5; .zy-radio-checklist-text { margin: 0; color: #333; } // 禁用 &.zy-radio-is-disable { opacity: 0.4; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ opacity: $uni-mask-0_55; } &.zy-radio-is-checked { background-color: $uni-primary; border-color: $uni-primary; .zy-radio-checklist-text { color: #fff; } } } // 列表样式 &.is--list { /* #ifndef APP-NVUE */ display: flex; /* #endif */ padding: 10px 15px; padding-left: 0; margin: 0; &.zy-radio-is-list-border { border-top: 1px #eee solid; } // 禁用 &.zy-radio-is-disable { opacity: 0.4; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ .checkbox__inner { background-color: #f2f6fc; border-color: $uni-border-color; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ } .zy-radio-radio__inner { border-color: #cccccc; background-color: #f5f5f5; } .zy-radio-checklist-text { color: #333; } } &.zy-radio-is-checked { .checkbox__inner { border-color: $uni-primary; background-color: $uni-primary; .checkbox__inner-icon { opacity: 1; transform: rotate(45deg); } } .zy-radio-checklist-text { color: $uni-primary; } .zy-radio-checklist-content { .checkobx__list { opacity: 1; border-color: $uni-primary; } } .zy-radio-radio__inner { border-color: $uni-primary; background-color: $uni-primary; } // 选中禁用 &.zy-radio-is-disable { opacity: 0.4; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ .checkbox__inner { background-color: #f2f6fc; border-color: $uni-border-color; /* #ifdef H5 */ cursor: not-allowed; /* #endif */ } .zy-radio-checklist-text { color: #333; } .zy-radio-radio__inner { border-color: #cccccc; background-color: #f5f5f5; } } } } } } } .is-checked-zy-switch__icon { height: 100%; display: flex; align-items: center; justify-content: center; } </style> 优化当前组件,保留当前组件功能的前提下尽可能较少代码量
最新发布
06-11
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值