使用Less,FontAwesome 重写EasyUI TreeGrid样式

1.来张效果图

2.知识准备

熟悉CSS3,HTML
属性Less
3.CSS样式渲染优先级

!important>行内>内嵌>外部引用
4.实现代码
  1 /*EasyUI Tree的展开/收缩依赖这个字体，请不要删除他*/
  2 @font-face {
  3     font-family: 'FontAwesome';
  4     src: url('../../bootstarp/fonts/fontawesome-webfont.eot?v=4.5.0');
  5     src: url('../../bootstarp/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../../bootstarp/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../../bootstarp/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../../bootstarp/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../../bootstarp/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  6     font-weight: normal;
  7     font-style: normal;
  8 }
  9 
 10 /*树型表格样式*/
 11 .comEasyuiTreeGrid {
 12 
 13     .tdBorderStyle() {
 14         td {
 15             border-style: solid;
 16         }
 17     }
 18 
 19     .datagrid-row-selected {
 20         background-color: rgb(89, 155, 233);
 21         /*background-color: transparent;*/
 22         color: #000;
 23     }
 24 
 25     .datagrid-row-over {
 26         /*background-color: rgba(89, 155, 233, 0.75);*/
 27     }
 28 
 29     .datagrid-header {
 30 
 31         @headCell_H: 40px;
 32         height: @headCell_H !important;
 33         background: transparent;
 34         .tdBorderStyle();
 35 
 36         .datagrid-header-inner {
 37 
 38             .datagrid-htable {
 39                 height: @headCell_H !important;
 40                 background-color: transparent;
 41             }
 42 
 43             .datagrid-header-row {
 44                 height: @headCell_H;
 45                 //表头所在tr的样式
 46                 .datagrid-cell {
 47                     height: @headCell_H;
 48                     line-height: @headCell_H;
 49 
 50                     span {
 51                         font-size: 14px;
 52                         font-weight: bold;
 53                     }
 54                     /*background-color: red;*/
 55                 }
 56             }
 57         }
 58     }
 59 
 60     .datagrid-body {
 61         @bodyCell_H: 34px;
 62 
 63         .tdBorderStyle();
 64 
 65         .datagrid-btable {
 66             .datagrid-row {
 67                 .datagrid-cell {
 68                     /*height: @bodyCell_H;
 69                     line-height: @bodyCell_H;*/
 70                     /*background-color:red;*/
 71                     .fa() {
 72                         display: inline-block;
 73                         font: normal normal normal 14px/1 FontAwesome;
 74                         font-size: 14px;
 75                         text-rendering: auto;
 76                         -webkit-font-smoothing: antialiased;
 77                         -moz-osx-font-smoothing: grayscale;
 78                         margin-top: 3px;
 79                     }
 80 
 81                     span {
 82                         height: @bodyCell_H;
 83                         line-height: @bodyCell_H;
 84                         background: none;
 85                         text-align: center;
 86                         margin-top: 3px;
 87 
 88                         &.tree-collapsed:before {
 89                             //关闭时
 90                             .fa();
 91                             content: "f0da";
 92                         }
 93 
 94                         &.tree-expanded:before {
 95                             //展开时
 96                             .fa();
 97                             -moz-transform: rotate(45deg);
 98                             -ms-transform: rotate(45deg);
 99                             -o-transform: rotate(45deg);
100                             -webkit-transform: rotate(45deg);
101                             transform: rotate(45deg);
102                             content: "f0da";
103                         }
104 
105                         &.tree-icon {
106                             margin-top: 3px;
107                         }
108                         //文件夹
109                         &.tree-folder:before {
110                             .fa();
111                             content: "f07b";
112                         }
113                         //文件夹 展开时
114                         &.tree-folder-open:before {
115                             .fa();
116                             content: "f07c";
117                         }
118                         //文件
119                         &.tree-file:before {
120                             .fa();
121                             content: "f07b";
122                         }
123                     }
124                 }
125             }
126         }
127     }
128 
129     .datagrid-footer {
130         .tdBorderStyle();
131     }
132 }