Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/google-app-engine/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用制表器解锁组标题的水平滚动_Javascript_Tabulator - Fatal编程技术网

Javascript 使用制表器解锁组标题的水平滚动

Javascript 使用制表器解锁组标题的水平滚动,javascript,tabulator,Javascript,Tabulator,我有一张有分组标题的表格。组标题行有多个列,我想与表的其余部分一起滚动。 下面是JSFIDLE中的一个示例表及其生成代码: var employeeeTable=新制表器(“示例表”{ 高度:“311px”, 布局:“fitData”, movableRows:对, 分组人:[“性别”], 栏目:[ {标题:“名称”,字段:“名称”,宽度:200}, {标题:“进度”,字段:“进度”,格式化程序:“进度”,宽度:200}, {标题:“性别”,字段:“性别”,宽度:200}, {标题:“评级”,

我有一张有分组标题的表格。组标题行有多个列,我想与表的其余部分一起滚动。 下面是JSFIDLE中的一个示例表及其生成代码:

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>";
    },
});