Возможно ли иметь HTML внутри ячейки jqgrid TreeGrid - PullRequest
Новая
       32

Возможно ли иметь HTML внутри ячейки jqgrid TreeGrid

2 голосов
/ 28 июня 2011

У меня есть ячейка jqgrid treegrid, и я хочу, чтобы содержимое ячейки содержало ссылки и другое форматирование HTML.

возможно ли это с помощью jqgrid treegrid?Я не вижу ничего упомянутого в документации

Ответы [ 3 ]

7 голосов
/ 28 июня 2011

Большинство вещей, которые вы знаете из jqGrid с простыми табличными данными, все еще действительны для древовидной сетки.Таким образом, вы можете использовать пользовательские средства форматирования или пользовательские атрибуты форматирования (cellattr) для размещения HTML в ячейках.При необходимости вы можете поместить фрагменты HTML во входные данные JSON или XML.

Посмотрите на небольшую демонстрацию :

enter image description here

Это толькоВажно понимать, что древовидная сетка не поддерживает подкачку данных, поэтому вам следует установить для параметра rowNum достаточно большое значение, например, 10000.

Я рекомендую вам изучить сетку дерева.Вы увидите скрытые столбцы 'level', 'parent', 'isLeaf', 'expanded', 'loaded' и 'icon' в качестве последних столбцов сетки.Более того, вы увидите, что все узлы дерева (развернутые и не развернутые) уже добавлены в сетку.Еще не развернутые узлы просто скрыты.

Код дерева, используемый в демонстрационной программе: 

$("#tree").jqGrid({
    url: 'AdjacencyTreeWithHTML.json',
    datatype:'json',
    mtype:'GET',
    colNames: ["ID", '<span style="color:Tomato">Description</span>', "Total"],
    colModel: [
        {name:'id', index:'id', width: 1, hidden: true, key: true},
        {name:'desc', width:180, sortable:false},
        {name:'num', width:80, sortable:false, align:'center',
         cellattr: function (rowId, tv, rawObject, cm, rdata) {
            return Number(tv) <=100 ? 'style="background-color:LightGreen"' :
                                      'style="background-color:Tomato"';
        }}
    ],
    treeGridModel:'adjacency',
    height:'auto',
    rowNum: 10000,
    treeGrid: true,
    ExpandColumn:'desc',
    caption:"TreeGrid Test"
});

где 'AdjacencyTreeWithHTML.json': 

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
           {"id": "1", "cell":  ["1",  "Super <b>Item</b>",     "300", "0", "",  "false", "true", "true"]},
           {"id": "2", "cell":  ["2",  "<a href='http://www.google.com'>Google</a>", "100", "1", "1", "false", "false", "true"]},
           {"id": "3", "cell":  ["3",  "Sub Item 1",     "50",  "2", "2", "true",  "true",  "true"]},
           {"id": "4", "cell":  ["4",  "Sub Item 2",     "25",  "2", "2", "false", "false", "true"]},
           {"id": "5", "cell":  ["5",  "Sub-sub Item 1", "25",  "3", "4", "true",  "true",  "true"]},
           {"id": "6", "cell":  ["6",  "Sub Item 3",     "25",  "2", "2", "true",  "true",  "true"]},
           {"id": "7", "cell":  ["7",  "<span style='background-color:LightGreen; color:Tomato'>Item 2</span>", "200", "1", "1", "false", "true", "true"]},
           {"id": "8", "cell":  ["8",  "Sub Item 1",     "100", "2", "7", "false", "false", "true"]},
           {"id": "9", "cell":  ["9",  "Sub-sub Item 1", "50",  "3", "8", "true",  "true",  "true"]},
           {"id": "10", "cell": ["10", "Sub-sub Item 2", "50",  "3", "8", "true",  "true",  "true"]},
           {"id": "11", "cell": ["11", "Sub Item 2",     "100", "2", "7", "true",  "true",  "true"]}
    ]
}
4 голосов
/ 13 мая 2013

Лучший способ добиться этого - использовать собственный форматировщик, просто напишите простую функцию, которая добавляет необходимый HTML-код, например: 

function leadForm(cellvalue,options,rowObject){
    return '<span style="color:#F00">'+cellvalue+'</span>'
}

и свяжите его с ячейкой в ​​colmodel, как описано в ссылке

ссылка на ссылку: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

0 голосов
/ 28 июня 2011

Посмотрите на источник HTML, который он генерирует.Если это просто <table> объект, который, как я подозреваю, есть, тогда вы можете поместить туда любой HTML, какой захотите.

...