bootstrap-table 行内編輯
1.輸入框
2.下拉框
3.複選框
4.日期元件
案例位址:
x-editable開源位址:https://github.com/vitalets/x-editable
x-editable文檔位址:http://vitalets.github.io/x-editable/docs.html
x-editable線上Demo:http://vitalets.github.io/x-editable/demo-bs3.html
前提
需要引入的js+css
<link href="/ajax/libs/bootstrap-table/locale/css/bootstrap.min.css" rel="stylesheet" />
<th:block th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.css}" rel="stylesheet"></th:block>
<link href="/ajax/libs/bootstrap-table/locale/css/bootstrap-table.min.css" rel="stylesheet" />
<script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-editable.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/editable/bootstrap-table-editable.js}"></script>
1.輸入框
$(function () {
$("#myTable").bootstrapTable({
idField: "Id",
url: "/edit",
columns: [{
checkbox: true
}, {
field: "personName",
title: "使用者名",
editable: {
type: 'text',
title: '使用者名',
validate: function (result) {
if (!result)
return '使用者名不能為空';
}
}
},
{
field: "Hobby",
title: "愛好"
}],
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/edit",
data: row,
dataType: 'JSON',
success: function (data, status) {
if (status == "success") {
alert('送出資料成功');
}
},
error: function () {
alert('編輯失敗');
},
complete: function () {
}
});
}
});
});
2.下拉框
{
field: "classes",
title: "班級",
editable: {
type: 'select',
title: '班級',
source: function () {
var result = [];
$.ajax({
url: '/getClassesList',
async: false,
type: "get",
data: {},
success: function (rs, status) {
$.each(rs, function (key, data) {
result.push({ value: data.value,
text: data.Name});
});
}
});
return result;
}
}
}
3.複選框
{
field: "foods",
title: "食物",
editable: {
type: "checklist",
separator:",",
source: [{ value: 'a', text: '蘋果' },
{ value: 'o', text: '橙子' },
{ value: 'b', text: '梨子' }],
}
}
4.日期元件
```bash
{
field: "Birthday",
title: "生日",
formatter: function (value, row, index) {
var date = eval('new ' + eval(value).source)
return date.format("yyyy-MM-dd");
},
editable: {
type: 'date',
title: '生日'
}
}
注意:
編輯儲存添加屬性 onEditableSave
[ {
field: 'secretId',
title: '密級編号'
},
{
field: 'secDataLevel',
title: '資料級别',
editable: {
type: "checklist",
separator:",",
source: function () {
var result = [];
$.each(datas, function (key, value) {
result.push({value:value.dictValue,text:value.dictLabel });
});
return result;
},
}
},
{
field: 'createBy',
title: '建立人'
},
{
field: 'createTime',
title: '建立時間'
},
{
field: 'updateBy',
title: '修改人'
},
{
field: 'updateTime',
title: '修改時間'
}
],
onEditableSave:function (filed,row,oldValue,$el) {
$("#bootstrap-table").bootstrapTable("resetView")
var data ={}
data.secId = row.secId
data.secLevel=row.secDataLevel.toString();
$.ajax({
type: "post",
url:prefix + "/edit",
data:data,
dataType:'JSON',
success:function (result) {
if (typeof callback == "function") {
callback(result);
}
$.operate.successCallback(result);
},
error:function (result) {
alert("修改失敗")
},
complete:function () {
}
})
}