Question

希望有人可以提供帮助。

我在将JQWidgets Grid（JqxGrid）加载到JQueryUI标签小部件时遇到了一些问题。每当我将网格宽度设置为百分比值时，它似乎将其更改为像素值。例如，100％的宽度转换为100px。现在我知道JqxGrid和JqxTab组件的先前版本存在类似的问题并且已经解决，但不幸的是我现在无法更改我的选项卡小部件。如果有人知道如何解决这个问题，我们将非常感谢您的帮助。

由于

这是我的代码：

$("#studentgrid").jqxGrid({
        width: '100%',
        source: studentAdapter, 
        theme: theme,     
        filterable: true,
        sortable: true,
        pageable: true,
        autoheight: true,
        altrows: true,
        enabletooltips: true,
        autoshowfiltericon: true,
        groupable: true,
        columns: [
            {text: 'Programme / Unit', datafield: 'student_unit', width: '30%'},
            {text: "Involvement Type", datafield: 'student_type', width: '30%' },                
            {text: 'Student Count', datafield: 'student_count', width: '20%' },
            {text: 'Student Level', datafield: 'student_level', width: '20%' }
        ]
    });

Answer 1

嗯...经过一天的挣扎，我解决了它。我认为这是JqxGrid的一个小故障，因为它将百分比值转换为像素值，因此85％变为85px，100％变为100px。（然后，我可能也做错了）。无论如何，事实证明，如果在初始化网格之前隐藏内容选项卡，百分比值将转换为像素值。例如，我在网格初始化

之上有以下代码

$("#tabContainer").tabs();  
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn(); //Fade in the active ID content                     
        return false;
    });

并且网格表现得很奇怪，但是一旦我将其移动到网格初始化之下，一切都按预期工作了。

Answer 2

jqxGrid不会将百分比转换为像素，或者至少在最新版本中没有 - http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm

将JQXGrid与JQueryUI选项卡小部件一起使用

2 个答案: