treeGrid样式重新调整，模仿现有bootstrap-table样式

增加一样用法的toolbar样式

src/main/webapp/WEB-INF/view/system/menu/menu.html

@@ -30,7 +30,7 @@
                                 <#button name="删除" icon="fa-remove" clickFun="Menu.delMenu()" space="true"/>
                             @}
                         </div>
-                        <table id="menuTable"/>
+                        <#table id="menuTable"/>
                     </div>
                 </div>
             </div>

src/main/webapp/static/css/plugins/jquery-treegrid/css/jquery.treegrid.css

@@ -5,3 +5,8 @@
 .treegrid-expander-expanded{background-image: url(../img/collapse.png); }
 .treegrid-expander-collapsed{background-image: url(../img/expand.png);}
 .treegrid-selected{background: #f5f5f5 !important;}
+.treegrid-table{border:0 !important;}
+.treegrid-thead th{line-height:40px;border: 0 !important;background:#fff !important;border-radius: 4px;border-left:1px solid #e7eaec !important;border-bottom:2px solid #e7eaec !important;text-align: center;}
+.treegrid-thead tr :first-child{border-left:0 !important}
+.treegrid-tbody td{border: 0 !important;border-left:1px solid #e7eaec !important;border-bottom:1px solid #e7eaec !important;}
+.treegrid-tbody tr :first-child{border-left:0 !important}

src/main/webapp/static/js/common/tree-table-object.js

@@ -16,6 +16,7 @@
         this.code = 'code';// 用于设置父子关系
         this.parentCode = 'pcode';// 用于设置父子关系
         this.expandAll = false;// 是否默认全部展开
+        this.toolbarId = bstableId + "Toolbar";
     };
 
     BSTreeTable.prototype = {
@@ -37,6 +38,7 @@
                     bordered: true,  //是否显示边框
                     expandAll: this.expandAll,  //是否全部展开
                     columns: this.columns,		//列数组
+                    toolbar: "#" + this.toolbarId,//顶部工具条
                 });
             return this;
         },

src/main/webapp/static/js/plugins/jquery-treegrid/extension/jquery.treegrid.extension.js

@@ -12,6 +12,19 @@
 		// 是否有radio或checkbox
 		var hasSelectItem = false;
 		var target = $(this);
+		// 在外层包装一下div，样式用的bootstrap-table的
+		var _main_div = $("<div class='fixed-table-container'></div>");
+		target.before(_main_div);
+		_main_div.append(target);
+		target.addClass("table-hover treegrid-table");
+		// 工具条在外层包装一下div，样式用的bootstrap-table的
+		if(options.toolbar){
+			var _tool_div = $("<div class='fixed-table-toolbar'></div>");
+			var _tool_left_div = $("<div class='bs-bars pull-left'></div>");
+			_tool_left_div.append($(options.toolbar));
+			_tool_div.append(_tool_left_div);
+			_main_div.before(_tool_div);
+		}
 		// 得到根节点
 		target.getRootNodes = function(data) {
 			var result = [];
@@ -93,11 +106,11 @@
 						th.text(item.title);
 						thr.append(th);
 					});
-					var thead = $('<thead></thead>');
+					var thead = $('<thead class="treegrid-thead"></thead>');
 					thead.append(thr);
 					target.append(thead);
 					// 构造表体
-					var tbody = $('<tbody></tbody>');
+					var tbody = $('<tbody class="treegrid-tbody"></tbody>');
 					var rootNode = target.getRootNodes(data);
 					$.each(rootNode, function(i, item) {
 						var tr = $('<tr></tr>');
@@ -197,6 +210,7 @@
 		striped : false, // 是否各行渐变色
 		bordered : false, // 是否显示边框
 		columns : [],
+        toolbar: null,//顶部工具条
 		expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
 		expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标