Javascript 使用制表器解锁组标题的水平滚动
我有一张有分组标题的表格。组标题行有多个列,我想与表的其余部分一起滚动。 下面是JSFIDLE中的一个示例表及其生成代码:Javascript 使用制表器解锁组标题的水平滚动,javascript,tabulator,Javascript,Tabulator,我有一张有分组标题的表格。组标题行有多个列,我想与表的其余部分一起滚动。 下面是JSFIDLE中的一个示例表及其生成代码: var employeeeTable=新制表器(“示例表”{ 高度:“311px”, 布局:“fitData”, movableRows:对, 分组人:[“性别”], 栏目:[ {标题:“名称”,字段:“名称”,宽度:200}, {标题:“进度”,字段:“进度”,格式化程序:“进度”,宽度:200}, {标题:“性别”,字段:“性别”,宽度:200}, {标题:“评级”,
var employeeeTable=新制表器(“示例表”{
高度:“311px”,
布局:“fitData”,
movableRows:对,
分组人:[“性别”],
栏目:[
{标题:“名称”,字段:“名称”,宽度:200},
{标题:“进度”,字段:“进度”,格式化程序:“进度”,宽度:200},
{标题:“性别”,字段:“性别”,宽度:200},
{标题:“评级”,字段:“评级”,格式化程序:“星形”,对齐:“中心”,宽度:200},
{标题:“出生日期”,字段:“dob”,对齐:“中心”,分类器:“日期”,宽度:200},
],
数据:[
{id:1,姓名:“Oli Bob”,进度:12,性别:“男性”,评级:1,dob:“14/04/1984”,car:1},
{id:2,姓名:“玛丽·梅”,进步:1,性别:“女性”,评级:2,dob:“14/05/1982”,car:true},
{id:3,姓名:“克里斯蒂娜·洛博斯基”,进步:42,性别:“女性”,评级:0,dob:“22/05/1982”,car:“真实”},
{id:4,姓名:“Brendon Philips”,进步:100,性别:“男性”,评级:1,dob:“01/08/1980”},
{id:5,姓名:“Margret Marmajuke”,进步:16,性别:“女性”,评级:5,dob:“31/01/1999”},
{id:6,姓名:“Frank Harbours”,进步:38,性别:“男性”,评级:4,dob:“12/05/1966”,car:1},
{id:7,姓名:“杰米·纽哈特”,进步:23,性别:“男性”,评级:3,dob:“14/05/1985”,car:true},
],
groupHeader:函数(性别、数据){
返回“+性别+”+
"50%";
},
});
下面是当前表行为的一个示例,但我希望“male | 50%”列与表的其余部分水平滚动,而不是冻结。这可能吗
您请求的功能在制表器中不可用 我建议您为组标题对齐选择不同的方法,因为如果您的用户更改列的顺序或调整列的大小,则在组标题中放置值以与列对齐也会导致问题
var employeeeTable = new Tabulator("#example-table", {
height:"311px",
layout:"fitData",
movableRows:true,
groupBy:["gender"],
columns:[
{title:"Name", field:"name", width:200},
{title:"Progress", field:"progress", formatter:"progress", width:200},
{title:"Gender", field:"gender", width:200},
{title:"Rating", field:"rating", formatter:"star", align:"center", width:200},
{title:"Date Of Birth", field:"dob", align:"center", sorter:"date", width:200},
],
data: [
{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, dob:"14/04/1984", car:1},
{id:2, name:"Mary May", progress:1, gender:"female", rating:2, dob:"14/05/1982", car:true},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, dob:"22/05/1982", car:"true"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, dob:"31/01/1999"},
{id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, dob:"12/05/1966", car:1},
{id:7, name:"Jamie Newhart", progress:23, gender:"male", rating:3, dob:"14/05/1985", car:true},
],
groupHeader:function(gender, data) {
return "<div class=\"tabulator-cell\" style=\"text-align: center; width: 200px;\">" + gender + "</div>" +
"<div class=\"tabulator-cell tabulator-cell-average\" style=\"text-align: center; width: 200px;\" >50%</div>";
},
});