前面已经基本完成了框架的搭建,后面就是实现了,后面主要说下前端的东西bootstrap的使用和相关插件。
看图:
实现比较简单,在主页面只引入共用部分的 js等相关包,毕竟不是所有页面都需要列表以及其他插件的包,所以我是在当前页面直接引入的,用不到的页面完全没必要加载,你说不是吗?
主要是bootstrap-table的使用:默认的导出功能(当然,这里我把导出功能按钮隐藏了)
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
@{ 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>
引入文件中的 几个自定义的js文件源码:
<script src="~/Content/js/viewData/list.data.formatter.js"></script>
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
var formatter = { VideoToTopFormatter: function (value, row, index) { var msg = ''; var style =''; var btn = ''; if (value == -1){ msg = '取消置顶'; style = 'fa-level-down'; btn = ' btn-info'; }else{ msg = '置顶该项'; style = 'fa-level-up'; btn = ' btn-default'; } return '<a class="btn btn-xs '+btn+' video-cancel-top-link" ref="' + row.Id + '" rel="' + value + '" href="javascript:void(0);" title="' + msg + '"><i class="fa ' + style + '"></i></a> '; }, PictureToTopFormatter: function (value, row, index) { var msg = ''; var style = ''; var btn = ''; if (value == -1) { msg = '取消置顶'; style = 'fa-level-down'; btn = ' btn-info'; } else { msg = '置顶该项'; style = 'fa-level-up'; btn = ' btn-default'; } return '<a class="btn btn-xs ' + btn + ' video-cancel-top-link" ref="' + row.Id + '" rel="' + value + '" href="javascript:void(0);" title="' + msg + '"><i class="fa ' + style + '"></i></a> '; } , imageFormatter: function (value, row, index) { var html = '<img src="' + row.PictureTitleDescription.split(',')[0].replace("~", "") + '" style="height:60px" alt="' + row.PictureTitle + '"/>'; return html; }, titleFormatter: function (value, row, index) { if (row.JokeTitle != undefined) { return (row.JokeTitle.length > 10) ? row.JokeTitle.substring(0, 10) + "..." : row.JokeTitle; } if (row.ArticalTitle != undefined) { return (row.ArticalTitle.length > 10) ? row.ArticalTitle.substring(0, 10) + "..." : row.ArticalTitle; } } , detailFormatter: function detailFormatter(value, row, index) { var img = row.ShowPictureUrl || row.PictureTitleDescription; var name = row.VideoName || row.PictureTitle; var html = ''; if (typeof (img) != "undefined" && img.split(',').length > 0) { $.each(img.split(','), function (index, item) { if (typeof (item) != null && item != "") html += '<img src="' + item.replace("~", "") + '" style="height:200px;padding-right:5px;" alt="' + name + '"/>'; }); } else {//文章或者段子 if (typeof (row.JokeDesc) != "undefined") { html = row.JokeDesc.length > 69 ? row.JokeDesc.substring(0, 66) + "..." : row.JokeDesc; } } if (row.ArticalDesc != undefined) { html = row.ArticalDesc.length > 69 ? row.ArticalDesc.substring(0, 66) + "..." : row.ArticalDesc; } return html; }, operateFormatter: function operateFormatter(value, row, index) { return [ '<a class="btn btn-xs btn-info detail-link" href="javascript:void(0);" title="查看详细"><i class="fa fa- fa-eye"></i></a> ', //'<a class="btn btn-xs btn-darkorange delete-link" href="javascript:void(0);" title="删除该项"><i class="fa fa-warning"></i></a> ', ].join(''); }, totalTextFormatter: function totalTextFormatter(data) { return 'Total'; }, totalNameFormatter: function totalNameFormatter(data) { return data.length; }, totalPriceFormatter: function totalPriceFormatter(data) { var total = 0; $.each(data, function (i, row) { total += +(row.price.substring(1)); }); return '$' + total; }, //EasyUI用DataGrid用日期格式化 TimeyyyyMMddHHmmss: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.getFullYear() + "-" + (parseInt(dateValue.getMonth()) + 1) + "-" + dateValue.getDate() + " " + dateValue.getHours() + ":" + dateValue.getMinutes() + ":" + dateValue.getSeconds(); return val; }, TimeyyyyMMddHHmm: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.getFullYear() + "-" + (parseInt(dateValue.getMonth()) + 1) + "-" + dateValue.getDate() + " " + dateValue.getHours() + ":" + dateValue.getMinutes(); return val; }, //EasyUI用DataGrid用日期格式化 TimeyyyyMMdd: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.getFullYear() + "-" + (parseInt(dateValue.getMonth()) + 1) + "-" + dateValue.getDate(); return val; } }; var Common = { //EasyUI用DataGrid用日期格式化 TimeFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } var val = dateValue.format("yyyy-mm-dd HH:MM"); return val.substr(11, 5); }, DateTimeFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } return dateValue.format("yyyy-mm-dd HH:MM"); }, //EasyUI用DataGrid用日期格式化 DateFormatter: function (value, rec, index) { if (value == undefined) { return ""; } /*json格式时间转js时间格式*/ value = value.substr(1, value.length - 2); var obj = eval('(' + "{Date: new " + value + "}" + ')'); var dateValue = obj["Date"]; if (dateValue.getFullYear() < 1900) { return ""; } return dateValue.format("yyyy-mm-dd"); } };
<script src="~/Content/js/viewData/list.events.js"></script> 这里之所以这么搞,因为 事件对应的 标签class完全可以是公用的,没必要每个页面都写一遍:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
var operationEvents = { getIdSelections: function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function (row) { return row.id }); }, responseHandler: function responseHandler(res) { return { rows: res.data, total: res.total }; }, getHeight: function getHeight() { var pagebody = $(parent.document.getElementById("iframe")).parent().css('padding-top'); return $(window.document).height() - pagebody; } }; window.operateEvents = { 'click .detail-link': function (e, value, row, index) { alert('You click like action, row: ' + JSON.stringify(row)); }, 'click .delete-link': function (e, value, row, index) { var selects = $table.bootstrapTable('getSelections'); ids = $.map(selects, function (row) { return row.Id; }); $table.bootstrapTable('remove', { field: 'Id', values: ids }); }, //------视频-------------------------------------------------------------------------------- 'click .video-cancel-top-link': function (e, value, row, index) {//取消置顶 var id = row.Id; var isToTop = value; $.ajax({ type: 'POST', async: false, url: '/Video/ToTop', data: { id: id, isToTop: isToTop }, success: function (result) { if (result.State == 'ok') { alert("[" + id + "]" + ((isToTop == -1) ? "已取消置顶" : "置顶操作成功!")); } if (result.State == 'error') { alert('置顶/取消置顶 操作失败!'); } } }); }, 'click .picture-cancel-top-link': function (e, value, row, index) {//置顶操作 var id = row.Id; var isToTop = value; $.ajax({ type: 'POST', async: false, url: '/Picture/ToTop', data: { id: id, isToTop: isToTop }, success: function (result) { if (result.State == 'ok') { alert("[" + id + "]" + ((isToTop == -1) ? "已取消置顶" : "置顶操作成功!")); } if (result.State == 'error') { alert('置顶/取消置顶 操作失败!'); } } }); } };
<script src="~/Content/js/video.list.js"></script> 加载数据的自定义部分
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
var postUrl = '/Video/ListData'; var source = { postUrl: postUrl, targetTable: '#table-video-list', removeTargetId: '#remove', showColumns: [ [ { field: 'state', align: 'center', checkbox: true, align: 'center', valign: 'middle' }, { field: 'Id', align: 'center', visible: false }, { field: 'VideoName', title: '视频名称', sortable: true, editable: true, align: 'left' }, { field: 'ShowPictureUrl', title: '默认显示图片', align: 'center', visible: false, }, { field: 'VideoSize', title: '大小', sortable: true, align: 'center' }, { field: 'VideoLength', title: '时长', sortable: true, align: 'center' }, { field: 'ViewTimes', title: '播放次数', align: 'center', sortable: true, }, { field: 'GoodClickTimes', title: '赞', align: 'center', sortable: true, }, { field: 'BadClickTimes', title: '踩', sortable: true, align: 'center' }, { field: 'FavoriteTimes', title: '收藏', sortable: true, align: 'center' }, { field: 'ToTop', title: '置顶', sortable: true, align: 'center', formatter: formatter.VideoToTopFormatter, events: operateEvents }, { field: 'AddDate', title: '创建日期', align: 'center', sortable: true, formatter: formatter.TimeyyyyMMddHHmmss }, { field: 'operate', title: '操作', align: 'center', events: operateEvents, formatter: formatter.operateFormatter } ] ] }; //搜索事件 $(function () { initTable(); $('.btn-search').click(function () { var account = $('.txt-pub-account').val(); var title = $('.txt-video-title').val(); var pubTime = $('#datetimepicker').val(); source.postUrl = postUrl + "?account=" + account + "&title=" + title + "&pubTime=" + pubTime; $table.bootstrapTable('destroy'); initTable(); ////取消置顶 //$('.cancel-top-link,.toTop-link').click(function () { // var id = $(this).attr('ref'); // var isToTop = $(this).attr('rel'); // $.ajax({ // type: 'POST', // async: false, // url: '/Video/ToTop', // data: { id: id, isToTop: isToTop }, // success: function (result) { // if (result.State == 'ok') { // alert("[" + id + "]" + ((isToTop == -1) ? "已取消置顶" : "置顶操作成功!")); // } // if (result.State == 'error') { // alert('置顶/取消置顶 操作失败!'); // } // } // }); //}); //$('thead .bs-checkbox .th-inner').append("<input type='checkbox' id='checkAll'/>"); //$('.checkAll').click(function () { // $('#table-video-list>input[type="checkbox"]').attr('checked', true); //}); }); });
<script src="~/Content/js/viewData/common.list.js"></script> 用于设置 bootstrap的行事件,也一样是公用部分
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
//var source = { // showColumns: [], // targetTable: '#table', // removeTargetId: '#remove' //}; var $table = $(source.targetTable), $remove = $(source.removeTargetId), selections = []; function initTable() { $table.bootstrapTable({ url: source.postUrl, height: operationEvents.getHeight(), columns: source.showColumns }); // sometimes footer render error. setTimeout(function () { $table.bootstrapTable('resetView'); }, 200); $table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $remove.prop('disabled', !$table.bootstrapTable('getSelections').length); // save your data, here just save the current page selections = operationEvents.getIdSelections; // push or splice the selections if you want to save all data selections }); $table.on('expand-row.bs.table', function (e, index, row, $detail) { var img = row.ShowPictureUrl || row.PictureTitleDescription; var name = row.VideoName || row.PictureTitle; var html = ''; if (typeof (img) != "undefined" && img.split(',').length > 0) { $.each(img.split(','), function (index, item) { if (typeof (item) != null && item != "" && index < 5) html += '<img src="' + item.replace("~", "") + '" style="height:200px;padding-right:5px;" alt="' + name + '"/>'; }); } else {//文章或者段子 if (typeof (row.JokeDesc)) { html = row.JokeDesc; } if (typeof (row.ArticalDesc) != "undefined") { html = row.ArticalDesc; } } $detail.html(html); iframeReSize($(row).children('.detail-view').height()); }); $table.on('collapse-row.bs.table', function (e, index, row, $detail) { var detailHig = $(row).children('.detail-view').height(); //$detail.html("").css('height', 0); //var tempHig = $(this).height(); iframeReSize(-detailHig); }); $table.on('all.bs.table', function (e, name, args) { //console.log(name, args); }); $remove.click(function () { var ids = operationEvents.getIdSelections; $table.bootstrapTable('remove', { field: 'id', values: ids }); $remove.prop('disabled', true); }); $(window).resize(function () { $table.bootstrapTable('resetView', { height: operationEvents.getHeight() }); }); } //重定义firame高宽 var iframeReSize = function (height) { var iframeDom = document.getElementById("iframe") || parent.document.getElementById('iframe'); var subWeb = document.frames ? document.frames["iframe"].document : iframeDom.contentDocument; var widowHig = $(window.document).height() - 50 + height;//title+head=95-padding*2 if (typeof (iframeDom) != undefined && typeof (subWeb) != undefined) { $(iframeDom).css('width', '100%'); $(iframeDom).css('min-height', widowHig); } }
以上红色部分都是公用的,理论上直接丢带项目中就可以使用,只需要改下即可,当然,如果前端好的,可以改写成插件, video.list.js中的数据列的部分也可以封装起来。
这是列表页面,对应官方的文档看过了基本也就整出来了,和easyui很像,easy玩的6的,玩这个完全不是问题。