后台UI模板开发规范

AdminLTE模板

在接触新模板之前，需要对

bootstrap

有初步了解，文档戳这里 主要是了解有哪些控件、样式、元素 可以直接follow使用（形成需要什么的时候直接去查文档的意识，而不是都自己创造）。 AdminLTE是基于bs 搭建的前端样式框架，完全遵循bs的前端规范。

AdminLTE有完善的Demo及文档说明，已部署到本地，戳这里。另外在新版的后台中也附带了链接

小图标

AdminLTE采用fonticon来作为默认的小图标，默认的FontIcon库（字体图标，这种方式的图标其实是字体，因此可以用css控制颜色，大小，甚至加动画，比单纯使用图片的方式更加灵活可控，是目前前端流行技术之一。），请参看Demo文档戳这里。模板附带了两套FontIcon，用法分别如下：

font awesome字体

<i class="fa fa-dashboard"></i> 前面的fa是固定的 后面的是对应的图标

glyphicons

<i class="glyphicon glyphicon-adjust"></i>

标准文档结构

这节的内容基于原版文档（全部的请戳详细文档），针对Razor引擎，做了相应修改。

页头部分

一个页面有3个Title，分别是

html head

里的

title

、文档结构正文中的大标题和副标题。针对Razor，需要在页面上对以下三个参数赋值：

(1) ViewBag.Title => 页面大标题， （请设置）

(2) ViewBag.PageTitle => 显示在页面里的标题 （请设置）

(3) VIewBag.SubTitle => 显示在页面里的小标题 （可不设）

菜单部分

左侧的菜单经过修改之后，添加了小图标，在api设置页可以设置特定的小图标，一定是模板附带的font icon。 还有一个菜单是右上的面包屑菜单，这个菜单整体是个ul，请使用razor语法：

@section headernav{	//section是Razor 预定义节，这里headernav被声明为必须

<li><a href="#">Charts</a></li>

<li class="active">ChartJS</li>

}

ATT:这部分等空了再改成配置，前期请自行添加!!!

正文

这里的正文指的是html文档结构右边的正文部分，在模板里必须是在div.content底下（bootstrap标准， 也可以采用其他允许的class，详细参考BootStrap 格栅系统），下面以一个标准的表格页面作为例子：

<section class="content">  //正文定义
<div class="row">      //bs格栅 定义一个行
<div class="col-xs-12">   //bs格栅 定义一个12格占位的列
<div class="box box-default">    //模板控件 BOX，详见下面的说明
<div class="box-header with-border">
<h3 class="box-title">搜索条件</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-tooltip="tooltip" title="隐藏" data-widget="collapse"><i class="fa fa-minus"></i></button>   // 这个box附带隐藏按钮
</div><!-- /.box-tools -->
</div><!-- /.box-header -->
<div class="box-body">
<div class="form-inline">  //form-inline 定义一行多列的表单
<div class="form-group">  //form-group 定义div内元素为一个行组
<block>
<label for="userId">客户编号:</label>
<input id="userId" type="text" style="width:90px;" placeholder="客户编号" />
</block>
</div>
<button class="btn btn-info btn-flat btn-sm" id="search">搜索</button>
</div>
</div><!-- /.box-body -->
</div>
<!-- /.box -->

<div class="box">
<div class="box-header">
<h3 class="box-title">数据</h3>
</div><!-- /.box-header -->
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">  //定义表格
。。。。
</table>
</div><!-- /.box-body -->
<div id="processingIndicator" class="overlay" style="display:none"> //一个loading层， 见下面的说明
<i class="fa fa-refresh fa-spin"></i>
</div>
</div><!-- /.box -->
</div>
</div>
</section>

这个页面的完整例子，请查看CRM-客户列表页面（请戳详细页面）

上面的例子中使用了一些特殊的组件：

（1） Box， Box作为AdminLTE模板附带的块组件，是最常用的排版组建，应该作为基础牢记，Box有多种样式及用法（原文档）。 我们的页面结构里，content里一定是以Box为基础的！

（2）Loading组件， 模板中提供了非常方便的Loading使用方式，只要在Box的body块之下添加一段loading html即可，html见上面的代码，如果要控制loading显示隐藏，请使用js配合处理

DataTable.js （表格控件）

官方文档，请戳这里,可能需要FQ，实在翻不出去，找Gondar吧 - -!

这里只讲最常见的通用用法，直接上代码

var srtable = $('#example2').on('processing.dt', function (e, settings, processing) {
//自定义loading，就是控制上面提到的loading html组件 这段照抄就好
$('#processingIndicator').css('display', processing ? 'block' : 'none');
}).DataTable({ //开始声明Table
processing: false,//禁掉原生的loading，你也可以扔掉上面的代码用这个
paging: true, //是否分页，要是！
serverSide: true,//是否服务器端处理数据，要是！ 否则分页、排序之类会针对本地数据缓存
ajax: {  //和jquery ajax一样
url: '@Url.Action("GetCustomerList")',
type: 'POST',
data: function (d) {
return $.extend({}, d, {
//自定义参数， 此处非常要注意，d是 datatable的默认ajax参数，最好带着吧，除非你真的不需要。 采用jquery 复制函数来扩展自定义参数~！
"UserId": $('#userId').val(),
});
}
},
columns: [
{ data: 'UserId' },//列的映射， datatable的好用之处是，他会记录下完整的后台json数据，即使列不显示，数据还是在的，至于如何取一会讲。
。。。
],
columnDefs: [
{ "render": function ( data, type, row ) {
return '<a target="_blank" href="http://www.@CurrentShareDomain/hpsc/hpfcl-' + row.ID +'.html">查看</a>'
}, "targets": 4 }    //列定义 这里扩展了一个操作列，用来查看，注意看 row就是一行的元数据，是个JSON
],
"lengthChange": true,//每页大小
"searching": true,//搜索
"ordering": true,//排序
"info": true,//？
"autoWidth":true,//自动列宽， 这里顺带提一提，列多的时候thead的字体可以设置小一些
sDom: 'lrtip'//dom结构 该语句 隐藏filter搜索条 我们这默认搜索应该不需要，有些页面只有一个搜索条，那直接使用这个 删掉这句话
});

//这里开始最强大的交互部分，注意一定on去挂一个事件委托，否则因为html是动态的 事件要丢的，而on是基于事件冒泡，遍历了当前元素的委托而响应的。
$('#example2').on('click', 'tr', function (event) {
var data = srtable.row(this).data();//看行数据就是这么取到的！！！ 这句话一定要记住啊！！！千万！！
if (data != null && data.UserId != null && data.UserId > 0) {
//跳转
window.location = '@Url.Action("userdetail")?userid=' + data.UserId;
}

}).on('dblclick', 'td', function (event) {
//$(this).css('background', '#000');
});

上面提到的是非常非常基本的用法，而深入用法，用到的时候自行查看API，如果看不到那就只好找Gondar FQ看。 另外与knockoutjs等mvvm框架的交互，可以粗糙的使用事件手动挂接的方式，参考CRM-用户详情页-访问记录里的增删改。有更强大的框架支持的话，请post给gondar！

由于DataTable的ajax参数众多，因此我封装了部分参数，如果没有封装进去，而需要使用的请找Gondar！

对DataTable Request的参数，封装成了

JQDataTableModel

类，使用时先集成此类，然后再Action参数处，声明自定义Bind

例如：

[ModelBinder(typeof(JQTBinder))]UserListJQTModel viewModel  // 这里需要特别注意的是SortColumn参数，对应的是列序号

Response参数， 封装成了JQDataTableResponse， 使用如下

var response = new JQDataTableResponse<OpUserDetail>
{
recordsTotal = (int)total,
recordsFiltered = (int)total,
data = data.ToList(),
draw = viewModel.Draw
};
return response.ToJsonResult();

日期范围选择控件

在模板里看到这个控件，文档戳这

组建依赖 moment.js 文档戳这

$('#daterange-btn').daterangepicker(
{
ranges: { //声明快速选择按钮
'今天': [moment(), moment().add(1, 'days')],
'昨天': [moment().subtract(1, 'days'), moment()],
'最近7天': [moment().subtract(6, 'days'), moment()],
'最近30天': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {//应用按钮的响应事件，这里格式化
$('#startDate').html(start.format('YYYY-MM-DD'));
$('#endDate').html(end.format('YYYY-MM-DD HH:mm:ss'))
}
);

Messenger提示框

文档

这里只说明最简单的用法，已集成到模板，使用页面直接调用如下代码

$.message = {
error: function (msg) {
Messenger().post({ message: msg, type: "error", hideAfter: 5, showCloseButton: true });
},
info: function (msg) {
Messenger().post({ message: msg, type: "info", hideAfter: 5, showCloseButton: true });
},
success: function (msg) {
Messenger().post({ message: msg, type: "success", hideAfter: 5, showCloseButton: true });
}};

//上面的代码已写到模板页，调用页调用如下:
$.message.error('保存失败！');

ArtDialog(弹出框)

这个组建提供了丰富的弹出功能，我们这里使用alter、confirm这些功能， 文档在这里

$.message = {
confirm: function (msg, okf, canf) {
var d = dialog({
title: '提示',
content: msg,
okValue: '确定',
ok: function () {
if (okf != null)
okf();
},
cancelValue: '取消',
cancel: function () {
if (canf != null)
canf();
},
width: '20em'
});
d.show();
}
}
//以上代码同样写到模板页了，调用如下:
$.meesage.confirm('确认删除？',function(){
//...删除
});

Tab

Tab控件是模板自带的，使用上非常简单，只要定义如下的Html结构：（具体的参考CRM-用户详情页）

<ul class="nav nav-tabs ui-sortable-handle"> // Nav导航 其中active指的是当前激活的tab， 默认应该填上一个
<li class="active"><a href="#company-info" data-toggle="tab" aria-expanded="true">公司信息</a></li>
<li class=""><a href="#buyerdemands" data-toggle="tab">发布的货盘</a></li>
</ul>
<div class="tab-content no-padding"> //文档内容
<!-- Morris chart - Sales -->
<div class="box box-solid tab-pane active" id="company-info" style="position: relative; height: 600px;">
<div class="box-body">
// 看这里又实用了Box组件
</div>
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
</div>

</div>

复杂表单弹出（Modal）

这个Modal是bootstrap自带的弹出框，术语模态框。 用于弹出显示复杂的自定义的html内容， 完整的api请见文档

这里不贴Html代码了，只讲用法，代码见CRM-用户详情.

$('#md-visit-record .modal-title').text('添加访问记录');//修改title
$('#md-visit-record').modal('show');//弹窗

Modal其实也可以用来做为ArtDialog的功能，只不过比较不同样，所以和argDialog的使用场合，请大家自行区别！

其他组件

模板里附带了很多控件，尤其是在DashBoard页面，大家自行参考，有需要统一说明的可以找Gondar一起。我们使用控件的原则是，简单，方便，不与模板冲突。最重要的是方便大家开发。

MVVM

关于MVVM，我建议大家自行学习，这对前端的建模和写法有很大的启发，传统的依赖Jquery的写法在大型数据交互的情景下，效率非常差，代码可维护性也非常低！这部分下次再详细写。参考Knockoutjs.

上面提到的点，很粗略，大家在使用过程中，还是要养成一定要记得文档和询问，不要简单的Copy就用了，一知半解也许就埋下了BUG点了。而且只用了解熟悉了之后，才能充分发挥控件对我们工作效率的提升。