Skip to content

G
guns-vip
Commit f78457ab by cyf783
Options

tree table 添加高度设置，超出高度出现滚动条。设置高度后单元格需要设置宽度，否则将平均分配，选择列默认36px，宽度设置支持px及%

parent 160999d9
Showing with 33 additions and 9 deletions
src/main/webapp/static/css/plugins/jquery-treegrid/css/jquery.treegrid.css
...@@ -5,7 +5,9 @@ ...@@ -5,7 +5,9 @@
.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-table{border:0 !important;margin-bottom:0}
.treegrid-table tbody {display:block;height:auto;overflow-y:auto;}
.treegrid-table thead, .treegrid-table tbody tr {display:table;width:100%;table-layout:fixed;}
.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 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-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 td{border: 0 !important;border-left:1px solid #e7eaec !important;border-bottom:1px solid #e7eaec !important;}
......
src/main/webapp/static/js/common/tree-table-object.js
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
this.parentCode = 'pcode';// 用于设置父子关系 this.parentCode = 'pcode';// 用于设置父子关系
this.expandAll = false;// 是否默认全部展开 this.expandAll = false;// 是否默认全部展开
this.toolbarId = bstableId + "Toolbar"; this.toolbarId = bstableId + "Toolbar";
this.height = 665; //默认表格高度665
}; };
BSTreeTable.prototype = { BSTreeTable.prototype = {
...@@ -39,6 +40,7 @@ ...@@ -39,6 +40,7 @@
expandAll: this.expandAll, //是否全部展开 expandAll: this.expandAll, //是否全部展开
columns: this.columns, //列数组 columns: this.columns, //列数组
toolbar: "#" + this.toolbarId,//顶部工具条 toolbar: "#" + this.toolbarId,//顶部工具条
height: this.height,
}); });
return this; return this;
}, },
...@@ -80,6 +82,12 @@ ...@@ -80,6 +82,12 @@
this.expandAll = expandAll; this.expandAll = expandAll;
}, },
/** /**
* 设置表格高度
*/
setHeight: function (height) {
this.height = height;
},
/**
* 设置ajax post请求时候附带的参数 * 设置ajax post请求时候附带的参数
*/ */
set: function (key, value) { set: function (key, value) {
......
src/main/webapp/static/js/plugins/jquery-treegrid/extension/jquery.treegrid.extension.js
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
// 判断有没有选择列 // 判断有没有选择列
if(index==0&&column.field=='selectItem'){ if(index==0&&column.field=='selectItem'){
hasSelectItem = true; hasSelectItem = true;
var td = $('<td style="text-align:center"></td>'); var td = $('<td style="text-align:center;width:36px"></td>');
if(column.radio){ if(column.radio){
var _ipt = $('<input name="select_item" type="radio" value="'+item[options.id]+'"></input>'); var _ipt = $('<input name="select_item" type="radio" value="'+item[options.id]+'"></input>');
td.append(_ipt); td.append(_ipt);
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
} }
tr.append(td); tr.append(td);
}else{ }else{
var td = $('<td></td>'); var td = $('<td style="'+((column.width)?('width:'+column.width):'')+'"></td>');
td.text(item[column.field]); td.text(item[column.field]);
tr.append(td); tr.append(td);
} }
...@@ -95,7 +95,14 @@ ...@@ -95,7 +95,14 @@
// 构造表头 // 构造表头
var thr = $('<tr></tr>'); var thr = $('<tr></tr>');
$.each(options.columns, function(i, item) { $.each(options.columns, function(i, item) {
var th = $('<th style="padding:10px;"></th>'); var th = null;
// 判断有没有选择列
if(i==0&&item.field=='selectItem'){
hasSelectItem = true;
th = $('<th style="width:36px"></th>');
}else{
th = $('<th style="padding:10px;'+((item.width)?('width:'+item.width):'')+'"></th>');
}
th.text(item.title); th.text(item.title);
thr.append(th); thr.append(th);
}); });
...@@ -108,6 +115,10 @@ ...@@ -108,6 +115,10 @@
// 添加加载loading // 添加加载loading
var _loading = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">正在努力地加载数据中，请稍候……</div></td></tr>' var _loading = '<tr><td colspan="'+options.columns.length+'"><div style="display: block;text-align: center;">正在努力地加载数据中，请稍候……</div></td></tr>'
tbody.html(_loading); tbody.html(_loading);
// 默认高度
if(options.height){
tbody.css("height",options.height);
}
$.ajax({ $.ajax({
type : options.type, type : options.type,
url : options.url, url : options.url,
...@@ -149,6 +160,8 @@ ...@@ -149,6 +160,8 @@
if (!options.expandAll) { if (!options.expandAll) {
target.treegrid('collapseAll'); target.treegrid('collapseAll');
} }
//动态设置表头宽度
thead.css("width", tbody.children(":first").css("width"));
// 行点击选中事件 // 行点击选中事件
target.find("tbody").find("tr").click(function(){ target.find("tbody").find("tr").click(function(){
if(hasSelectItem){ if(hasSelectItem){
...@@ -226,6 +239,7 @@ ...@@ -226,6 +239,7 @@
striped : false, // 是否各行渐变色 striped : false, // 是否各行渐变色
columns : [], columns : [],
toolbar: null,//顶部工具条 toolbar: null,//顶部工具条
height: 0,
expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标 expanderExpandedClass : 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标 expanderCollapsedClass : 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标
......
src/main/webapp/static/modular/system/dept/dept.js
...@@ -14,7 +14,7 @@ var Dept = { ...@@ -14,7 +14,7 @@ var Dept = {
Dept.initColumn = function () { Dept.initColumn = function () {
return [ return [
{field: 'selectItem', radio: true}, {field: 'selectItem', radio: true},
{title: 'id', field: 'id', align: 'center', valign: 'middle'}, {title: 'id', field: 'id', align: 'center', valign: 'middle',width:'50px'},
{title: '部门简称', field: 'simplename', align: 'center', valign: 'middle', sortable: true}, {title: '部门简称', field: 'simplename', align: 'center', valign: 'middle', sortable: true},
{title: '部门全称', field: 'fullname', align: 'center', valign: 'middle', sortable: true}, {title: '部门全称', field: 'fullname', align: 'center', valign: 'middle', sortable: true},
{title: '排序', field: 'num', align: 'center', valign: 'middle', sortable: true}, {title: '排序', field: 'num', align: 'center', valign: 'middle', sortable: true},
......
src/main/webapp/static/modular/system/menu/menu.js
...@@ -14,11 +14,11 @@ var Menu = { ...@@ -14,11 +14,11 @@ var Menu = {
Menu.initColumn = function () { Menu.initColumn = function () {
var columns = [ var columns = [
{field: 'selectItem', radio: true}, {field: 'selectItem', radio: true},
{title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle'}, {title: 'id', field: 'id', visible: false, align: 'center', valign: 'middle',width:'50px'},
{title: '菜单名称', field: 'name', align: 'center', valign: 'middle', sortable: true}, {title: '菜单名称', field: 'name', align: 'center', valign: 'middle', sortable: true,width:'17%'},
{title: '菜单编号', field: 'code', align: 'center', valign: 'middle', sortable: true}, {title: '菜单编号', field: 'code', align: 'center', valign: 'middle', sortable: true,width:'12%'},
{title: '菜单父编号', field: 'pcode', align: 'center', valign: 'middle', sortable: true}, {title: '菜单父编号', field: 'pcode', align: 'center', valign: 'middle', sortable: true},
{title: '请求地址', field: 'url', align: 'center', valign: 'middle', sortable: true}, {title: '请求地址', field: 'url', align: 'center', valign: 'middle', sortable: true,width:'15%'},
{title: '排序', field: 'num', align: 'center', valign: 'middle', sortable: true}, {title: '排序', field: 'num', align: 'center', valign: 'middle', sortable: true},
{title: '层级', field: 'levels', align: 'center', valign: 'middle', sortable: true}, {title: '层级', field: 'levels', align: 'center', valign: 'middle', sortable: true},
{title: '是否是菜单', field: 'isMenuName', align: 'center', valign: 'middle', sortable: true}, {title: '是否是菜单', field: 'isMenuName', align: 'center', valign: 'middle', sortable: true},
......
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