Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到。
引用的js和css大致如下:
@*、Jquery组件引用*@ <script src="~/Scripts/jquery-3.3.1.js"></script> @*、bootstrap组件引用*@ <script src="~/Scripts/bootstrap.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> @*、bootstrap table组件以及中文包的引用*@
<script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="~/Scripts/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script> @*、 X-Editable组件引用*@
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap3-editable/js/bootstrap-editable.js"></script>
这里需要提醒的是,你这些引用一定要对,否则你实现不了也是正常的。
代码:
$('#table').bootstrapTable({
url: '/MyCourse/GetCourseTable', //请求后台的URL(*)
method: 'get', //请求方式(*) columns: [{
checkbox: true
},
{
field: 'ClassNumber',
title: '课程编号'
}, {
field: 'ClassName',
title: '课程名称',
editable: {
type: 'text',
title: '课程名称',
validate: function (v) {
if (!v) return '用户名不能为空'; }
}
}, {
field: 'TeacherName',
title: '授课老师',
editable: {
type: 'text',
title: '授课老师',
validate: function (v) {
if (!v) return '用户名不能为空'; }
}
}], onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/MyCourse/UpdataCourse",
data: row,
dataType: 'JSON',
success: function (data, status) {
if (status == "success") {
alert('提交数据成功');
}
},
error: function () {
alert('编辑失败');
},
complete: function () { } });
}
})
照着抄就行了。