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 () { } });
        }
    })

 

照着抄就行了。