Bootstrap Table 增删改总结，

通过网上查了查资料，自己测试，记录一下自己对Bootstrap Table的新得。
刚入行，萌新，还望大佬们指教，嘻嘻。
示例图放两张吧先，哒家~~
资源下载，有积分的捧个场，实在没有的留qq微信邮箱啥的，找我要。
谢谢支持！！
https://download.csdn.net/download/weixin_44594300/11503869


行内编辑

1引入主要文件
bootstrap.min.js
bootstrap.min.css
bootstrap-table.js
bootstrap-table-zh-CN.js
可实现增删改查
引入以上即可

（其他实用插件）
可以自己百度琢磨琢磨
导出插件 实现导出
tableExport.js
bootstrap-table-export.js
行内编辑插件
bootstrap-editable.min.js
bootstrap-table-editable.min.js
日期插件 实现日期选择（示例图）
bootstrap-datetimepicker.js
bootstrap-datetimepicker.zh-CN.js
bootstrap-datetimepicker.min.css

表单验证插件 验证表单
bootstrapValidator.min.js
bootstrapValidator.min.css

1.1数据绑定
Html

<div class="table-responsive" style="min-width: 430px;">
            <table id="tableGrid" class="table table-bordered table-striped table-hover"></table>
        </div>
js

$(function () {
    //1.初始化Table
    var oTable = new Table_Init();
    oTable.Init();
    //2.初始化Button的点击事件
    var oButton_Init = new Button_Init();
    oButton_Init.Init();
});
var Table_Init = function () {
    var oTable_Init = new Object();
    //初始化Table
    oTable_Init.Init = function () {
        $('#tableGrid').bootstrapTable({
            url: '/ceshi/GetDepartment',        //请求后台的URL（*）
            method: 'post',                     //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTable_Init.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 542,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showExport: true,                   //是否显示导出按钮
            align: "left",
            halign: "center",
            columns: [{
                checkbox: true
            }, {
                width: 60,
                field: 'ID',
                title: '序号'
            }, {
                width: 100,
                field: 'name',
                title: '物资名称',
                editable: true
            },
            {
                width: 140,
                field: 'symbol',
                title: '标准或图号',
                editable: true
            },
             {
                 field: 'type',
                 title: '规格型号',
                 width: 80,
                 editable: true
             }, {
                 width: 50,
                 field: 'price',
                 title: '单价',
                 editable: true
             }, {
                 width: 80,
                 field: 'Receivingunit',
                 title: '计量单位',
                 editable: true
             }, {
                 width: 100,
                 field: 'Number',
                 title: '需求数量',
                 editable: true
             }, {
                 width: 60,
                 field: 'money',
                 title: '金额',
                 editable: {
                     type: 'text',
                     title: '金额',
//行内表单验证
                     validate: function (v) {
                         if (isNaN(v)) return '金额必须是数字';
                         var money = parseInt(v);
                         if (money <= 0) return '金额必须是正整数';
                     }
                 }
             }, {
                 width: 100,
                 field: 'time',
                 title: '到货时间',
                 editable: true
             }, {
                 width: 140,
                 field: 'Telephone',
                 title: '收货人及电话',
                 editable: true
             }, {
                 width: 140,
                 field: 'arrival',
                 title: '到货地点',
                 editable: true
             }, {
                 field: 'unit',
                 title: '收货单位',
                 width: 100,
                 editable: true
             },
             {
                 width: 140,
                 field: 'remarks',
                 title: '备注',
                 editable: true
             }
            ], 
            //行内编辑
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/ceshi/Edit",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            alert('提交数据成功');
                        }
                    },
                    error: function () {
                        alert("Error");
                    },
                    complete: function () {
                    }
                });
            }
        });
    };
    //得到查询的参数
    oTable_Init.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            sort: params.sort,      //排序列名  
            sortOrder: params.order, //排位命令（desc，asc） 
            name: $("#txt_search_name").val()    //查询条件
        };
        return temp;
    };

后台

2//注 修改bootstrap-table.js 将内容注释实现表头不错位，且增加样式

  /*解决宽度和换行*/
        .table {
            table-layout: fixed;
            word-break: break-all;
        }
            /*表头居中*/
            .table th, .table td {
                text-align: center;
                vertical-align: middle!important;
            }
         .table_list_box {
                table-layout: fixed !important;
    }

增加JS代码

$(function () {
    $(window).resize(function () {
        $('#tableGrid').bootstrapTable('resetView');
    });
});

3表头固定Table JS中添加 height属性
4查询实现
4.1后台

        public JsonResult GetDepartment(int limit, int offset, string name)
        {
            var lstRes = new List<Model>();
            lstRes = Dal.GetSelect();
            var cxname = name;
            if (cxname != "")
            {
        var rows = lstRes.Skip(offset).Take(limit).ToList().Where(u => u.name == name);
                var lstRess = new List<Model>();
                foreach (var item in rows)
                {
                    lstRess.Add(item);
                }

                var total = lstRess.Count;
 return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                var total = lstRes.Count;
                var rows = lstRes.Skip(offset).Take(limit).ToList();
 return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
            }
        }

4.2前台HTML+js部分

<form class="form-horizontal">
                <label for="txt_search_name" class="col-sm-1 control-label" style="text-align: right; margin-top: 15px; min-width: 100px;">物资名称</label>
                <div class="col-sm-3" style="margin-top: 10px;">
                    <input id="txt_search_name" type="text" class="form-control">
                </div>
                <label for="txt_search_symbol" class="col-sm-1 control-label" style="text-align: right; margin-top: 15px; min-width: 100px;">标准或图号</label>
                <div class="col-sm-3" style="margin-top: 10px;">
                    <input id="txt_search_symbol" type="text" class="form-control">
                </div>
                <div class="col-sm-1">
                    <button type="button" id="btn_query" class="btn btn-primary" style="margin-top: 10px;">查询</button>
                </div>
            </form>

js获取查询框数据

//得到查询的参数
    oTable_Init.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            sort: params.sort,      //排序列名  
            sortOrder: params.order, //排位命令（desc，asc） 
            name: $("#txt_search_name").val()    //查询条件

4.4 定义查询按钮点击事件

//查询按钮
        $("#btn_query").click(function () {
            var $table = $("#tableGrid");
            $table.bootstrapTable('refresh');//刷新Table，Bootstrap Table 会自动执行重新查询
        })

5新增删除修改弹窗
5.1主要js代码

  //删除按钮
    $("#btnDelete").click(function () {
        var rows = $("#tableGrid").bootstrapTable('getSelections');
        console.log(rows);
        if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
            alert("请先选择要删除的记录!");
            return;
        } else {
            if (confirm("确定要删除吗？")) {
                alert("确定");
                var arrays = new Array();// 声明一个数组
                $(rows).each(function () {// 通过获得别选中的来进行遍历
                    arrays.push(this.ID);// cid为获得到的整条数据中的一列
                });
                var idcard = arrays.join(','); // 获得要删除的id
                console.log(idcard);
                $.ajax({
                    type: "post",
                    url: "/ceshi/Delete?idcard=" + idcard,
                    success: function () {
                        $("#tb_departments").bootstrapTable('refresh');
                        alert("删除成功");
                        location = location;
                    },
                    error: function () {
                        toastr.error('Error');
                    },
                    complete: function () {
                    }
                })
            }
            return;
        }
    });
    //修改按钮
    $(".btnEdit").click(function () {
        var rows = $("#tableGrid").bootstrapTable('getSelections');
        if (rows.length > 1 || rows.length <= 0) {
            alert("请选择一行数据编辑");
        } else {
            for (var name in rows[0]) {
                $('#Editmodal').find('input[name="' + name + '"]').val(rows[0][name]);
            }
            $('#Editmodal').modal('show');
        }
    });
    //新增按钮
    $(".btnAdd").click(function () {
        $('#Addmodal').modal('show');
    })

5.2表单提交，这里我用的bootstrapValidator表单验证的表单提交方法

5.3Html代码新增弹窗，修改一样

6行内编辑，需要引用开头说的行内编辑插件
添加如下代码就可以啦。

后台
//行内编辑

  public ActionResult Edit(Model s)
    {
        Dal.EditByID(s);
        //反序列化之后更新
        return Json(new { }, JsonRequestBehavior.AllowGet);
    }

排序后台 网上搜到的方法，忘记大佬名字了，项目中没用到，大家可以自己尝试

/// <summary>
        /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
        /// </summary>
        /// <returns>指定对象的集合</returns>
        public override ActionResult FindWithPager()
        {
            //检查用户是否有权限，否则抛出MyDenyAccessException异常
            base.CheckAuthorized(AuthorizeKey.ListKey);

        string where = GetPagerCondition();
        PagerInfo pagerInfo = GetPagerInfo();
        var sort = GetSortOrder();

        List<TestUserInfo> list = null;
        if (sort != null && !string.IsNullOrEmpty(sort.SortName))
        {
            list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
        }
        else
        {
            list = baseBLL.FindWithPager(where, pagerInfo);
        } 

        //Json格式的要求{total:22,rows:{}}
        //构造成Json的格式传递
        var result = new { total = pagerInfo.RecordCount, rows = list };
        return ToJsonContent(result);
    }

排序JS
//得到查询的参数

queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
     var temp = {   
           rows: params.limit,                         //页面大小
           page: (params.offset / params.limit) + 1,   //页码
           sort: params.sort,      //排序列名  
           sortOrder: params.order //排位命令（desc，asc） 
     };
   return temp;
}

数据格式