搜索词>>Bootstrap Table 耗时0.0600
  • bootstrap table插件使用说明demo

    bootstrap table插件使用说明demo该插件是基于bootstrap框架开发的一个table插件,功能强大实用性强<br /> 展示结果截图:<br /> <img alt="bootstrap table插件使用效果图" class="img-thumbnail" src="/assist/images/blog/6a731324-c558-4ca7-8e9a-08affc0a941c.png" style="height:561px; width:1117px" /><br /> 1.下载bootstrap table插件,<a href="https://github.com/wenzhixin/bootstrap-table" rel="nofollow" target="_blank">下载</a><br /> 2.导入插件相关的css和js文件,当然bootstrap框架的基本组件必须导入 <pre> <code class="language-html"><link rel="stylesheet" href="bootstrap3/plugins/bootstrap-table/dist/bootstrap-table.min.css"> <script src="bootstrap3/plugins/bootstrap-table/dist/bootstrap-table.js"></script> <script src="bootstrap3/plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script></code></pre> 3.body中添加一个table,给一个id,添加一个搜索的工具栏 <pre> <code class="language-html"><div class="search_bar form-inline" id="search_bar"> <span>著作:</span> <select class="form-control" id="search_copyright"> <option value="">全部</option> <option value="Original">原创</option> <option value="Reproduced">转载</option> <option value="Translation">翻译</option> </select> <span>状态:</span> <select class="form-control" id="search_status"> <option value="">全部</option> <option value="Normal">已发布</option> <option value="UnAudit">待审核</option> </select> <span>排序:</span> <select class="form-control" id="search_order"> <option value="createTime" title="创建时间排序">创时</option> <option value="updateTime" title="更新时间排序" selected="selected">更时</option> </select> <span>标题:</span> <input type="text" class="form-control" placeholder="输入博客标题" id="serach_title">&nbsp;<button class="btn btn-default" id="search_btn">查询</button>&nbsp; </div> <table id="table"></table></code></pre> 4.写js <pre> <code class="language-javascript">$(function(){     $('#table').bootstrapTable({         url:'manager/blog/list.json',         method:'get',         contentType:'application/json',         showColumns: true, //显示隐藏列           showRefresh: true,  //显示刷新按钮         toolbar:'#search_bar',         queryParams:queryPrams,          pagination: true,           pageSize: 10,          pageList:[10],          sidePagination: "server",         columns: [{             field: 'title',             title: '博客标题'         },{             field: 'authorName',             title: '作者'         },{             field:'copyright',             title:'版权',             formatter:function(value,row,index){                 var cp=value;                 if(value=='Reproduced'){                     cp='转载';                 }else if(value=='Translation'){                     cp='翻译';                 }else if(value=='Original'){                     cp='原创';                 }                 return cp;             },              width:50         },{             field: 'autoAuditDate',             title: '自动审核日期'         },{             field: 'status',             title: '状态',             formatter:function(value,row,index){                 var status=value;                 if(value=='Normal'){                     status='正常';                 }else if(value=='UnAudit'){                     status='待审核';                 }else if(value=='Refuse'){                     status='驳回';                 }else if(value=='AutoAudit'){                     status='自审核';                 }                 return status;             },             width:60         },{             field: 'updateTime',             title: '更新时间',             formatter:function(value,row,index){                 return $.timestamp2string(value,'yyyy-MM-dd hh:mm:ss');             },             width:170         },{             field: 'id',              title:'操作',             formatter:function(value,row,index){                 var p='<a class="btn btn-xs btn-default" title="预览博客" href="manager/blog/view/'+value+'.html" target="_blank">预</a>&nbsp;';                 var a='<button class="btn btn-xs btn-success" title="通过审核" onclick="audit('+value+')">审</button>&nbsp;';                 var auto='<button class="btn btn-xs btn-success" title="定时自动审核" onclick="auditAuto('+value+')">定</button>&nbsp;';                 var r='<button class="btn btn-xs btn-default" title="拒绝审核" onclick="auditCanncel('+value+')">驳</button>&nbsp;';                 return p+a+auto+r;             },             width:130         }]     }) //查询事件绑定     $('#search_btn').click(function(){         $("#table").bootstrapTable('refresh');     });     $('#search_status').change(function(){         $("#table").bootstrapTable('refresh');     });     $('#search_copyright').change(function(){         $("#table").bootstrapTable('refresh');     });     $('#search_order').change(function(){         $("#table").bootstrapTable('refresh');     });</code></pre> <br /> <br />  
  • bootstrap-table pageNumber无法获取值解决

    bootstrap-table pageNumber无法获取值解决一、问题描述bootstrap-table pageNumber无法获取值版本:1.11.0请求方式:Post二、解决办法将请求方式改为get即可解决。应该是版本的一个bug。后续版本如有有修复劳烦告知。谢谢
  • Bootstrap Table 多选以及获取多选值

    ​Bootstrap TableBootstrap Table 多选以及获取多选值实现本文主要讲解在bootstrap table组建使用过程中,配置多选和获取多选选中的值​Bootstrap TableBootstrap Table 多选以及获取多选值实现本文主要讲解在bootstrap table组建使用过程中,配置多选和获取多选选中的值。首先是配置Bootstrap Table 多选$('#tableId').bootstrapTable({ //****省略其他配置****** singleSelect:false,//是否单选,false表示多选;true标识只能单选 clickToSelect: true,//启用点击某行就选中某行 columns:[ {field: 'chk', checkbox: true},//注意这里的field尽量不用返回数据的字段名,否则后面获取选中值的时候会把该字段的值变为true或者false //*****其他字段省略**** ] })获取Bootstrap Table 多选选中值var selected = $('#tableId').bootstrapTable('getSelections'); //返回值为数据对象数组 if(selected&&selected.length>0){ //非空数组时候进行的操作 $.each(selected,function(index,item){ console.log(item); }) }else{ //空数组的操作 }Bootstrap Table 图像 小部件
  • Bootstrap Table pageList 配置不生效

    问题描述最近一个项目遇到Bootstrap Table pageList 配置不生效,配置多个选项后无法还是无法弹出选择问题描述最近一个项目遇到Bootstrap Table pageList 配置不生效,配置多个选项后无法还是无法弹出选择。问题解决我这边得原因是jQuery和bootstrap.js冲突了引用了两次版本,删除其中一个即可。
  • Bootstrap Table 列中 events 事件失效解决办法

    在使用bootstrap-table过程中,我们可能会遇到列属性events事件不能生效的问题,并会发现这个问题有时存在有时却又不存在,这是什么原因呢?其实造成events事件失效的原因非常简单,我们只需查看bootstrap-table.在使用bootstrap-table过程中,我们可能会遇到列属性events事件不能生效的问题,并会发现这个问题有时存在有时却又不存在,这是什么原因呢?其实造成events事件失效的原因非常简单,我们只需查看bootstrap-table.js源码,并找到events处理代码段:         $.each(this.header.events, function (i, events) {             if (!events) {                 return;             }             // fix bug, if events is defined with namespace             if (typeof events === 'string') {                 events = calculateObjectValue(null, events);             }   //注意,造成events事件失效的原因就在于这两句代码,可以看出,bootsrap-table定位events事件所在列是通过查找列属性field 在列属性数组fields中的位置来确定的,也就是说,当列属性中存在相同的field值时,得到的索引值fieldIndex 永远是第一个field值出现的地方,因此就导致除第一个field值外其他相同field值定位错误,进而导致events事件失效。也就说列表中的    field字段有重复的导致事件失效了,修改列名即可。
  • bootstrap table跨域问题完美解决

    bootstrap table跨域问题完美解决<pre> <code class="language-javascript">$('#table').bootstrapTable({ columns: [ { field:'id', title:'序号' },{ field: 'name', title: '名称' }], pagination:true, pageList:[10], sidePagination:'server', url:'http://xxx/query.do', contentType: "application/x-www-form-urlencoded",/**支持跨域**/ method:'GET', queryParams:queryParams, responseHandler:function(res){ if(res){ var data={"total":res.data.total,"rows":res.data.rows}; return data; } return res.data; } });</code></pre>  
  • Bootstrap Table 后端分页详解防坑

    Bootstrap Table 后端分页详解防坑$('#tableId').bootstrapTable({ method:'post',//请求方法 url:'',//后台地址 pagination: true,//是否分页,默认fBootstrap Table 后端分页详解防坑$('#tableId').bootstrapTable({ method:'post',//请求方法 url:'',//后台地址 pagination: true,//是否分页,默认false,必须配置 sidePagination: "server",//必须 否则返回得数据可能不会显示到表里面(坑了我很久) pageSize: 10,//分页大小设置 dataType:"json",//请求数据类型 contentType:"application/json;charset=UTF-8",//POST JSON数据必须指定 clickToSelect: true,//点击选中复选框 responseHandler: function (res) { //最终格式为 return {"rows":[],"total":0} },//返回数据自定义处理 queryParams : function(params) { var pageNum=0; console.log(params.offset); console.log(params.limit); if(params.offset>0) { pageNum=params.offset/params.limit; if(pageNum==0) pageNum=1; } return JSON.stringify({ "pageNum": pageNum+1, "pageSize": params.limit, //其他参数 }); }, columns:[ { field: 'id', title: 'ID', checkbox:true, },{ field: 'opField', title: '客户名称', formatter:function (value,row,index) { let clients=row.orderBodies; let names=new Array(); $.each(clients,function (index,item) { names.push(item.enterpriseName); }); return names.join("、"); } }, ], });代码段 小部件
  • Bootstrap tab 组件增强插件

    Bootstrap-tab 组件增强插件效果图​​bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能:tab页初始化关闭tab页新增tab显示tab页获取tab页ID使用讲Bootstrap-tab 组件增强插件效果图​​bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能:tab页初始化关闭tab页新增tab显示tab页获取tab页ID使用讲解Step1 :引入样式<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!--bootstrap-tab样式--> <link rel="stylesheet" href="../css/bootstrap-tab.css"> Step2:引入脚本<script src="jquery/jquery-1.8.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="../js/bootstrap-tab.js"></script> Step3:使用<div id="tabContainer"></div> <script> $("#tabContainer").tabs({ data: [{ id: 'home', text: '百度一下', url: "tab_first.html", closeable: true }, { id: 'admineap', text: 'AdminEAP', url: "tab_second.html" }, { id: 'edit', text: '编辑人员', url: "tab_content.html", closeable: true }], showIndex: 1, loadAll: false }) $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_content.html'}) </script>参数和方法说明参数说明参数名称默认值可选值说明datatab页数据来源(对象列表),包含id,text,url,closeable属性id必须,单个tab的idtext必须,单个tab页的标题url必须,单个tab页的内容urlcloseableFalsetrue,false单个tab页是否可关闭showIndex0默认显示页的索引loadAllTruetrue,falsetrue=一次全部加在页面,false=只加在showIndex指定的页面,其他点击时加载,提高响应速度方法说明方法名称参数参数说明方法说明inittab组件初始化入口方法builderdatatab数据构建tab页的主方法loadData加载tab页的内容,根据loadAll即时加载或者点击时加载addTabobj单个tab的数据增加一个tab页showTabtabIdtab的id根据id显示tab页getCurrentTabId获取当前活动tab页的IDbootstrap-tab.js 源码:$title(bootstrap-tab.js) /** * Bootstrap tab组件封装 * @create 2019/08/18 * */ (function ($, window, document, undefined) { 'use strict'; var pluginName = 'tabs'; //入口方法 $.fn[pluginName] = function (options) { var self = $(this); if (this == null) return null; var data = this.data(pluginName); if (!data) { data = new BaseTab(this, options); self.data(pluginName, data); } return data; }; var BaseTab = function (element, options) { this.$element = $(element); this.options = $.extend(true, {}, this.default, options); this.init(); } //默认配置 BaseTab.prototype.default = { showIndex: 0, //默认显示页索引 loadAll: true,//true=一次全部加在页面,false=只加在showIndex指定的页面,其他点击时加载,提高响应速度 } //结构模板 BaseTab.prototype.template = { ul_nav: '<ul id="myTab" class="nav nav-tabs"></ul>', ul_li: '<li><a href="#{0}" data-toggle="tab"><span>{1}</span></a></li>', ul_li_close: '<i class="fa fa-remove closeable" title="关闭"></i>', div_content: '<div class="tab-content" style="height: 100%;"></div>', div_content_panel: '<div class="tab-pane fade" style="height: 100%;" id="{0}"></div>' } //初始化 BaseTab.prototype.init = function () { if (!this.options.data || this.options.data.length == 0) { console.error("请指定tab页数据"); return; } //当前显示的显示的页面是否超出索引 if (this.options.showIndex < 0 || this.options.showIndex > this.options.data.length - 1) { console.error("showIndex超出了范围"); //指定为默认值 this.options.showIndex = this.default.showIndex; } //清除原来的tab页 this.$element.html(""); this.builder(this.options.data); } //使用模板搭建页面结构 BaseTab.prototype.builder = function (data) { var ul_nav = $(this.template.ul_nav); var div_content = $(this.template.div_content); for (var i = 0; i < data.length; i++) { //nav-tab var ul_li = $(this.template.ul_li.format(data[i].id, data[i].text)); //如果可关闭,插入关闭图标,并绑定关闭事件 if (data[i].closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(" "); } ul_nav.append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(data[i].id)); div_content.append(div_content_panel); } this.$element.css("height","100%"); this.$element.append(ul_nav); this.$element.append(div_content); this.loadData(); this.$element.find(".nav-tabs li:eq(" + this.options.showIndex + ") a").tab("show"); } BaseTab.prototype.loadData = function () { var self = this; //tab点击即加载事件 //设置一个值,记录每个tab页是否加载过 this.stateObj = {}; var data = this.options.data; //如果是当前页或者配置了一次性全部加载,否则点击tab页时加载 for (var i = 0; i < data.length; i++) { if (this.options.loadAll || this.options.showIndex == i) { if (data[i].url) { // $("#" + data[i].id).load(data[i].url,data[i].param); $("#" + data[i].id).append('<iframe src="'+data[i].url+'" width="100%" height="100%" frameborder="0"></iframe>') this.stateObj[data[i].id] = true; } else { console.error("id=" + data[i].id + "的tab页未指定url"); this.stateObj[data[i].id] = false; } } else { this.stateObj[data[i].id] = false; (function (id, url,paramter) { self.$element.find(".nav-tabs a[href='#" + id + "']").on('show.bs.tab', function () { if (!self.stateObj[id]) { // $("#" + id).load(url,paramter); $("#" + id).append('<iframe src="'+data[i].url+'" width="100%" height="100%" frameborder="0"></iframe>') self.stateObj[id] = true; } }); }(data[i].id, data[i].url, data[i].paramter)) } } //关闭tab事件 this.$element.find(".nav-tabs li a i.closeable").each(function (index, item) { $(item).click(function () { var href = $(this).parents("a").attr("href").substring(1); if(self.getCurrentTabId()==href){ self.$element.find(".nav-tabs li:eq(0) a").tab("show"); } $(this).parents("li").remove(); $("#" + href).remove(); }) }); } //新增一个tab页 BaseTab.prototype.addTab=function (obj) { var self=this; let isExist=false; this.$element.find(".nav-tabs:eq(0)").find('a').each(function (index,item) { let usedId=$(item).attr("href").substring(1); console.log(usedId+"="+obj.id); if (usedId==obj.id){ isExist=true; return false; } }) if (isExist == true){ this.showTab(obj.id); return false; } //nav-tab var ul_li = $(this.template.ul_li.format(obj.id, obj.text)); //如果可关闭,插入关闭图标,并绑定关闭事件 if (obj.closeable) { var ul_li_close = $(this.template.ul_li_close); ul_li.find("a").append(ul_li_close); ul_li.find("a").append(" "); } this.$element.find(".nav-tabs:eq(0)").append(ul_li); //div-content var div_content_panel = $(this.template.div_content_panel.format(obj.id)); this.$element.find(".tab-content:eq(0)").append(div_content_panel); // $("#" + obj.id).load(obj.url,obj.paramter); $("#" + obj.id).append('<iframe src="'+obj.url+'" width="100%" height="100%" frameborder="0"></iframe>') this.stateObj[obj.id] = true; if(obj.closeable){ this.$element.find(".nav-tabs li a[href='#" + obj.id + "'] i.closeable").click(function () { var href = $(this).parents("a").attr("href").substring(1); if(self.getCurrentTabId()==href){ self.$element.find(".nav-tabs li:eq(0) a").tab("show"); } $(this).parents("li").remove(); $("#" + href).remove(); }) } this.$element.find(".nav-tabs a[href='#" + obj.id + "']").tab("show"); } //根据id获取活动也标签名 BaseTab.prototype.find=function (tabId) { return this.$element.find(".nav-tabs li a[href='#" + tabId + "']").text(); } // 删除活动页 BaseTab.prototype.remove=function (tabId) { var self=this; $("#" + tabId).remove(); this.$element.find(".nav-tabs li a[href='#" + tabId + "']").parents("li").remove(); } // 重新加载页面 BaseTab.prototype.reload=function (obj) { var self=this; if(self.find(obj.id)!=null){ $("#" + obj.id).remove(); this.$element.find(".nav-tabs li a[href='#" + obj.id + "']").parents("li").remove(); self.addTab(obj); }else{ self.addTab(obj); } } //根据id设置活动tab页 BaseTab.prototype.showTab=function (tabId) { this.$element.find(".nav-tabs li a[href='#" + tabId + "']").tab("show"); } //获取当前活动tab页的ID BaseTab.prototype.getCurrentTabId=function () { var href=this.$element.find(".nav-tabs li.active a").attr("href"); href=href.substring(1); return href; } String.prototype.format = function () { if (arguments.length == 0) return this; for (var s = this, i = 0; i < arguments.length; i++) s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]); return s; }; })(jQuery, window, document)  代码段 小部件
  • bootstrap image viewer 图片放大查看

    bootstrap image viewer 图片放大查看bootstrap image viewer 图片放大查看
  • Bootstrap Tab基础使用

    Bootstrap Tab基础使用,首先是引入必要的css和js,这里暂时忽略核心代码:<ul class="nav nav-tabs">l; <li class="active">l;Bootstrap Tab基础使用,首先是引入必要的css和js,这里暂时忽略核心代码:<ul class="nav nav-tabs"> <li class="active"> <a href="#clientLinkmanTabContent" data-toggle="tab"> 联系人 </a> </li> <li> <a href="#clientFollowTabContent" data-toggle="tab"> 跟进记录 </a> </li> <li> <a href="#clientOrderTabContent" data-toggle="tab"> 业务记录 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade in active" id="clientLinkmanTabContent"> 1 </div> <div class="tab-pane fade" id="clientFollowTabContent"> 2 </div> <div class="tab-pane fade" id="clientOrderTabContent"> 3 </div> </div>效果图:​​ 图像 小部件