Commit 3f5e84d0 by cyf783

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

增加一样用法的toolbar样式
parent 9cb0f701
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<#button name="删除" icon="fa-remove" clickFun="Menu.delMenu()" space="true"/> <#button name="删除" icon="fa-remove" clickFun="Menu.delMenu()" space="true"/>
@} @}
</div> </div>
<table id="menuTable"/> <#table id="menuTable"/>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -5,3 +5,8 @@ ...@@ -5,3 +5,8 @@
.treegrid-expander-expanded{background-image: url(../img/collapse.png); } .treegrid-expander-expanded{background-image: url(../img/collapse.png); }
.treegrid-expander-collapsed{background-image: url(../img/expand.png);} .treegrid-expander-collapsed{background-image: url(../img/expand.png);}
.treegrid-selected{background: #f5f5f5 !important;} .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}
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
this.code = 'code';// 用于设置父子关系 this.code = 'code';// 用于设置父子关系
this.parentCode = 'pcode';// 用于设置父子关系 this.parentCode = 'pcode';// 用于设置父子关系
this.expandAll = false;// 是否默认全部展开 this.expandAll = false;// 是否默认全部展开
this.toolbarId = bstableId + "Toolbar";
}; };
BSTreeTable.prototype = { BSTreeTable.prototype = {
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
bordered: true, //是否显示边框 bordered: true, //是否显示边框
expandAll: this.expandAll, //是否全部展开 expandAll: this.expandAll, //是否全部展开
columns: this.columns, //列数组 columns: this.columns, //列数组
toolbar: "#" + this.toolbarId,//顶部工具条
}); });
return this; return this;
}, },
......
...@@ -12,6 +12,19 @@ ...@@ -12,6 +12,19 @@
// 是否有radio或checkbox // 是否有radio或checkbox
var hasSelectItem = false; var hasSelectItem = false;
var target = $(this); 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) { target.getRootNodes = function(data) {
var result = []; var result = [];
...@@ -93,11 +106,11 @@ ...@@ -93,11 +106,11 @@
th.text(item.title); th.text(item.title);
thr.append(th); thr.append(th);
}); });
var thead = $('<thead></thead>'); var thead = $('<thead class="treegrid-thead"></thead>');
thead.append(thr); thead.append(thr);
target.append(thead); target.append(thead);
// 构造表体 // 构造表体
var tbody = $('<tbody></tbody>'); var tbody = $('<tbody class="treegrid-tbody"></tbody>');
var rootNode = target.getRootNodes(data); var rootNode = target.getRootNodes(data);
$.each(rootNode, function(i, item) { $.each(rootNode, function(i, item) {
var tr = $('<tr></tr>'); var tr = $('<tr></tr>');
...@@ -197,6 +210,7 @@ ...@@ -197,6 +210,7 @@
striped : false, // 是否各行渐变色 striped : false, // 是否各行渐变色
bordered : false, // 是否显示边框 bordered : false, // 是否显示边框
columns : [], columns : [],
toolbar: null,//顶部工具条
expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标 expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标 expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment