本文目录
- JS组件Bootstrap Table布局详解
- bootstrap 可编辑表格，怎么绑定下拉框
- bootstrap table 获取数据里面的id可以重新请求数据展
- bootstrap table怎么选择多行
- 用js创建的可编辑的bootstrap表格
- js如何实现点击编辑按钮，前端table表格行内指定td可修改（table是动态生成的）
- bootstrap行内编辑的树形下拉菜单怎么做
JS组件Bootstrap Table布局详解
Bootstrap
提供了一个清晰的创建表格的布局。下表列出了
Bootstrap
支持的一些表格元素：
表格类
下表样式可用于表格中：
《tr》,
《th》
和
《td》
类
下表的类可用于表格的行或者单元格：
基本的表格
如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加
class
.table，如下面实例所示：
《div
class=“row“》
《table
class=“table“》
《caption
class=“text-center“》基本表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
可选的表格类
除了基本的表格标记和
.table
class，还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。
条纹表格
通过添加
.table-striped
class，您将在
《tbody》
内的行上看到条纹，如下面的实例所示：
《div
class=“row“》
《table
class=“table
table-striped“》
《caption
class=“text-center“》条纹表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《tr》
《td》No.3《/td》
《td》苏州《/td》
《/tr》
《tr》
《td》No.4《/td》
《td》南京《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
边框表格
通过添加
.table-bordered
class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：
《div
class=“row“》
《table
class=“table
table-bordered“》
《caption
class=“text-center“》边框表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《tr》
《td》No.3《/td》
《td》苏州《/td》
《/tr》
《tr》
《td》No.4《/td》
《td》南京《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
悬停表格
通过添加
.table-hover
class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：
《div
class=“row“》
《table
class=“table
table-hover“》
《caption
class=“text-center“》悬停表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《tr》
《td》No.3《/td》
《td》苏州《/td》
《/tr》
《tr》
《td》No.4《/td》
《td》南京《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
精简表格
通过添加
.table-condensed
class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。
《div
class=“row“》
《table
class=“table
table-condensed“》
《caption
class=“text-center“》精简表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《tr》
《td》No.3《/td》
《td》苏州《/td》
《/tr》
《tr》
《td》No.4《/td》
《td》南京《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。
这些类可以用到《tr》、《td》、《th》中，如下面实例所示：
《div
class=“row“》
《table
class=“table“》
《caption
class=“text-center“》上下文表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr
class=“active“》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr
class=“success“》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《tr
class=“warning“》
《td》No.3《/td》
《td》苏州《/td》
《/tr》
《tr
class=“danger“》
《td》No.4《/td》
《td》南京《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
响应式表格
通过把任意的
.table
包在
.table-responsive
class
内，您可以让表格水平滚动以适应小型设备（小于
768px）。当在大于
768px
宽的大型设备上查看时，您将看不到任何的差别。
《div
class=“table-responsive“》
《table
class=“table“》
《caption
class=“text-center“》响应式表格布局《/caption》
《thead》
《tr》
《th》编号《/th》
《th》城市《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》No.1《/td》
《td》北京《/td》
《/tr》
《tr》
《td》No.2《/td》
《td》上海《/td》
《/tr》
《tr》
《td》No.3《/td》
《td》苏州《/td》
《/tr》
《tr》
《td》No.4《/td》
《td》南京《/td》
《/tr》
《/tbody》
《/table》
《/div》
显示效果：
如果还想继续学习的话大家可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程
以上就是本文的全部内容，希望能够帮助大家更好的学习JS表格组件神器bootstrap
table。
bootstrap 可编辑表格，怎么绑定下拉框
首先,
你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table. html在这不过多说明.
既然看这篇文章, 肯定都能够理解. 然后现在就把bootstrap中的table来详细说明一下. 基础的table如下:
下面了解一下bootstrap中table, 没有什么大道理可以讲解. 唯有一点, 通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架, 请看系列经验第一篇.
在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式. 你立刻发现, 界面瞬间好看多了.
说明一下除了必要的.table之外, 还有很多可选的class. 不同的可选class. 是可以联合使用的.
1.我们常用的就有边框的table. 只需要使用.table-bordered 查看效果图.
2.斑马线, 也就是隔行相同颜色的一个样式. 使用.table-striped样式.
注意点有2个:
(1)斑马线是对tbody中的行起作用
(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的.
3.鼠标悬停在行上, 改变行的背景颜色. 使用.table-hover样式.
注意: 这个需要多行的时候, 这种效果更加明显.
4.让表格更加紧凑的样式.table-condensed, 它是让表格单元格中的内部（padding）减半.展现更多的内容, 和更多的显示内容.
其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式. 每个样式都是一种提醒方式. 这些方式也可以放到table中. 只需要使用class即可.
上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的. 下面的举例说明.
注意点: 在使用这个样式的时候不能使用.table-striped的样式, 会出现不能正常显示的问题.
还有就是现在比较流行的响应式的table. 只需要在table包含在.table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失.
10
动手去尝试, 你发现学习bootstrap也就是这么简单.祝你更快的学会这个框架.
bootstrap table 获取数据里面的id可以重新请求数据展
项目中使用BootStrap editTable 进行行内编辑，编辑后并不实时的修改某列的值，而是在所有需要修改的列修改后，点击后面的【确认投资】按钮，一次性保存所修改的列。
由于【确认投资】是页面第一次初始化后出现的，而这时需要修改的列是没有值的，对列进行编辑后，点击按钮是不能获取到编辑后的值。
经过学习Bootstrap editTable 和 bootstarp table的API,找到了解决方案。
方法/步骤
1
引入bootstarp edittable 的 js，css 文件：
《link href=“${basePath}/STATIC/plugins/bootstrap3-editable/css/bootstrap-editable.css“ rel=“stylesheet“》
《script src=“${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-table-editable.js“》《/script》
《script src=“${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-editable.js“》《/script》
注意：bootstrap-table-editable.js 不属于 bootstrap3-editable 里面，是第三方或个人扩展的，可以从网上下载。
2
特定的列进行行内编辑：
field: ’autualFinanceAmount’,
title: ’实际融资金额（万元）’,
width: 160,
align: ’center’,
formatter:function(value,row,index){
if(value == null || value == ’’){
return “-“;
}
return value;
},
editable: {
type: ’text’,
title: ’实际融资金额’,
validate: function (v) {
if (!v) return ’实际融资金额不能为空’;
//正则校验输入格式：最多两位小数。
var patrn=/^(\d*\.\d{1,2}|0\.\d|\d*)$/;
if(!patrn.test(v)){
return ’输入格式：最多两位小数’;
}
}
}
3
当某列编辑完成后，需要对当前列所在的行进行修改操作：
$(“#grid“).bootstrapTable({
url:’’,
……
…… //其他属性
columns:[{
field:’rowId’,
title:’序号’,
width:30,
align: ’center’,
formatter:function(value,row,index){
row.rowId = index;
return index+1;
}
…… //其他列
}],
onEditableSave: function (field, row, oldValue, $el) {
$table = $(’#grid’).bootstrapTable({});
$table.bootstrapTable(’updateRow’, {index: row.rowId, row: row});
}
注意：黑色粗体字就是新增的代码，表示在列编辑完成后，对当前列所在的行进行修改。
index 表示该行所在的索引。由于onEditableSave函数的参数中没有index，只能自己特殊处理了。看到在columns属性中，有一个field:’rowId’就是自己处理的，rowId赋给row。
4
如果你的列中有
formatter:function(value,row,index){} 函数，
在onEditableSave 方法执行完成后，该函数会重新执行，这样就会把修改后的列的值重新拿到进行处理。
bootstrap table怎么选择多行
以下是JS代码$(’#tb_departments’).bootstrapTable({
url: MNG_DOMAIN + “/admin/v1/role/page/query.do“, //请求后台的URL（*）
classes: “table table-hover“,
dataType: “json“,
method: ’post’, //请求方式（*）
toolbar: ’#toolbar’, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: “desc“, //排序方式
queryParams: queryParams,//传递参数（*）
sidePagination: “server“, //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: “roleNo“, //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
responseHandler: handel,
idField: “roleNo“,
columns: [{
checkbox: true
}, {
field: ’roleNo’,
title: ’角色编号’,
sorttable: true
}, {
field: “roleNm“,
title: “角色名称“,
sorttable: true
}],
silent: true, //刷新事件必须设置
formatLoadingMessage: function () {
return “请稍等，正在加载中...“;
},
formatNoMatches: function () { //没有匹配的结果
return ’无符合条件的记录’;
},
onLoadError: function (data) {
$(’#reportTable’).bootstrapTable(’removeAll’);
}
});
用js创建的可编辑的bootstrap表格
之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的朋友可以移步JS组件系列——表格组件神器：bootstrap table。
一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：
根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。
x-editable开源地址：
《link href=“/Content/bootstrap/css/bootstrap.min.css“ rel=“stylesheet“ /》
《link href=“~/Content/bootstrap3-editable/css/bootstrap-editable.css“ rel=“stylesheet“ /》
《script src=“/Scripts/jquery-1.9.1.min.js“》《/script》
《script src=“/Content/bootstrap/js/bootstrap.min.js“》《/script》
《script src=“~/Content/bootstrap3-editable/js/bootstrap-editable.js“》《/script》
页面元素
复制代码代码如下:
《a href=“#“ id=“username“ data-type=“text“ data-title=“用户名“》用户名《/a》
js初始化
$(function () {
$(’#username’).editable();
});
js如何实现点击编辑按钮，前端table表格行内指定td可修改（table是动态生成的）
function ready() { var url = base_path+“console/cfg/getBaseLayers/“+configId; $.ajax({ url:url, type:“get“, dataType:“json“, success:function (result) { //生成之前先清空tr,防止AJAX异步加载重复生成 $(“#lot tr“).remove(); var length = result.length; for (var i=0;i《length;i++){ var name = result[i].name; //服务名称 var alias = result[i].alias;//服务别名 var type = result[i].type;//服务类型 var year = result[i].year;//年份 var url = result[i].url;//服务地址 var visible = result[i].visible;//是否可见 var id = result[i].id;//id serviceIdArray[i] = id;//此处将id塞给serviceIdArray，用于判断是否添加。 var str = ““; if (visible==true){ //生成tr str += ’《tr id = “’; str += id; str += ’“’; str += ’ class=“lot_box“》 《td》’; str += i+1; str += ’《/td》 《td》’; str += name; str += ’《/td》 《td》’; str += alias; str += ’《/td》 《td》’; str += type; str += ’《/td》 《td》’; str += year; str += ’《/td》 《td》’; str += url; str += ’《/td》 《td》’; str += ’《input id=“’; str += id; str += ’“’; str += ’type=“checkbox“ checked=“true“ onchange=“modifyService(this.id);“/》’; str += ’《/td》 《td》 《input id=“’; str += id; str += ’“’; str += ’type=“button“ value=“编辑“ onclick=“editTd(this.id)“/》’; str += ’《/td》 《td》’; str += ’《button class=“rosy“ id=“’; str += id; str += ’“’; str += ’ onclick=“deleteService(this.id);“》’; str += ’《img src=“static/img/del14.png“》《/button》’; str += ’《/td》 《/tr》’;
}else { //生成tr str += ’《tr id = “’; str += id; str += ’“’; str += ’ class=“lot_box“》 《td》’; str += i+1; str += ’《/td》 《td》’; str += name; str += ’《/td》 《td》’; str += alias; str += ’《/td》 《td》’; str += type; str += ’《/td》 《td》’; str += year; str += ’《/td》 《td》’; str += url; str += ’《/td》 《td》’; str += ’《input id=“’; str += id; str += ’“’; str += ’type=“checkbox“ onchange=“modifyService(this.id);“/》’; str += ’《/td》 《td》 《input id=“’; str += id; str += ’“’; str += ’type=“button“ value=“编辑“ onclick=“editTd(this.id)“/》’; str += ’《/td》 《td》’; str += ’《button class=“rosy“ id=“’; str += id; str += ’“’; str += ’ onclick=“deleteService(this.id);“》’; str += ’《img src=“static/img/del14.png“》《/button》’; str += ’《/td》 《/tr》’;
} var $tr = $(str); $(“#lot“).append($tr);
}
}
});
}
2）
//修改table行内元素(td)function editTd(id) { //选中编辑按钮的时候,把这行指定的几个td变成文本框 var b = $(“input[type=’button’][id=’“+id+“’]“).parent(); //td var a = b.siblings(); //td的兄弟节点 if(a.children.length===0){ a.innerHTML=“《input type=’text’ value=’“+a.innerText+“’/》“;
}
if(a.children.length===0){ a.innerHTML=“《input type=’text’ value=’“+a.innerText+“’/》“;
}
if(a.children.length===0){ a.innerHTML=“《input type=’text’ value=’“+a.innerText+“’/》“;
} //将编辑改成 保存和取消两个按钮 b.innerHTML=“《input id=’“+id+“’ type=’button’ onclick=’saveEditTd(this.id);’ value=’保存’/》《input type=’button’ onclick=’resertEditTd();’ value=’取消’/》“;
//以下注掉的都是在网上找的参考。 /*alert(a.getText()); var $this = $(this).index(); alert($this);*/ /*$(’input[type=“button“]’).on(’click’, function(){ var $this = $(this).parent().parent();//tr ready(); });*/ /*var $ = function(node) { return typeof node == “string“ ? document.getElementById(node) : node; } var $1 = function(node, parent){ var nd = document.createElement(node); if(parent) parent.appendChild(nd); return nd; } /!** 绑定事件流 *!/ var bind = function(obj, eventName, funcionName){ if(obj.addEventListener){ obj.addEventListener(eventName, funcionName,false); }else if(obj.attachEvent) { obj.attachEvent(“on“ + eventName, funcionName); }else{ obj[“on“ + eventName] = funcionName; } }; var fulltable = function(tbody, data){ var pd = data.data; var column = data.column; for(var i=0, len=data.rows; i《len; i++){ var tr = $1(“tr“, tbody); var cd = pd[i]; for(var j=0,jlen=column.length; j《jlen; j++){ var td = $1(“td“, tr); td.innerHTML = cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了 } } } var littlehow_edit_table = function(tbody, ev){ this.tbody = $(tbody); this.event = ev ? ev : “click“;//默认为单机事件 this.init = function(data) {//data可以是undefined if(data) { fulltable(this.tbody, data); } //调用可编辑 this.edit(); } this.edit = function(){ var tds = this.tbody.getElementsByTagName(“td“); for(var i=0,len=tds.length; i《len; i++){ bind(tds[i], this.event, this.click); } } this.click = function(){ //alert(this.children.length); if(this.children.length 》 0) return; var v = this.innerHTML; this.innerHTML = ““; var input = $1(“input“, this); input.type = “text“; input.value = v; input.focus();//光标聚集 bind(input, “blur“, blur); } var blur = function(){ var v = this.value; this.parentNode.innerHTML = v; } } window.$$ = function(id, ev){ return new littlehow_edit_table(id, ev); };*/ /*$(’.editable’).handleTable({ “handleFirst“ : true, “cancel“ : “ 《span class=’glyphicon glyphicon-remove’》《/span》 “, “edit“ : “ 《span class=’glyphicon glyphicon-edit’》《/span》 “, “add“ : “ 《span class=’glyphicon glyphicon-plus’》《/span》 “, “save“ : “ 《span class=’glyphicon glyphicon-saved’》《/span》 “, “confirm“ : “ 《span class=’glyphicon glyphicon-ok’》《/span》 “, “operatePos“ : -1, “editableCols“ : [2,3,4], “order“: [“add“,“edit“], “saveCallback“ : function(data, isSuccess) { //这里可以写ajax内容，用于保存编辑后的内容 //data: 返回的数据 //isSucess: 方法，用于保存数据成功后，将可编辑状态变为不可编辑状态 var flag = true; //ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态） if(flag) { isSuccess(); alert(data + “ 保存成功“); } else { alert(data + “ 保存失败“); } return true; }, “addCallback“ : function(data,isSuccess) { var flag = true; if(flag) { isSuccess(); alert(data + “ 增加成功“); } else { alert(data + “ 增加失败“); } }, “delCallback“ : function(isSuccess) { var flag = true; if(flag) { isSuccess(); alert(“删除成功“); } else { alert(“删除失败“); } } });*/ /*//dom创建文本框 var input = document.createElement(“input“); input.type=“text“ ; //得到当前的单元格 var currentCell ; function editCell(event) { if(event==null) { currentCell=window.event.srcElement; } else { currentCell=event.target; } //根据Dimmacro 的建议修定下面的bug 非常感谢 if(currentCell.tagName==“TD“){ //用单元格的值来填充文本框的值 input.value=currentCell.innerHTML; //当文本框丢失焦点时调用last input.onblur=last; input.ondblclick=last; currentCell.innerHTML=““; //把文本框加到当前单元格上. currentCell.appendChild(input); //根据liu_binq63 的建议修定下面的bug 非常感谢 input.focus(); } } function last() { //充文本框的值给当前单元格 currentCell.innerHTML = input.value; } //最后为表格绑定处理方法. document.getElementById(“table“).ondblclick=editCell;*/ /*var ttr = $(this).val()==“编辑“?“确定“:“编辑“; $(this).val(ttr); // 按钮被点击后，在“编辑”和“确定”之间切换 $(this).parent().siblings(“td“).each(function() { // 获取当前行的其他单元格 var obj_text = $(this).find(“input:text“); // 判断单元格下是否有文本框 if(!obj_text.length) // 如果没有文本框，则添加文本框使之可以编辑 $(this).html(“《input type=’text’ value=’“+$(this).text()+“’》“); else // 如果已经存在文本框，则将其显示为文本框修改的值 $(this).html(obj_text.val()); });*/ /*$(’input[type=“button“]’).on(’click’, function(){ var $this = $(this); var $td_arr = $this.parent().html(’保存’).prevAll(’td’); $.each($td_arr, function(){ var $td = $(this); $td.html(’《input type=“text“ value=“’+$td.html()+’“》’); }); });*/}
3）
//取消editTd编辑function resertEditTd() { ready(); //此方法是自己写的，局部刷新页面，重新加载数据
}
//保存editTd编辑function saveEditTd(id) { var a = $(“input[type=’button’][id=’“+id+“’]“).parent().siblings(); //td的兄弟节点 var td_name = a.children.value; //服务名称 var td_alias = a.children.value; //服务别名 var td_type = a.children.value; //服务类型 var url = base_path+“console/cfg/saveEditTd“; $.ajax({ url:url, type:“post“, data:{ “td_name“:td_name, “td_alias“:td_alias, “td_type“:td_type, “id“:id, “tpl“:configId }, datatype:“json“, success:function (result) { ready(); //此方法是自己写的，局部刷新页面，重新加载数据
}
});
}
bootstrap行内编辑的树形下拉菜单怎么做
因为Bootstrap的下拉菜单（Dropdowns）就是在点击按钮时给.dropdown的div加上了open的类，要改点击后的背景色，js当然可以，最直接可以加css.open》.btn{background-color:#000!important;}具体需求像是:hover、边框颜色，都可以按这个思路修改3月9日回答 编辑 评论phuud73 声望答案对人有帮助，有参考价值0答案没帮助，是错误的答案，答非所问.dropdown { background: #ccc !important }
