bootstrap table可编辑
程序员文章站
2022-06-08 16:10:58
...
在table init中加入此段代码
onDblClickCell: function(field,value,row,$element) {
var upIndex = $element[0].parentElement.rowIndex - 1;
var params = options.editFiled.split(",");
for (item in params) {
if (params[item] == field) {
$element[0].innerHTML = "<input id='inputCell' type='text' name='inputCell' style ='width: 40px' value='" + value + "'>";
$("#inputCell").focus();
$("#inputCell").blur(function () {
var newValue = $("#inputCell").val();
row[field] = newValue;
$(this).remove();
$('#bootstrap-table').bootstrapTable('updateCell', {
index: upIndex,
field: field,
value: newValue
});
});
}
}
}
在options中加入
editFiled: "model,num,unitPrice,totalAmount,outStockId,remark,wareTime",//多个用逗号隔开
可编辑select,需加入bootstrap-editable.css,bootstrap-table-editable.js
editable: {
type: 'select',
title: '类型',
name: 'type',
emptytext: "请选择类型",
placement: 'top',
source : function() {//动态获取数据
var result = [];
result.push({
value : 1,
text : '配件入库'
});
return result;
},
select: {
allowClear: true,
multiple: false,
tokenSeparators: [",", " "],
width: '150px'//设置宽
}
}
上一篇: elementUi合并单元格
推荐阅读
-
利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
-
bootstrap table实例详解
-
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
-
bootstrap制作jsp页面(根据值让table显示选中)
-
bootstrap table配置参数例子
-
bootstrap table 数据表格行内修改的实现代码
-
BootStrap table实现表格行拖拽效果
-
利用vue.js把静态json绑定bootstrap的table方法
-
bootstrap table分页模板和获取表中的ID方法
-
bootstrap table使用入门基本用法