Bootstrap Table

关于bootstrap-table的初次使用，和遇到的问题记录（自己看的）

阅读更多关于关于bootstrap-table的初次使用，和遇到的问题记录（自己看的）

1.新的工作接触到了bootstrap-table，用于后台管理系统的开发，项目用到的东西比较多，前端接触的主要是thymeleaf模板和bootstrap-table加上lay-ui； 2.bootstrap-table主要遇到的问题：项目通过二次封装使用这个插件，一开始是有点摸不着头脑，因为没有文档，只能看着bt的文档对照着写。接下来说一说这几天遇到的问题，还有怎么解决的；　　2-1：表格初始化数据的问题。页面是用layuiAdmin的iframe版，bt数据通过url请求回来，设置各个表头的数据，然后在初始化。　　2-2：需要在表格的操作列绑定事件，看代码；主要是怎么传多个参数的问题，然后发现这样才行；（主要是\‘’ ‘\’ 这个写法，其他和单个是一样的） { title: '操作' , align: "center" , formatter: function (value, row, index) { var actions = []; actions.push( '<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="checkSingle(\'' + row.waybillId + '\',\''+row.unloadCost+'\',\''+row.transportCost

table表头固定

阅读更多关于 table表头固定

今天有个项目小优化，就是报表页面太长，需要加个固定的table头，方便操作人员浏览。因此就需要采用css样式来固定，在网上搜了很多，但都不太满足(要嘛需要自己写好多样式，要嘛就是固定的表头在鼠标滚动时，会出现晃动，或者thead与tbody中的tr错位)，尝试了很多，都快要放弃了(准备请教前端同学)，最后还好又找到了一个帖子，经过略微调试了一下，比较符合我的需求。代码简洁，无需写额外样式代码，并且表头能很好的固定。略微修改一下就可以应用到一个单独的html页面中。好了，废话不多说，直接贴代码，( 没有找到上传附件的地方 )如果觉得有用的同学,请复制存储为一个html文件即可。需要引入3个线上资源(jquery.min.js、bootstrap.min.js、bootstrap.css) <html> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" /> <script type="text/javascript" src="http://apps.bdimg

fastAdmin进阶

阅读更多关于 fastAdmin进阶

基本知识流程一栏链接 bootstrapTable fastadmin系统配置（符内置规则）： fastadmin默认的controller已实现的方法一张图解析fastadmin 的表格：了解fastadmin标准的控制器模块js的表格事件 fastadmin模态框（弹出框） fastadmin 表单组件（生成表单元素） fastadmin表单事件 fastadmin表单验证 fastadmin表单事件之验证(元素添加data-rule='规则' 且需要调用Form.events.validator($("form"));) 表单提交 fastadmin form fastadmin表单提交开发实例 : 来源： oschina 链接： https://my.oschina.net/u/4393327/blog/3628687

bootstrap editable 行内编辑

阅读更多关于 bootstrap editable 行内编辑

除了那些bootstrap/bootstrap table的js , css之外，要额外添加editable的文件： < link href= "../assets/css/bootstrap-editable/bootstrap-editable.css" rel= "stylesheet"> < script src= "../assets/js/bootstrap-editable/bootstrap-editable.js"> </ script> < script src= "../assets/js/bootstrap-editable/bootstrap-table-editable.js"> </ script> 然后写js $( '#tableId').bootstrapTable({ data:data[ 'data'], pagination: true, locale: "zh-US", pageSize: 5, singleSelect: false, clickToSelect: true, //一定要写！！可以选择：用于edittable sidePagination: "client", columns: [ { title: '姓名', field: 'name', align: 'center', valign: 'middle' },{

bootstrap-table-editable 实现表格行编辑

阅读更多关于 bootstrap-table-editable 实现表格行编辑

https://bootstrap-table.com http://github.com/vitalets/x-editable $("#table").bootstrapTable({ url: "", editable: true, columns: [ { title: that.columns['Operate'], field: '_', align: 'center', }, { title: that.columns['x1'], field: 'x1', align: 'center', editable: { canEdit: true, type: 'number', validate: function (v) { if (v.length > 9) { return "数字超出范围"; } } }, cellStyle: function (value, row, index) { if (value == undefined || value == "" || isNaN(value)) { return { css: { "background-color": "yellow" } } } else { return { css: { "background-color": "white" } } } }, formatter: function

bootstrap editable有默认值

阅读更多关于 bootstrap editable有默认值

function listEditor(data,productCode) { $( '#tab1' ).bootstrapTable( 'load' , data); $( '#tab1' ).bootstrapTable({ method : 'POST' , dataType : 'json' , contentType : "application/x-www-form-urlencoded" , cache : false , striped : true , //是否显示行间隔色 sidePagination : "client" , //分页方式：client客户端分页，server服务端分页（*） showColumns : true , pagination : true , minimumCountColumns :2, search : true , pageNumber :1, //初始化加载第一页，默认第一页 pageSize : 10, //每页的记录行数（*） idField : "productCode" , pageList : [10, 15, 20, 25], //可供选择的每页的行数（*） uniqueId : "id" , //每一行的唯一标识，一般为主键列 showExport : true , singleSelect : true ,

bootstrap利用bootstrap-editable和bootstrap-table-editable对动态列编辑状态控制

阅读更多关于 bootstrap利用bootstrap-editable和bootstrap-table-editable对动态列编辑状态控制

1、引入bootstrap-table-editable.js和bootstrap-editable.js 2、在列表字段属性加入下面代码（可编辑） editable: { type: 'select', title: '评标意见', disabled:true, source: [{ value: "0", text: "请选择" },{ value: "1", text: "首选" }, { value: "2", text: "备选" }] }, formatter : function(value,row, index) { if(row.calibrationSet==1){ return 1; }else if(value){ return value; }else { return 0; } } 　3、保存（利用jqury对其事件进行监听并保存） //监听段落行编辑进行保存 $("#bootstrap-table").on("editable-save.bs.table", function ( $el, field,row,oldValue) { //保存编辑 $.ajax({ type: "post", url: prefix+"/saveedit", data: row, dataType: 'JSON', success: function (data,

阅读更多关于 BootStrap Table

表格加载完成事件，表格行数据二层展开及缩起事件 var $tableFahuo = $('#tabFahuo' ); $tableFahuo.on( 'load-success.bs.table', function (data) { $.each(currExpandFahuoRows, function (v, n) { $tableFahuo.bootstrapTable( 'expandRow' , n); }); setTimeout( function () { $tableFahuo.bootstrapTable( 'scrollTo' , currFahuoScroll); }, 200 ); }).on( 'expand-row.bs.table', function (index, row, $detail) { if (currExpandFahuoRows.indexOf(row) < 0 ) { currExpandFahuoRows.push(row); } }).on( 'collapse-row.bs.table', function (index, row, $detail) { currExpandFahuoRows.forEach( function (item, index, arr) { if (item == row) {

bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

阅读更多关于 bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

用js控制bootstrapTable的高度有几种方法 1、 <table class="table-striped qiliangqifei-tab" id="qiliangqifei"> <thead> <tr> <th data-valign="middle">气费年月</th> <th>当期气量 </br> Sm<sup>3</sup></th> <th>当期气费 </br>（元）</th> </tr> </thead> <tbody> <tr> <td>2016-12</td> <td>100</td> <td>100</td> </tr> <tr> <td>2016-10</td> <td>100</td> <td>100</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function() { $('#qiliangqifei').bootstrapTable({ height: 260 }); }); </script> 2、 <table class="table-striped " data-toggle="table" data-height="350" id="qiliangqifei"> <thead> <tr> <th data-valign=

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

阅读更多关于 JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章：（1）JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案（2）https://www.cnblogs.com/landeanfen/p/5157595.html 备忘一下。来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4605971

订阅 Bootstrap Table