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

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(" html.push(name);
html.push(clazz);
html.push(">");
$.each($formData.options, function() {
var selected = "";
if (this.selected) {
selected = ' selected="true"';
}
var option = '' + this.text + ''
html.push(option);
});
html.push("");
} else if ($isTextarea) { // textarea文本域
html.push(" html.push(name);
html.push(clazz);
html.push(">");
} else if ($isInput) {
if (undefined == $inputType || $inputType == "text") {
html.push(" html.push(name);
html.push(clazz);
html.push("type='text'>");
} else if ($inputType == "checkbox") {
$.each($formData.values, function() {
html.push(" html.push(name);
html.push(clazz);
html.push("type='checkbox' value='" + this.value + "'>" + this.text);
});
}
} else if ($checkbox) {
html.push(" html.push(name);
html.push(clazz);
html.push("type='checkbox' value='" + $defaultValue + "'>");
}
$forms[$fieldIndex] = html.join(" ");
}
} else {
$forms[$fieldIndex] = "";
}
});
$forms[$columns.length - 1] = "";
var $rowIndex = $table.find("tr").length - 1;
var tr = '';
$.each($columns, function() {
var $fieldIndex = this.fieldIndex;
$.each($forms, function(key, value) {
if (key == $fieldIndex) {
var td = '' + value + '';
tr += td;
}
});
});
tr += "";
$table.find(" tbody").eq(0).append(tr);
$(".removeRowForm").click(function() {
$(this).parent().parent().remove();
});
};
自定义函数updateRowForm修改行
BootstrapTable.prototype.updateRowForm = function(obj, index) {
var $table = this.$el;
var $options = this.options;
var $data = this.getData();
var $columns = $options.columns[0];
$.each($columns, function() {
var $field = this.field;
var $fieldIndex = this.fieldIndex;
var $visible = this.visible;
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 + "'";
$.each($data[index], function(key, value) {
if (key === $field) {
$value = value;
if ($visible) {
// select下拉框
if ($isSelect) {
var html = [];
html.push(" html.push(name);
html.push(clazz);
html.push(">");
$.each($formData.options, function() {
var selected = "";
if (this.value == value) {
selected = ' selected="true"';
}
var option = '' + this.text + ''
html.push(option);
});
html.push("");
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(html.join(" "));
}
// textarea文本域
if ($isTextarea) {
var html = [];
html.push(" html.push(name);
html.push(clazz);
html.push(">" + $value + "");
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(html.join(" "));
}
// input
if ($isInput) {
if (undefined == $inputType || $inputType == "text") {
var html = [];
html.push(" html.push(name);
html.push(clazz);
html.push("value='" + $value + "'>");
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(html.join(" "));
}
}
// input隐藏
var $input = $table.find(" tbody tr").eq(index).children().eq($fieldIndex).find("input");
if ($input.length > 0) {
$input.each(function() {
$(this).removeAttr("disabled");
});
}
}
}
});
}
});
// 变换操作按钮
var cellIndex = $(obj.parentNode).prevAll().length;
$(obj).attr("title", "取消");
$(obj).attr("data-index", index);
$(obj).removeAttr("onclick");
$(obj).html('');
$(obj).click(function() {
var index = $(this).attr("data-index");
$table.bootstrapTable('cancelRowForm', this, index);
});
};
自定义函数cancelRowForm取消修改
BootstrapTable.prototype.cancelRowForm = function(obj, index) {
var $table = this.$el;
var $options = this.options;
var $data = this.getData();
var $columns = $options.columns[0];
$.each($columns, function() {
var $field = this.field;
var $fieldIndex = this.fieldIndex;
var $visible = this.visible;
var $checkbox = this.checkbox;
if (this.edit) {
// 判断表单类型
var $formData = this.formData;
var $isSelect = $formData.select;
var $isTextarea = $formData.textarea;
var $isInput = $formData.input;
var $inputType = $formData.inputType;
$.each($data[index], function(key, value) {
if (key === $field) {
if ($visible) {
// select下拉框
if ($isSelect) {
var $select = $table.find(" tbody tr").eq(index).children().eq($fieldIndex).find("select");
$select.val(value);
var text = $select.find("option:selected").text();
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(text);
}
// textarea文本域
if ($isTextarea) {
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(value);
}
// input隐藏
var $input = $table.find(" tbody tr").eq(index).children().eq($fieldIndex).find("input");
if ($input.length > 0) {
$input.each(function() {
if ($(this).is(":hidden")) {
$(this).attr("disabled", "disabled");
} else if (($(this).is(":checkbox"))) {
if ($checkbox) {
$(this).prop("checked", true);
} else if (value.indexOf($(this).val()) != -1) {
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
$(this).attr("disabled", "disabled");
} else {
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(value);
}
});
}
}
}
});
}
});
// 变换操作按钮
var cellIndex = $(obj.parentNode).prevAll().length;
$(obj).attr("title", "修改");
$(obj).attr("data-index", index);
$(obj).removeAttr("onclick");
$(obj).html('');
$(obj).click(function() {
var index = $(this).attr("data-index");
$table.bootstrapTable('updateRowForm', this, index);
});
};