Java 下拉框多选、富文本【只列出关键部分】

来源：互联网发布：sql server 教材编辑：程序博客网时间：2024/06/07 00:27
代码块

jsp代码富文本使用TinyEditor、下拉框使用Bootstrap-Select 、DropDownBox[其中所需的js、css请自行下载]，例如：
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><!DOCTYPE html><html><head>    <meta charset="UTF-8"><!-- 富文本 -->    <link rel="stylesheet" href="static/desk/testyle.css"><!-- 多选框 -->  <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">  <link rel="stylesheet" href="static/Bootstrap-select/dist/css/bootstrap-select.css">  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>  <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>  <script src="static/Bootstrap-select/dist/js/bootstrap-select.js"></script></head><body>    <div>        <form action=" " name="Form" id="Form" method="post">    <div>        <table>             <tr>            <td >通知部门:</td>        <div>            <select id="receiveorglist" name="receiveorglist" class="selectpicker" multiple data-done-button="true">             <option value="1">1</option>             <option value="2">2</option>                <option value="3">3</option>                <option value="4">4</option>                <option value="5">5</option>            //也可以根据自己开发的实际情况 ，使用<c:forEach>遍历<option>的选项             </select>     </div>        </td>    </tr></table>    <table id="table_report">    <tr>        <td>通知内容:</td>        <!-- 富文本 -->        <td>        <textarea id="contentdetail"  name="contentdetail" style="width: 400px; height: 200px;" ></textarea>        </td>        </tr>    </table>        <table>            <tr>            <td ><a onclick="save();">保存</a>             //返回使用的处理机制是：返回上一级访问页面        <input type="button" name="button1" id="button1" value="返回" onclick="history.go(-1)"/>        </td>        </tr>        </table>    </div>    </form></div><!-- 多选框 --><script src="static/dropDownBox/js/jquery.multiselect.filter.js"></script><script src="static/dropDownBox/js/jquery.multiselect.filter.min.js"></script><script src="static/dropDownBox/js/jquery.multiselect.js"></script><script src="static/dropDownBox/js/jquery.multiselect.min.js"></script><!-- 富文本 --><script type="text/javascript" src="static/desk/tinyeditor.js"></script><script type="text/javascript">    //富文本new TINY.editor.edit('editor',{        id:'contentdetail',     // (必须)上面第二步中定义的textarea的id        width:584,     // (选填) 编辑器宽度        height:175,     // (选填) 编辑器高度        cssclass:'te',     // (选填) 编辑器的class，用来通过css控制样式        controlclass:'tecontrol',     // (选填) 编辑器上按钮的class        rowclass:'teheader',     // (选填) 编辑器按钮行的class        dividerclass:'tedivider',     // (选填) 编辑器按钮间分割线的样式        controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'],     // (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线，'n'代表按钮行间的分割线        footer:true,     // (选填) 是否显示编辑器底部        fonts:['Verdana','Arial','Georgia','Trebuchet MS'],      // (选填) 编辑器中可选择的字体        xhtml:true,     // (选填) 编辑器生成xhtml还是html标记        cssfile:'style.css',     // (选填) 要为编辑器附加的外部css文件        content:'starting content',     // (选填) 设置编辑器编辑区域中的初始内容        css:'body{background-color:#ccc}',     // (选填) 设置编辑器编辑区域背景        bodyid:'editor',     // (选填) 设置编辑区域ID        footerclass:'tefooter',     // (选填) 设置编辑器底部class        toggle:{text:'源代码',activetext:'可视化',cssclass:'toggle'},     // (选填) 设置源代码浏览切换文字，及切换按钮的class        resize:{cssclass:'resize'}     // (选填) 设置编辑器大小调整按钮的class    });});    //保存function save() {    //设置状态值    //富文本设置数据       $("#contentdetail").val('txtContent');    $("#subtype").value= 'subtype';    if($("#title").val()==''){        alert("请输入标题");        return false;    }   if($("#contentdetail").val()==''){        alert("请输入内容");        return false;    }     //加载textarea --富文本数据    editor.post();    $("#Form").submit();    }/* 下拉框 多选*/$(document).ready(function () {    var mySelect = $('#first-disabled2');    $('#special').on('click', function () {      mySelect.find('option:selected').prop('disabled', true);      mySelect.selectpicker('refresh');    });    $('#special2').on('click', function () {      mySelect.find('option:disabled').prop('disabled', false);      mySelect.selectpicker('refresh');    });  });</script></body></html>
阅读全文
0 0
Java 下拉框多选 、富文本 【只列出关键部分】

代码块

Java 下拉框多选、富文本【只列出关键部分】
