mvc5 + ef6 + autofac搭建项目（三）

前面已经基本完成了框架的搭建，后面就是实现了，后面主要说下前端的东西bootstrap的使用和相关插件。

看图：

实现比较简单，在主页面只引入共用部分的 js等相关包，毕竟不是所有页面都需要列表以及其他插件的包，所以我是在当前页面直接引入的，用不到的页面完全没必要加载，你说不是吗？

主要是bootstrap-table的使用：默认的导出功能（当然，这里我把导出功能按钮隐藏了）

@{
    Layout = "~/Views/Shared/_LayoutContext.cshtml";
}
<link href="~/Content/css/list.searchbox.css" rel="stylesheet" />
<script src="~/Scripts/js/jquery-2.0.3.min.js"></script>
<link href="~/Scripts/js/bootstrap/table/bootstrap-table.css" rel="stylesheet" />

<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-sky">视屏列表</div>

            <div class="row">
                <div id="toolbar" style="padding-left: 5px">
                    <div class="buttons-preview">
                        <div class="col-lg-4 col-sm-4 col-xs-4">
                            <a href="javascript:void(0);" class="btn btn-azure" id="add"><i class="fa fa-plus"></i> 新增视频</a>
                            <a href="javascript:void(0);" class="btn btn-darkorange " id="remove"><i class="fa fa-times"></i> 删除选中</a>
                            <a href="javascript:void(0);" class="btn btn-palegreen" id="import"><i class="glyphicon glyphicon-import"></i> 批量导入</a>
                            <a href="javascript:void(0);" class="btn btn-yellow" id="export"><i class="glyphicon glyphicon-export"></i>批量导出</a>
                        </div>
                        <div class="col-lg-8 col-sm-8 col-xs-8">
                            <div class="">
                                <div class="input-group">
                                    <span class="input-group-addon ">账户名称</span>
                                    <input type="text" class="form-control txt-pub-account" placeholder="输入发布账号">
                                    <span class="input-group-addon">视频名称</span>
                                    <input type="text" class="form-control txt-video-title" placeholder="输入查询名称">
                                    <span class="input-group-addon">发布时间</span>
                                    <input class="form-control date-picker" type="text" value="" id="datetimepicker" data-date-format="yyyy-mm-dd">
                                    <a href="javascript:void(0);" style="display: table-cell;" class="btn btn-azure btn-search"><i class="glyphicon glyphicon-search"></i> 查询</a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <table id="table-video-list"
                   data-toolbar="#toolbar"
                   @*data-search="true"
                   data-show-refresh="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-show-export="true"*@
                   data-click-to-select="true"
                   @*data-single-select="true"*@
                   data-detail-view="true"
                   data-detail-formatter="formatter.detailFormatter"
                   data-minimum-count-columns="2"
                   data-pagination="true"
                   data-id-field="id"
                   data-page-size="12"
                   data-page-list="[12, 30, 50, 100, ALL]"
                   data-show-footer="false"
                   data-side-pagination="server"
                   data-response-handler="operationEvents.responseHandler"></table>

        </div>
    </div>
</div>
<script src="~/Content/js/viewData/list.data.formatter.js"></script>
<script src="~/Content/js/viewData/list.events.js"></script>
<script src="~/Content/js/video.list.js"></script>
<script src="~/Scripts/js/bootstrap/table/bootstrap-table.js"></script>
<script src="~/Content/js/viewData/common.list.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker({
            format: 'yyyy-mm-dd'
        });

        $('#add').click(function () {
            showBigDialog('/Video/Insert', '新增视频');

        });

        $('#remove').click(function () {
            var selects = $table.bootstrapTable('getSelections');
            ids = $.map(selects, function (row) {
                return row.Id;
            });

            $table.bootstrapTable('remove', {
                field: 'Id',
                values: ids
            });

        });



    });
</script>

View Code