php ligerui 导出excel,LigerUI表格树的使用

项目资源下载地址：

提取码：

tkyk

里面有很多的树和一些常用的小功能，在此只写出表格树的使用

#maingrid{

width: 100% !important;

margin-bottom:10px;

}

/* 让文字垂直居中 */

.l-grid-row-cell-inner{

line-height: 183px;

}

/* 加号按钮 */

.l-grid-tree-link-close{

margin-top: 3px;

}

/* 减号按钮 */

.l-grid-tree-link-open{

margin-top: 3px;

}

var manager;

var TreeDeptData = {

Rows: [{

name: "年份",

children: [{

name: "月份",

fontSize: '',

title: '',

company: '',

symbol: '',

byxs: '',

Maximum: '',

Minimum: '',

children: [{

name: "",

fontSize: '111',

title: '222',

company: '333',

symbol: '444',

statistics:'555'

},

{

name: "",

fontSize: '111',

title: '222',

company: '333',

symbol: '444',

statistics:'555'

},

{

name: "",

fontSize: '111',

title: '222',

company: '333',

symbol: '444',

statistics:'555'

},

{

name: "",

fontSize: '111',

title: '222',

company: '333',

symbol: '444',

statistics:'555'

}

]

}]

}, ]

};

$(function() {

manager = $("#maingrid").ligerGrid({

columns: [

{

display: '',

name: 'name',

id: 'zu',

width: 100,

minWidth :100, //表格列最小允许宽度(调整大小时将不允许小于这个值)

align: 'left'

},

{

display: '文号',

name: 'symbol',

width: 356,

type: 'float', //排序类型,包括string、int、float、date

align: 'left'

},

{

display: '文件字号',

name: 'fontSize',

width: 356,

type: 'int', //排序类型,包括string、int、float、date

align: 'left'

},

{

display: '文件标题',

name: 'title',

width: 356,

type: 'float', //排序类型,包括string、int、float、date

align: 'left'

},

{

display: '来文单位',

name: 'company',

width: 356,

type: 'float', //排序类型,包括string、int、float、date

align: 'left'

},

{

display: '统计',

name: 'statistics',

width: 356,

type: 'float', //排序类型,包括string、int、float、date

align: 'left'

}

],

width: '100%',

height: '95%',

title: '',

usePager:false, //是否分页

enabledSort:false, //是否允许排序

data: TreeDeptData,

alternatingRow: false, //是否附加奇偶行效果行,

allowHideColumn:false, //是否显示'切换列层'按钮

tree: { //树模式

columnId: 'zu', //以树形显示的字段id ,或者name值也可以

//columnName:'name', //要显示为树形的字段name

}

});

manager.collapseAll(); //初始化把所有树收缩

//为第一级所有的行修改样式

$('.l-grid-body-table > tbody > tr:visible').each(function(i,n){

$(n).children('td').css('border-right','0'); //让所有的td右边框为0

$(n).children('td:last-child').css('border-right','1px solid #A3C0E8');//给最后一个td加上border

$(n).css("background","white"); //设置第一级整行的样式

});

//为第二级所有的行修改样式

$('.l-grid-body-table > tbody > tr:hidden').each(function(i,e){

var html = $(e).children('td').next().find('div').html();

if(html == ''){

$(e).children('td').css('border-right','0'); //让所有的td右边框为0

$(e).children('td:last-child').css('border-right','1px solid #A3C0E8');//给最后一个td加上border

$(e).css("background","white"); //设置第二级整行的样式

}

});

});

效果图：