Родительская сетка уже, чем подсетка free-jqgrid 4.8.0


В прошлый раз я изменил версию jqGrid (4.6.0 на free-jqgrid 4.8.0) и jQuery (1.7.2 на 2.1.3) в своем приложении.
В моей родительской сетке у меня есть 2 видимых столбца шириной 100 пикселей каждый, а в подсетке есть 5 видимых столбцов шириной 200 пикселей каждый. В предыдущей версии подсетка была наверху, поэтому я мог видеть все столбцы из подсетки, не изменяя размер какого-либо столбца.
После изменения, чтобы получить тот же результат. Если я хочу увидеть все столбцы из подсетки, мне нужно сделать обходной путь и добавить пустой столбец (чего я не хочу делать). Что я могу сделать?
Он может работать с большим вторым столбцом в родительской сетке, но я не хочу изменять его размер, и я предпочитаю оставить его на 100 пикселей с.

Определение сеток:

function loadFirstGrid() {
        var data = {
            "page": "1",
            "records": "3",
            "rows": [
            { "DataID": "1", "DataDesc": "Test 1", "DataTitle": "Test 1" },
            { "DataID": "2", "DataDesc": "Test 2", "DataTitle": "Test 2" },
            { "DataID": "3", "DataDesc": "Test 3", "DataTitle": "Test 3" }
        ]
        };

        $("#FirstGrid").jqGrid({
            datatype: "xml",
            mtype: "GET",
            contentType: "text/xml",
            colNames: ['DataID', 'DataDesc', 'DataTitle'],
            colModel: [
            { name: 'DataID', index: 'DataID', hidden: true, key: true },
            { name: 'DataDesc', index: 'DataDesc', width: 100 },
            { name: 'DataTitle', index: 'DataTitle', width: 100 }
          ],
            rowNum: 10000,
            datatype: "jsonstring",
            datastr: data,
            ignoreCase: true,
            sortname: 'DataDesc',
            sortorder: 'asc',
            emtyrecords: "Nothing to display",
            viewrecords: true,
            sortable: true,
            height: "100%",
            shrinkToFit: false,
            loadonce: true,
            scrollOffset: 0,
            width: 2000,
            caption: 'First Grid',
            subGrid: true,
            subGridRowExpanded: loadSubGrid,
            gridview: false
        });
    }

    function loadSubGrid(subgrid_id, row_id) {
        var data = {
            "page": "1",
            "records": "3",
            "rows": [
            { "SubGridID": "1", "FirstCol": "Test 1", "SecondCol": "Test 1", "ThirdCol": "Test 1", "FourthCol": "Test 1", "FifthCol": "Test 1" },
            { "SubGridID": "2", "FirstCol": "Test 2", "SecondCol": "Test 2", "ThirdCol": "Test 1", "FourthCol": "Test 1", "FifthCol": "Test 1" },
            { "SubGridID": "3", "FirstCol": "Test 3", "SecondCol": "Test 3", "ThirdCol": "Test 1", "FourthCol": "Test 1", "FifthCol": "Test 1" }
        ]
        };

        var subgrid_table_id;
        var dataID = $("#FirstGrid").jqGrid('getRowData', row_id).DataID;
        subgrid_table_id = subgrid_id + "_SubGrid";
        $("#" + subgrid_id).html("<div><table id='" + subgrid_table_id + "' class='scroll'></table></div>");
        $("#" + subgrid_table_id).jqGrid({
            datatype: "xml",
            mtype: "GET",
            contentType: "text/xml",
            colNames: ['SubGridID', 'FirstCol', 'SecondCol', 'ThirdCol', 'FourthCol', 'FifthCol'],
            colModel: [
                { name: 'SubGridID', index: 'SubGridID', hidden: true, key: true },
                { name: 'FirstCol', index: 'FirstCol', editable: false, width: 200 },
                { name: 'SecondCol', index: 'SecondCol', width: 200 },
                { name: 'ThirdCol', index: 'ThirdCol', width: 200 },
                { name: 'FourthCol', index: 'FourthCol', width: 200 },
                { name: 'FifthCol', index: 'FifthCol', width: 200 },
              ],
            rowNum: 10000,
            datatype: "jsonstring",
            datastr: data,
            ignoreCase: true,
            sortname: 'FirstCol',
            sortorder: 'asc',
            emtyrecords: "Nothing to display",
            viewrecords: true,
            sortable: true,
            height: "100%",
            shrinkToFit: false,
            loadonce: true,
            scrollOffset: 0,
            width: 1900,
            caption: 'SubGrid',
            gridview: false
        });
    }

Изменить:
Демо-версия доступна здесь
Спасибо!


person Mlodey    schedule 08.04.2015    source источник


Ответы (1)


В структуре CSS бесплатного jqGrid 4.8 много изменений по сравнению с jqGrid 4.7. Поэтому я бы порекомендовал решить вашу проблему другим способом. Вы можете добавить новый последний столбец в конец родительской сетки. Столбец может иметь пустой заголовок. В результате родительская сетка раньше будет выглядеть ровно линейно, но теперь у вас не будет описанной проблемы.

Я изменил вашу демонстрацию на следующую http://jsfiddle.net/OlegKi/2tkkqbeq/4/. Я удалил множество ненужных настроек, таких как class='scroll', datatype: "xml" (которые нельзя использовать вместе с datatype: "jsonstring"). Я удалил все index свойства из colModel. Я удалил некоторые другие свойства, которые теперь используются по умолчанию.

Важно удалить свойство gridview: false, которое заставляет сетку работать медленно и не имеет других преимуществ. Я рекомендую вам использовать datatype: "local" с data: data.rows вместо datatype: "jsonstring", datastr: data. Основное преимущество изменений: входные данные будут отсортированы по jqGrid, что соответствует используемой вами опции sortname.

Я бы порекомендовал вам использовать autowidth: true в подсетке.

Последнее, но очень важное изменение, которое я сделал в вашей демонстрации, - это включение опции idPrefix: "s_" + row_id + "_" во вложенную сетку. Без использования этой опции у вас будут дубликаты идентификаторов на странице, потому что и основная сетка, и подсетка будут иметь одинаковые значения id (1, 2, 3).

person Oleg    schedule 08.04.2015
comment
Спасибо Олегу за помощь. Я не хотел использовать дополнительную колонку, но если это необходимо, то это небольшое изменение. Это представление имеет datatype: "xml" в моем приложении, но я изменил его для демонстрации. Я добавил gridview: false, потому что в моем приложении, когда флаг установлен на true, я получаю сообщение об ошибке JavaScript runtime error: Invalid target element for this operation. в строке: self.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow) - person Mlodey; 08.04.2015
comment
@ user2595836: Добро пожаловать! Разметка HTML, которую вы использовали раньше, была относительно экзотической, потому что подсетка является дочерней строкой основной сетки (таблицы), но таблица была недостаточно большой. Достаточно большой была только ширина тела div над сеткой. Таким образом, создание дополнительной колонки - это наиболее чистое прагматичное решение, которое будет содержать ваш существующий макет. Такое решение будет работать и с jqGrid 4.6. - person Oleg; 08.04.2015
comment
@ user2595836. Я знаю проблемы с self.firstElementChild.innerHTML только в IE в версиях меньше 10. Если вы хотите получить последние исходные коды бесплатного jqGrid из github, вам не следует есть проблема. Вы можете загрузить последнюю версию бесплатного jqGrid прямо из github, как описано здесь, но вы должны использовать этот способ только в демонстрациях, а не в окончательных решениях. - person Oleg; 08.04.2015
comment
Я загрузил новую версию, но проблема все еще существует. Я попытался выяснить, в чем проблема, и заменил строку self.firstElementChild.innerHTML += rowData.join(''); на $(self.firstElementChild).replaceWith('<tbody>' + self.firstElementChild.innerHTML + rowData.join('') + '</tbody>');. Я протестировал это в IE9, и он работает. Он не был глубоко протестирован, поэтому я не знаю, не сломано ли что-то, но больше нет ошибки с изменением innerHTML для объекта. Еще раз спасибо за помощь. Завтра попробую сделать еще несколько тестов. - person Mlodey; 08.04.2015
comment
@ user2595836: Не могли бы вы предоставить демонстрацию, которая может быть использована для воспроизведения проблемы с self.firstElementChild.innerHTML? - person Oleg; 08.04.2015
comment
Да, конечно, это также есть в демонстрации, которую Вы отправили в этом сообщении: jsfiddle.net/OlegKi/2tkkqbeq/ 4 Пожалуйста, не могли бы Вы открыть его в Internet Explorer в режиме IE9? Это потому, что в IE9 есть ошибка, заключающаяся в том, что вы не можете изменить innerHTML в некоторых элементах, таких как table, tbody и т. Д. - person Mlodey; 09.04.2015
comment
@ user2595836: в демонстрации используется не последний код с github. Использует версию 4.8. Чтобы использовать последний код, можно использовать такие пути, как //rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js (см. вики). Попробуйте демонстрацию jsfiddle.net/2tkkqbeq/6 - person Oleg; 09.04.2015
comment
Извините, я думал, что получил последний код. Я проверил, с gridview проблем нет. Но есть еще одна проблема, у меня есть сетка, как в этой демонстрации: jsfiddle.net/Mlodey/97jL4265 / 10 Единственная разница в том, что в моем приложении я использую datatype: "xml" (три строки с комментариями в первой сетке). Когда данные загружаются, отображается только один столбец - это должен быть Team_Desc, но он заполнен идентификаторами, а не описаниями команд. Когда я прокомментировал строки: subGrid and subGridRowExpanded данные отображались правильно. - person Mlodey; 09.04.2015
comment
@ user2595836: Извините, но я не понимаю, в чем у вас проблема. Если я открываю демонстрацию, я вижу сетку с данными из столбца 'Team_Desc': Test 1, Test 2, Test 3. Я вижу идентификаторы, только если использую Инструменты разработчика для изучения HTML. - person Oleg; 09.04.2015
comment
Я не могу воспроизвести проблему на jsfiddle. Он находится в моем приложении, когда я получаю данные в виде xml из своего WebService. В каждой сетке с subGrid: true. Столбец с идентификаторами виден, а второй столбец имеет атрибут display: none. Заголовки для всех столбцов верны - person Mlodey; 09.04.2015
comment
@ user2595836: Извините, но я могу проанализировать проблему, только если у меня есть демо, которое ее воспроизводит. Кстати, если у вас есть веб-сервис ASMX, он должен автоматически преобразовывать результаты в JSON, если запрос имеет Accept: application/json в заголовке HTTP. Таким образом, вы можете просто попробовать изменить datatype: "xml" на datatype: "json" и изучить ответ сервера с помощью Fiddler или инструментов разработчика IE. / Chrome / firefox. Я предполагаю, что вы увидите данные JSON в ответе сервера. Обработка данных JSON намного лучше в JavaScript, чем обработка данных XML. - person Oleg; 09.04.2015
comment
На данный момент у меня слишком много представлений, использующих datatype: "xml", и преобразование его в datatype: "json" было бы болезненным. Вот почему в этот момент для меня важно придерживаться xml. Я создал простой проект, в котором воспроизвел проблему. Пожалуйста, не могли бы вы это проверить? Он доступен здесь: datafilehost.com/d/0b160816. - person Mlodey; 09.04.2015
comment
@ user2595836: Спасибо за тестовый пример. Это была ошибка. Пожалуйста, попробуйте еще раз с последними источниками с GitHub. Если вы используете URL-адреса типа ...//rawgit.com/free-jqgrid/jqGrid/master/..., вы можете просто нажать F5 в веб-браузере. - person Oleg; 09.04.2015
comment
@ user2595836: Кстати, ручная сериализация в XML не требуется, если вы используете .NET 3.5 или выше. Код метода GetFirstGridXML может выглядеть очень просто: [WebMethod][ScriptMethod(UseHttpGet = true)] public object GetFirstGridXML() { return new [] { new {CCID = 1, CCIDDesc = "Test1", CCTitle = "Test1"}, new {CCID = 2, CCIDDesc = "Test2", CCTitle = "Test2"}, new {CCID = 3, CCIDDesc = "Test3", CCTitle = "Test3"} };}. Таким образом, он может просто возвращать массив элементов. - person Oleg; 09.04.2015
comment
@ user2595836: код jqGrid должен использовать datatype: "json", ajaxGridOptions: { contentType: "application/json" }, jsonReader: { root: "d" }, loadonce: true. Поскольку код и клиента, и сервера будет проще, любая обработка будет происходить быстрее. Использование loadonce: true позволяет использовать локальную сортировку или фильтрацию (просто включить вызов filterToolbar) или поиск (например, вызов navGrid). - person Oleg; 09.04.2015
comment
Спасибо за исправление и советы, теперь все работает. На данный момент приложение использует .NET 2.0, но скоро оно будет преобразовано в 4.5, так что я запомню это. Также я попробую преобразовать его, чтобы использовать datatype: "json", а не datatype: "xml". Еще раз большое спасибо - вы молодцы! - person Mlodey; 09.04.2015
comment
@ user2595836: Добро пожаловать! И спасибо, что сообщили об ошибке. - person Oleg; 09.04.2015