BootStrap inline editing

 

　　Bootstrap inline editing, download an X-Editable plugin here, you can find it in Nuget.

　　The referenced js and css are roughly as follows:

        @* 1 , Jquery component reference * @

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



        @ * 2 , bootstrap component reference * @

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

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


        @ * 3 , Bootstrap table components and references to Chinese packages * @
         <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>

　　What needs to be reminded here is that your references must be correct, otherwise it is normal that you cannot achieve it.

 

　　Code:

    $('#table').bootstrapTable({
        url: ' /MyCourse/GetCourseTable ' ,             // request the URL of the background (*) 
        method: ' get ' ,          // request method (*)

        columns: [{
            checkbox: true
        },
        {
            field: 'ClassNumber',
            title: ' course number '
        }, {
            field: 'ClassName',
            title: ' course name ' ,
            editable: {
                type: 'text',
                title: ' course name ' ,
                validate: function (v) {
                    if (!v) return  ' Username cannot be empty ' ;

                }
            }
        }, {
            field: 'TeacherName',
            title: ' Teacher ' ,
             editable: {
                type: 'text',
                title: ' Teacher ' ,
                validate: function (v) {
                    if (!v) return  ' Username cannot be empty ' ;

                }
            }
        }],


       onEditableSave: function (field, row, oldValue, $el) {
            $.ajax({
                type: "post",
                url: "/MyCourse/UpdataCourse",
                data: row,
                dataType: 'JSON',
                success: function (data, status) {
                    if (status == "success") {
                        alert( ' Submit data successfully ' );
                    }
                },
                error: function () {
                    alert( ' Edit failed ' );
                },
                complete: function () {

                }

            });
        }
    })

 

Just copy it.