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

 

照着抄就行了。