BootStrap行内编辑

 

　　Bootstrap行内编辑，这里下载了一个X-Editable的插件，在Nuget里面就可以搜到。

　　引用的js和css大致如下：

        @*1、Jquery组件引用*@

        <script src="~/Scripts/jquery-3.3.1.js"></script>



        @*2、bootstrap组件引用*@

        <script src="~/Scripts/bootstrap.js"></script>

        <link href="~/Content/bootstrap.css" rel="stylesheet" />


        @*3、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>

        @*4、 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 () {

                }

            });
        }
    })

 

照着抄就行了。