Как разделить одну ячейку на 2 в jqgrid?

Question

Можно получить такой дизайн через jqgrid

   ------------------------------- ----------
   | S.N0 | order ID   |   Date  |   Amount |
            ---------    -------
   |      | Location   |   Status|          |
    ------------------------------ ---------
   |   1  |  45        |  1/1/11 |  100     |
            ---------    -------- 
   |      |  E123      |   Done  |          |
    ------------------------------ ----------

Здесь в 2X2 (второй столбец, второй ряд) мне нужно показать идентификатор заказа и местоположение. Значение местоположения должно присутствовать под идентификатором заказа. Возможно?

Answer 1

Для столбца вы можете определить пользовательский форматер, который вы сможете применить любой стиль, который вам нравится. В этом форматере у вас есть доступ к значениям всех объектов в строке. Таким образом, для вашего средства форматирования ордера / местоположения вы можете объединить два вида так:

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

Возможно, вы захотите добавить классы к этим элементам div, чтобы вы могли лучше их оформить в соответствии со своими потребностями. Что касается определения вашего столбца, вам нужно будет объявить customFormatter для одного из столбцов (примечание: тот, в котором он объявлен, будет переменной cellvalue в функции выше), тогда другой столбец необходимо будет скрыть, как есть. необходимо как часть rowObject. Ex.

{
    name: 'OrderID',
    index: 'OrderID',
    width: 90,
    formatter:orderFmatter},
{
    name: 'Location',
    index: 'Location',
    hidden: true},

Вот мой образец в полном объеме:

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

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

Скрипка также доступна здесь.

Это просто оставляет ваш заголовок, который немного сложнее и может стать уродливым. Я предлагаю не делать разделенный уровень в заголовке и делать что-то вроде Order Id/Location, Что можно установить, выполнив это:

jQuery("#grid").jqGrid('setLabel', 'OrderID', 'Order Id/Location');

Как в этой скрипке.

Если вам абсолютно необходимо установить заголовок, как в вашем примере, я вижу, что я могу выяснить, но это должно помочь вам начать.