ASP.net MVC 使用bootstrap-table

最新推荐文章于 2021-12-20 17:09:12 发布

罗汉松驻扎的工作基地

最新推荐文章于 2021-12-20 17:09:12 发布

阅读量1.8k

点赞数

文章标签： bootstrap mvc asp.net

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/114818894

版权

bootstrap-table是一个非常好用的数据表格插件，类似于web form 里面的gridview ，我做了一个简单的例子，大概如下图，如果代码写的不对，请见谅。

首先bootstrap 样式和 bootstrap-table 的官网是，js和css可以自己查询下载，我做测试的时候一般直接用cdn，方便快捷：

https://v3.bootcss.com/

https://bootstrap-table.com/

首先看view部分的代码

@*会员删除页面*@
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MemberDel</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>

</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">home</li>
                <li class="active">member delete</li>
            </ol>
        </div>

        <div class="row">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">姓名</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">用户号码</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <button type="button" class="btn btn-default">搜索</button>
            </form>
        </div>

        <div class="row">&nbsp;</div>

        <div class="row">
            <table id="mytable"></table>
        </div>

    </div>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#mytable").bootstrapTable({
                url: "/home/GetMenbList",  
                striped: true, //是否显示行间隔色
                pageNumber: 1,  
                pagination: true,
                sidePagination: 'server',//server:服务器端分页|client：前端分页
                pageSize: 10, 
                pageList: [10],//可选择单页记录数

                queryParams: function (params) { 
                    var temp = {
                        limit: params.limit,
                        offset: params.offset,
                        //page : (params.offset / params.limit) + 1,  

                        Name: $('#exampleInputName2').val(),
                        Tel: $('#exampleInputEmail2').val()
                    };
                    return temp;
                },

                columns: [{
                    title: '订单号',
                    field: 'OrderNum' 
                }, {
                    title: '顾客',
                    field: 'Customer' 
                }, {
                    title: '金额',
                    field: 'Amount'  
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: 200,
                    events: {
                        'click #edit': function (e, value, row, index) {
                          
                            alert(row.OrderNum + row.Customer + row.Amount);
                        },
                        'click #delete': function (e, value, row, index) {
                            deleteInfo(row.Id);
                        }
                    },
                    formatter: function (value, row, index) {
                        var result = "";
                        result += '<button id="edit" class="btn btn-info btn-xs" data-toggle="modal" data-target="#editModal">编辑</button>';
                        result += '<button id="delete" class="btn btn-danger btn-xs" style="margin-left:10px;">删除</button>';
                        return result;
                    }
                }
                ]
            });



        });  //end page ready

    </script>


</body>

</html>

可以看到<scritp>里面直接用 $('#mytable').bootstraptable(.....) 来初始化表格控件。

然后看controller里面的代码

   public ActionResult MemberDel()
        {
            return View();
        }

        public ActionResult GetMenbList()
        {
            int offset = int.Parse(Request["offset"]);
            int limit = int.Parse(Request["limit"]);
            string Name = Request["Name"];
            string Tel = Request["Tel"];

            int total = 0;
            // page: (params.offset / params.limit) + 1,
            int pageindex = (offset / limit) + 1;

            OrderList list = new OrderList();

            BootstrapTB tb = new BootstrapTB();
            tb.rows = list.GetModelByPage(Name+Tel, pageindex, limit, out total);
            tb.total = total;

            return Json(tb,JsonRequestBehavior.AllowGet);
        }

可以看到ajax 请求的是 GetMenbList() 方法，前台html传人的参数是刚刚js里面的queryParams ，offset 和 limit 这两个参数是翻页控件自带的，而其他的参数，如Name，Tel都是我写的<input>内容。

然后重点就是后台返回json ，这个json的格式为：

{"rows":[{...},{...},{...}],"total":45}

只有后台能传出这个格式的json ，前台bootstrap-table接受到之后就能显示表格。

（备注：bootstrap-table 初始化的columns的field名称要跟输出json对应列名，要不然列内容就会显示空白）

根据这个json格式，我做了一个实体类，自行改造改造就能用。

 public class BootstrapTB
    {
        public List<OrderModel> rows { get; set; }
        public int total { get; set; }
    }

罗汉松驻扎的工作基地

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ASP.net MVC 使用bootstrap-table

bootstrap-table是一个非常好用的数据表格插件，类似于web form 里面的gridview ，我做了一个简单的例子，大概如下图，如果代码写的不对，请见谅。首先bootstrap 样式和 bootstrap-table 的官网是，js和css可以自己查询下载，我做测试的时候一般直接用cdn，方便快捷：https://v3.bootcss.com/https://bootstrap-table.com/首先看view部分的代码@*会员删除页面*@@{ ..
复制链接

扫一扫