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"';
}
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"';
}