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"';
}
var option = '<option value="' + this.value + '" ' + selected + '>' + this.text + '</option>'
html.push(option);
});
html.push("</select>");
} else if ($isTextarea) { // textarea文字域
html.push("<textarea");
html.push(name);
html.push(clazz);
html.push("></textarea>");
} else if ($isInput) {
if (undefined == $inputType || $inputType == "text") {
html.push("<input");
html.push(name);
html.push(clazz);
html.push("type='text'>");
} else if ($inputType == "checkbox") {
$.each($formData.values, function() {
html.push("<input");
html.push(name);
html.push(clazz);
html.push("type='checkbox' value='" + this.value + "'>" + this.text);
});
}
} else if ($checkbox) {
html.push("<input");
html.push(name);
html.push(clazz);
html.push("type='checkbox' value='" + $defaultValue + "'>");
}
$forms[$fieldIndex] = html.join(" ");
}
} else {
$forms[$fieldIndex] = "";
}
});
$forms[$columns.length - 1] = "<a href='javascript:void(0);' title='刪除' class='removeRowForm'><i class='icon-trash-empty-1'></i></a>";
var $rowIndex = $table.find("tr").length - 1;
var tr = '<tr class="selected" data-index="' + $rowIndex + '">';
$.each($columns, function() {
var $fieldIndex = this.fieldIndex;
$.each($forms, function(key, value) {
if (key == $fieldIndex) {
var td = '<td style="text-align: center; vertical-align: middle; ">' + value + '</td>';
tr += td;
}
});
});
tr += "</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("<select");
html.push(name);
html.push(clazz);
html.push(">");
$.each($formData.options, function() {
var selected = "";
if (this.value == value) {
selected = ' selected="true"';
}
var option = '<option value="' + this.value + '" ' + selected + '>' + this.text + '</option>'
html.push(option);
});
html.push("</select>");
var $td = $table.find(" tbody tr").eq(index).children().eq($fieldIndex);
$td.html(html.join(" "));
}
// textarea文字域
if ($isTextarea) {
var html = [];
html.push("<textarea");
html.push(name);
html.push(clazz);
html.push(">" + $value + "</textarea>");
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("<input");
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('<i class="icon-eraser"></i>');
$(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('<i class="icon-edit"></i>');
$(obj).click(function() {
var index = $(this).attr("data-index");
$table.bootstrapTable('updateRowForm', this, index);
});
};