bootstrap使用(弹窗实现/弹出窗口数据不更新)

学习网址：

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

在星云直播项目中初次使用的bootstrap，在这之前也只是听说，并未实际使用

为了方便下次使用时查找，在此简单记录一下

bootstrap实现弹出窗口：

效果如图

channel_info_list.jsp页面

<input type="button" class="btn btn-primary" value="新增频道" 
       data-toggle="modal" 
       data-target="#addChannelInfoModal"  href="${ctx}/channelmanage/channel_info_add.jsp"/>

<!-- 频道信息新增 Modal start -->
<div class="modal hide fade" id="addChannelInfoModal"  tabindex="-1" role="dialog">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3>新增频道信息</h3>
</div>
<div class="modal-body"></div>
</div>
<!-- 频道信息新增 Modal end -->

channel_info_add.jsp页面

<form action="ChannelManageAction.a" method="post" enctype="multipart/form-data" 
class="form-horizontal" id="basic_validate" novalidate="novalidate">
        <div class="control-group">
             <label class="control-label">频道名称:</label>
             <div class="controls">
                 <input style="width:180px" type="text" name="channelName">
             </div>
         </div>
         <div class="control-group">
             <label class="control-label" for="s2">频道类型:</label>
             <div class="controls">
                         <select  style="width:200px;" name="channelType"  id="s2">
<app:dictselect dictType="1105"/>
</select>
             </div>
         </div>
         <div class="control-group">
             <label class="control-label">频道信号源:</label>
             <div class="controls">
                 <input style="width:180px" type="text" name="channelSignal" οnblur="checkChannelSignal('',this.value)">
                 <span id="showMsg" style="color: red"></span>
             </div>
         </div>
         <div class="control-group">
             <label class="control-label">频道logo地址:</label>
             <div class="controls">
                <input type="file" name="fileContent" id="fileContent">
             </div>
         </div>
         <div class="form-actions" style="padding-left: 180px;">
             <button type="submit" name="doAddChannelInfo" class="btn btn-primary">
             <i class="icon-ok icon-white"></i>保存</button>&nbsp;&nbsp;
             <button type="button" class="btn btn-primary cancelBtn">
             <i class="icon-remove icon-white"></i>取消</button>
         </div>
</form>

bootstrap解决弹出窗口中远程数据不更新问题

（比如：选中一条数据进入编辑界面，关闭窗口后，再选中另一条数据，数据不更新）

在列表页面的初始加载js中作如下处理：

window.οnlοad=function(){

$('body').on('hidden', '.modal', function () {
                $(this).removeData('modal');
         });

}

bootstrap实现的列表界面,表单验证以及特殊的操作提示信息 都可以参考模板

页面开头需要引入的js及css文件【关于bootstrap的文件可以从提供的模板包中找到，在这里不做重点介绍了】

<link rel="stylesheet" href="${ctx }/css/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx }/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="${ctx }/css/unicorn.main.css" />
<link rel="stylesheet" href="${ctx }/css/unicorn.blue.css" class="skin-color" />
     <!-- 日期控件样式 -->
     <link rel="stylesheet" href="${ctx }/css/datepicker.css" />
     <!-- jquery操作提示信息样式 -->
     <link rel="stylesheet" href="${ctx }/css/jquery.gritter.css" />
    <!-- 美化checkbox, radio, file样式 -->
     <link rel="stylesheet" href="${ctx }/css/uniform.css" />
     <!-- 美化select样式 -->
     <link rel="stylesheet" href="${ctx }/css/select2.css" />

  <!-- 通用js控件 -->
        <script src="${ctx }/js/jquery.min.js"></script>
        <script src="${ctx }/js/jquery.ui.custom.js"></script>
        <script src="${ctx }/js/bootstrap.min.js"></script>
        <script src="${ctx }/js/unicorn.js"></script>
        <!-- 日期控件 -->
        <script src="${ctx }/js/bootstrap-datepicker.js"></script>
        <!-- 美化checkbox, radio, file控件 -->
        <script src="${ctx }/js/jquery.uniform.js"></script>
        <!-- 美化select控件 -->
        <script src="${ctx }/js/select2.min.js"></script>
        <!-- jquery校验控件 -->
        <script src="${ctx }/js/jquery.validate.js"></script>
        <!-- jquery校验提示信息 -->
        <script src="${ctx }/js/jquery.messages.cn.js"></script>
        <!-- jquery操作提示信息 -->
        <script src="${ctx }/js/jquery.gritter.min.js"></script>
        <!--[if IE 6]><script src="js/ie6.min.js"></script><![endif]-->
        <!-- jquery.dataTables控件 -->
        <script src="${ctx }/js/jquery.dataTables.min.js"></script>

 <script>
            $(document).ready(function(){

// 美化checkbox, radio, file控件
                $('input[type=checkbox],input[type=radio],input[type=file]').uniform({
                    fileDefaultText: '未选择任何文件',
                    fileBtnText: '选择文件'
                });
                // 美化select控件
                $('select').select2();


                // 表格复选框全选
                $("th input:checkbox").click(function() {
                    var checkedStatus = this.checked;
                    var checkbox = $(this).parents('.widget-box').find('tr td:first-child input:checkbox');
                    checkbox.each(function() {
                        this.checked = checkedStatus;
                        if (checkedStatus == this.checked) {
                            $(this).closest('.checker > span').removeClass('checked');
                        }
                        if (this.checked) {
                            $(this).closest('.checker > span').addClass('checked');
                        }
                    });
                });


                // 为表格启用jquery.dataTables控件
                $('.data-table').dataTable({
                    "bPaginate": true, // 翻页功能
                    "bJQueryUI": true, // 是否应用jquery ui themeroller的风格
                    "bLengthChange": false, // 改变每页显示数据数量
                    "bFilter": false, // 过滤功能
                    "bSort": true, // 排序功能
                    "bInfo": false, // 页脚信息
                    "sPaginationType": "full_numbers", // 显示数字的翻页样式
                    "sDom": '<""l>t<"F"fp>',
                    "bAutoWidth": true, // 自适应宽度
                    "iDisplayLength": 10, // 设置每页显示的数据个数
                    "oLanguage": { // 设置提示信息国际化
                        "sUrl": "${ctx }/js/jquery.pager.cn.txt" //此处调用实现分页的效果
                    }
                });

});

 </script>