bootstrap-table学习

参考学习 http://bootstrap-table.wenzhixin.net.cn/getting-started/

包括Bootstrap库（如果你的项目没有使用它）和bootstrap-table.csshead标签你的html文档。

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

包括jQuery库，引导程序库（如果您的项目没有使用它），并bootstrap-table.js在头标签或文档的最底部，在关闭正文标记之前（通常建议为了更好的性能）。

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>

Example:

<script type="text/javascript">
    $(document).ready(function () {
        $('#table').bootstrapTable({
            columns: [
               { field: 'Seq', title: 'Seq', width: 30, align: 'center', "colspan": 1 },
               { field: 'BOL', title: 'BOL', width: 120, align: 'center', "colspan": 1 },
               { field: 'IsUrgent', title: '加急', width: 30, align: 'center', "colspan": 1 },
               { field: 'PickState', title: '拣配状态', width: 60, align: 'center', "colspan": 1 },
               { field: 'PreAllocationState', title: '包装状态', width: 60, align: 'center', "colspan": 1 },
               { field: 'DNCount', title: 'DN', width: 30, align: 'center', "colspan": 1 },
               { field: 'Request', title: 'Request', width: 60, align: 'center', "colspan": 1 },
               { field: 'UrgentTime', title: 'UrgentTime', width: 60, align: 'center', "colspan": 1 }
            ],
            pageList: [10, 25, 50, 100, 200]
        });
        $.ajax({
            url: "/FRUInventoryBarCodeMobile/GetShipmentList",
            type: "POST",
            data: {},
            datatype: "json",
            success: function (data) {
                if (data.msgType == "success") {
                    $('#table').bootstrapTable('load', data.rows);
                }
                else if (data.msgType == "error") {
                    layer.open({
                        content: data.msg
                 , skin: 'msg'
                 , time: 2 //2秒后自动关闭
                    });
                }
            }
        })

    })
</script>

<body>
    <div class="panel-body">
        <div id="toolbar" class="btn-group">
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
        </div>
    </div>
    <table id="table" data-striped="true"  @*stripe the rows*@
        data-pagination="true"           @*show a pagination toolbar on table bottom.*@
        data-show-columns="true"        @*show the columns drop down list.*@
        data-toolbar="#toolbar"         @*A jQuery selector that indicates the toolbar, for example:#toolbar, .toolbar, or a DOM node.*@
        data-search="true"              @*Enable the search input.*@
        data-show-toggle="true"         @*show the toggle button to toggle table / card view.*@
        data-maintain-selected="true">  @*True to maintain selected rows on change page and search.*@
    </table>
</body>

后台取数据：

   public ActionResult GetShipmentList(FormCollection fc)
        {
            LogHelper lh = new LogHelper();
            if (user != null)
            {
                DBConn = user.DBConn.ToString();
            }
            else
            {
                return RedirectToAction("Login", "P2Mobile");
            }
            JsonMsg jsmsg = new JsonMsg();
            var arrlist = p2mobile_inventorybarcodeibll.GetShipmentList(DBConn);
            if (arrlist.Count > 0)
            {
                int total = arrlist.Count;
                return Json(new { msgType = JsonMsgType.Success, total = total, rows = arrlist }, JsonRequestBehavior.AllowGet);
            }
            return Json(new { msgType = JsonMsgType.Error, msg = "未找到相关数据" }, JsonRequestBehavior.AllowGet);
        }

猜你喜欢