Я использую следующую сетку. Если вы щелкните любую ячейку столбца Link, будет сгенерирована новая сетка ниже.

И всякий раз, когда я пытаюсь добавить стиль css, используя следующую строку в приведенном ниже коде document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";, он продолжает выдавать ошибку ("Uncaught TypeError: Cannot read property 'style' of null). Однако, если вы его закомментируете, все работает нормально. Я в основном пытаюсь добавить больше места между первой сеткой и вновь созданной сеткой, которая создается каждый раз, когда я нажимаю на любое значение ячейки столбца Link.

  // prepare the data
    var url = "https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/feed.xml";
    var source =
    {
        datatype: "xml",
        datafields: [
            { name: 'title', type: 'string' },
            { name: 'link', type: 'string' },
            { name: 'pubDate', type: 'date' },
            { name: 'creator', map: 'dc\\:creator', type: 'string' },
       ],
        root: "channel",
        record: "item",
        url: url
    };
    var linkrenderer = function (row, column, value) {
        if (value.indexOf('#') != -1) {
            value = value.substring(0, value.indexOf('#'));
        }
        var format = { target: '"_blank"' };
        var html = $.jqx.dataFormat.formatlink(value, format);
        //console.log(html)
        return html;
    }
    var dataAdapter = new $.jqx.dataAdapter(source);
    
    var cellsrenderer = function (row, column, value) {
        var currentRowData = $("#jqxgrid").jqxGrid('getrowdata', row);
        var rowDataLink = currentRowData["link"];

        return "<a href =" + rowDataLink + ">" + value + "</a>";
    };
        
        
    // Create jqxGrid.
    $("#jqxgrid").jqxGrid({
        width: 850,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        sortable: true,
        columns: [
          { text: 'Link', datafield: 'link', width: 550},
          { text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
          { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
          { text: 'Creator', datafield: 'creator', width: 200 }
       ]
    });
    
     $("#jqxgrid").on("rowselect", function (e) {

        let link = $("#jqxgrid").jqxGrid('getcell', e.args.rowindex, 'link');
        console.log(link.value);
        $('#commonWindow').remove();
			  var elem = document.createElement('div');
			  elem.id = 'commonWindow';
        document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";
        
        $(elem).jqxGrid({
            source: dataAdapter, columns: [
                { text: 'Link', datafield: 'link', width: 550 },
                { text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
                { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                { text: 'Creator', datafield: 'creator', width: 200 }
            ] });
        document.body.appendChild(elem);
     });
<div id="jqxgrid">
        </div>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
0
Tan 25 Сен 2018 в 23:35

2 ответа

Лучший ответ

К тому времени, как ваш код достигнет следующей строки:

document.getElementById("commonWindow").style.padding = "50px 10px 20px 30px";

... вы еще не добавили элемент в DOM, поэтому DOM не может найти элемент, когда вы запрашиваете его с помощью document.getElementById.

Место, где вы фактически добавляете элемент в DOM, появляется позже:

document.body.appendChild(elem);

Вместо этого вы должны ссылаться на элемент напрямую, используя elem, как и в другом месте вашего кода, например:

elem.style.padding = "50px 10px 20px 30px";

Тем не менее, все это может иметь смысл просто включить правило заполнения в качестве статического стиля в ваш CSS, а не добавлять его в свой JavaScript, как это.

0
Maximillian Laumeister 25 Сен 2018 в 20:48

Вы ищете элемент с идентификатором commonWindow в документе перед тем, как поместить его туда. Его еще нет, так что вы получаете null.

Также, если у вас уже есть ссылка на элемент в переменной elem, вы можете установить стиль непосредственно для него. Вам не нужно искать его в документе.

$("#jqxgrid").on("rowselect", function (e) {
    let link = $("#jqxgrid").jqxGrid('getcell', e.args.rowindex, 'link');
    console.log(link.value);
    $('#commonWindow').remove();

    var elem = document.createElement('div');
    elem.id = 'commonWindow';

    document.body.appendChild(elem);
    elem.style.padding = "50px 10px 20px 30px";

    $(elem).jqxGrid({
        source: dataAdapter,
        columns: [
            { text: 'Link', datafield: 'link', width: 550 },
            { text: 'Title', datafield: 'title', width: 200, cellsrenderer: cellsrenderer },
            { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
            { text: 'Creator', datafield: 'creator', width: 200 }
        ]
    });
});
0
AvcS 25 Сен 2018 в 20:45