近期完成了B/S形式的教学OA系统和学校OA系统，客户所在区域比较特殊，对于布局有超高要求，锐英源经过研究和创新，实现了客户要求，深入掌握了WEB前端开发、WEB前端外包开发、WEB前端定制开发和WEB前端控件开发的精髓，欢迎各类客户联系锐英源进行此方向的业务洽谈。这里列举出3个前端例子：OA整体布局、树形控件和JQueryDataTables布局定制。

OA整体布局

布局基于Bootstrap开发完成，模板是Xenon。DIV布局为：左侧上为公司名或Logo，左侧中下是菜单项，菜单来源于mysql数据库表内记录；右上为用户信息，右中为数据显示区，可以显示DataTables和form，右下为公司信息。因为模板的CSS和JS比较复杂，进行修改比较麻烦，不过还是顺利实现如下要求：

1、修改了左侧宽度；

2、右侧可以弹出不同的form；

3、前端和ASP.NET后台数据的交互。

树形控件

因为客户要求特殊，此树形控件不是普通的树形控件，是用Table实现的树形控件，起始版本源代码来自于www.codeproject.com，原来代码有近千行，比较复杂；经过不懈努力，添加了如下功能：

1、布局方向的修改

2、TD布局的调整

3、树形节点属性的扩展

4、读取mysql数据表，实时展开下级结点。

JQuery的DataTables布局定制

DataTables显示数据表数据非常方便，功能非常强大，但是封装的很厉害，标识名有转换，调整很麻烦。经过努力，定制修改了如下功能：

1、从原来的三行布局修改为2行，调整了每页大小部分、信息部分、页面调整部分和搜索部分位置和显示方向；

2、DataTable的Cell单元格式方向的调整；

JQuery的DataTables的开发心得

WEB前端的界面往往是动态生成的，用脚本来生成HTML内容，这比基于操作系统的VC++开发或C#开发的界面设计要难的多，因为它们是可视化的，所见即所得，而WEB前端的界面你在设计时很难看到运行时效果，你用VS打开一个ASPX页面，只能看到一个轮廓，所以修改界面元素位置和元素显示细节比VC++或C#困难。这里提供些DataTables的研究细节，帮助大家共同提高。

标识名转换的代码如下：

Jquery.dataTables.js里名称置换13718行
$.extend( DataTable.ext.classes, {
"sWrapper": "dataTables_wrapper",
"sFilter": "dataTables_filter",
"sInfo": "dataTables_info",
"sPaging": "dataTables_paginate paging_", /* Note that the type is postfixed */
"sLength": "dataTables_length",
"sProcessing": "dataTables_processing",

大部分组件用的css是/js/datatables/dataTables.bootstrap.css