如何自定义标题的jqGrid

我想这样 enter image description here
我可以DIVID体的jqGrid我写这篇文章的代码如何自定义标题的jqGrid

var data = [[1, 45, "E123", "1/1/11", "Done", 100], [2, 46, "E124", "1/12/11", "Done", 100]]; 

$("#grid").jqGrid({ 
    datatype: "local", 
    height: 250, 
    colNames: ["SNO", "OrderID", "Location", "Date", "Status", "Amount"], 
    colModel: [{ 
     name: 'SNO', 
     index: 'SNO', 
     width: 60}, 
    { 
     name: 'OrderID', 
     index: 'OrderID', 
     width: 90, 
     formatter:orderFmatter}, 
    { 
     name: 'Location', 
     index: 'Location', 
     hidden: true}, 
    { 
     name: 'Date', 
     index: 'Date', 
     width: 80, 
     formatter:dateStatusFmatter}, 
    { 
     name: 'Status', 
     index: 'Status', 
     width: 80, 
     hidden: true}, 
    { 
     name: 'Amount', 
     index: 'Amount', 
     width: 80} 
    ], 
    caption: "Stack Overflow Example", 
}); 

var names = ["SNO", "OrderID", "Location", "Date", "Status", "Amount"]; 
var mydata = []; 
for (var i = 0; i < data.length; i++) { 
    mydata[i] = {}; 
    for (var j = 0; j < data[i].length; j++) { 
     mydata[i][names[j]] = data[i][j]; 
    } 
} 

for (var i = 0; i <= mydata.length; i++) { 
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]); 
} 

function orderFmatter(cellvalue, options, rowObject) 
{ 
    return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Location + "</div>"; 
} 

function dateStatusFmatter(cellvalue, options, rowObject) 
{ 
    return "<div>" + cellvalue + "</div><hr /><div>" + rowObject.Status+ "</div>"; 
}

该代码创建这个网格
enter image description here

在这个网格中创建的jqGrid我想要divid头像身体网格

来源

2012-12-17 Pouya

jqGrid支持header grouping。如果您只需在列标题中放置多行文本，则可以通过更简单的方式实现此功能。

colNames中的值可以是HTML片段。所以你应该把你需要的代码放在colNames的相应项目中，并添加额外的CSS，这些CSS强制使用列标题的高度，而不是jqGrid默认使用的固定高度。

The demo发生在最后一列的列标题中的HTML片段

<div style="height: auto; padding: 4px 0;"> 
    <span>Shipped</span><hr /><span>via</span> 
</div>

，并使用另外CSS

.ui-jqgrid .ui-jqgrid-labels .ui-th-column>div {height: auto}

其结果一送网格为对图片下面

enter image description here

来源

2012-12-17 11:39:32 Oleg

感谢您的帮助，但我有有一个问题，当使用这个解决方案时，我不能使用列进行排序Via，只需按发货排序。我想当用户点击Via列表按Via排序，当用户点击与发货的网格排序与发货。谢谢。 – Pouya

@Pouya：排序图标将被放置在相同的''中。所以你必须添加更多的代码才能使所有的工作。看看[答案]（http://stackoverflow.com/a/4898901/315935）和[这一个]（http://stackoverflow.com/a/7256972/315935）。 – Oleg

谢谢你的帮助。 – Pouya

如何自定义标题的jqGrid

回答

相关问题