[TOC] ## 1.下拉框模糊匹配 ``` $(function(){ //启动Bootsrap-Select,初始化前必须已经有了option $(".selectpicker").selectpicker({ dropuAuto : false }); }) // 设置选中 $('.selectpicker').selectpicker('val', ''选中option的值); $("#id\_selector").selectpicker('refresh'); // 将下拉框的options动态更改后,重新初始化控件,也可以做默认初始化控件用控件下拉框选项选中后会有字体图标, // 依赖于bootstrap.css里的glyphicon配置,会引入字体文件,保证文件路径正确即可 ``` ## 2.日期时间插件 ``` jQuery(document).ready(function() { //初始化必须放在jquery页面加载完成执行函数里 $(".form\_datetime").datetimepicker({ language: "zh-CN", autoclose:!0, todayBtn: true, isRTL:App.isRTL(), format:"yyyy-mm-dd hh:ii:ss", pickerPosition:App.isRTL()?"bottom-right":"bottom-left" }); }); ``` ## 3.侧边栏菜单点击后仍然保留被选中的状态. 一.菜单连接的内容用ajax刷新页面局部避免整个页面刷新,那么菜单可以保持状态 二.用一个标识记录点击的哪个菜单,在刷新页面后标记该菜单被展开和选中状态,可以通过cookies或者url传参等来鉴别选中的菜单并保持其被选中 ## 4.模态框主动打开和关闭    ``` $('#example').modal('show'); $('#example').modal('hide'); ``` ## 5.表格宽度自适应 在table标签 或其父div中加入`table-responsive` 可以解决有些td中内容过长导致显示溢出自己所在的td框 ## 6.modal模态框中的`select2`插件的搜索框无法选中进行输入 一:将模态框的属性`tabindex="-1"`去掉 二:在JQ的ready事件中执行 ``` $.fn.modal.Constructor.prototype.enforceFocus = function () { }; ``` ## 7.modal模态框禁止点击空白处隐藏窗口 设置`div.modal  => data-backdrop="static" data-keyboard="false"`,或者在modal方法的option参数中设置 ## 8.嵌套模态框 二级模态框关闭导致一级模态框滚动条消失。 在主模态框div里加上 `style="overflow-y: auto;"` ## 9.`modal`除了指定特点的class来控制宽度外，也可以设置属性width ## 10.以上有部分问题。包括我们常用的一些样式仅在`bootstrap.css`是无法正常显示的，需要依赖`components.css`和`plugins.css`就可以解决.以上解决方案是在不依赖组件和插件样式时的解决方案. ## 11.树形结构 `bootstrap-treeview`是一款树形结构展示图,依赖于Jquery,点击父节点文案时默认没有展开效果,可以给其绑定点击事件,事件的执行部分来触发已有的展开事件. ``` $('#treeview_check_all_area').on('click','li',function(event){ console.log('dianji'); $(event.target).find(".glyphicon").eq(0).click(); }); ``` ## 12.如果有一个页面有多个模态框,上层关闭后可能会导致下层无法滚动: 在modal最外层的div里加上`style="overflow-y: auto;"`即可 ## 13.输入框和图片框在同一行，如验证码 同一个块级元素内的行内元素，可以使用class属性`inlne`