bootstrap-table 插件二次开发添加表格行新增和编辑功能

本文介绍了如何在bootstrap-table插件基础上进行二次开发,添加表格行的新增、编辑和删除功能。详细讲解了如何设置表格参数、自定义函数实现行的插入、更新和取消修改操作,以及在不同类型的表单元素(如select、textarea、input)中应用。
摘要由CSDN通过智能技术生成
bootstrap-table 插件添加表格行新增和编辑功能
version 1.11.0
原插件相关功能完善
新增表格参数totalField:'total'
修改load方法的
this.options.totalRows = data.total;
改为
this.options.totalRows = data[this.options.totalField];
列参数增加以下配置项
selectItemName : undefined, // 列表单名
edit : false, // 是否修改本行,默认不修改
defaultValue : '', // checkBox表单默认值,前提条件 edit:true
formData : {} // 表单数据,前提条件 edit:true
formData表单数据配置项
select : true/textarea : true/input : true 自定义表单
inputType : 'text'/'checkbox' 自定义表单类型
clazz : '' 自定义表单样式
options : [{value:'',text:''},{value:'',text:''}] 下拉框选项
values : [{value:'',text:''},{value:'',text:''}] 复选框选项
修改initBody方法
sprintf(' name="%s"', that.options.selectItemName)
改为
sprintf(' name="%s"', (undefined === column.selectItemName ? that.options.selectItemName : column.selectItemName))
自定义函数insertRowForm新增一行
BootstrapTable.prototype.insertRowForm = function() {
var $table = this.$el;
var $options = this.options;
var $data = this.getData();
var $columns = $options.columns[0];
var $forms = {};
$.each($columns, function() {
var $fieldIndex = this.fieldIndex;
var $field = this.field;
var $visible = this.visible;
var $checkbox = this.checkbox;
var $defaultValue = this.defaultValue;
if (this.edit) {
var clazz = "", name = "";
var $value;
// 判断表单类型
var $formData = this.formData;
var $isSelect = $formData.select;
var $isTextarea = $formData.textarea;
var $isInput = $formData.input;
var $inputType = $formData.inputType;
// 表单属性
if (undefined != $formData.clazz) {
clazz = "class='" + $formData.clazz + "'";
}
name = "name='" + $field + "'";
if ($visible) {
var html = [];
// select下拉框
if ($isSelect) {
html.push("<select");
html.push(name);
html.push(clazz);
html.push(">");
$.each($formData.options, function() {
var selected = "";
if (this.selected) {
selected = ' selected="true"';
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值