我可以在 jqgrid 中更改地窖中的列宽吗?

Question

我可以更改单元格中的列宽吗？我试过这个：

cellattr: function(rowId, value, rowObject, colModel, arrData) {
        return ' style= width: 100% !important; ';
    }

但是没有改变。我没有在colModel中放置宽度，也没有将宽度放在cellattr中，似乎网格默认具有最大宽度，因此列内的文本被剪切。

Answer 1

cellattr可用于

指定列的各个单元格（<td>元素）的属性。列的宽度是所有单元格的公共宽度。但是，如果您需要将样式属性分配给列的所有单元格，则应在代码中使用引号：

cellattr: function () {
    return ' style="width: 100% !important;"';
}

如果这样做，您将看到 style="width: 100% !important;" 属性将分配给列的所有<td>元素。我仍然不确定它是否会遵循您期望的结果。

Answer 2

在这里th:eq(2) 2 表示增加列header / cell宽度destination column。 eq比较从0开始。在这里，我提到了第三列（2），用于增加标题和单元格的宽度。

1. 为了改变Column Header宽度jqgrid使用下面的一个

   $（'.ui-jqgrid-labels> th：eq（2）'）.css（'width'，'400px'）

2. 要更改Column cells宽度jqgrid请使用下面的宽度

   $（'#gridIdtr'）.find（"td：eq（2）"）.each（function（）{$（this）.css（'width'，'400px'）;}）

完整示例：

$(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/Admin/getUsersList',
                datatype: "json",               
                colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number'],
                colModel:[
                    {name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},                       
                    {name:'email',index:'user.primaryEmail',width:150},
                    {name:'isActive',index:'user.isActive',width:80},
                    {name:'firstName',index:'firstName', width:100},
                    {name:'middleName',index:'middleName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'mobileNo',index:'user.mobileNo', width:100},
                    ],
                    rowNum:20,
                    rowList:[10,20,30,40,50],
                    rownumbers: true,  
                    pager: '#pagerDiv',
                    sortname: 'user.primaryEmail',  
                    viewrecords: true,  
                    sortorder: "asc",
            });
            $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
            $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
            $('#load_usersList').width("130");
            $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
            $(".inline").colorbox({inline:true, width:"20%"});
            $('.ui-jqgrid-labels > th:eq(2)').css('width','400px');
            $('#usersList tr').find("td:eq(2)").each(function(){$(this).css('width','400px');});
        });
        function editLink(cellValue, options, rowdata, action)
        {
            return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }