Загрузить несколько jqgrid на одной странице - PullRequest
Новая
       2

Загрузить несколько jqgrid на одной странице

3 голосов
/ 13 мая 2011

Я пытаюсь использовать два разных jqgrid на одной странице с приложением mvc, таблицы используют разные URL для загрузки данных и разные имена.Возможно использование нескольких jqgrid на одной странице!?!?

Заранее спасибо

ОБНОВЛЕНО : Первое спасибо за быстрый ответ

Проблема продолжаетсяпосле того, как я изменил идентификаторы, как вы сказали мне!
Вот мой код:

Javasrcipt:

Первая сетка: 

jQuery("#listMedicosTODO").jqGrid({
    url: '/Medico/LoadToDoMedicos/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Cod.', 'Titulo', 'Estado', 'Ultima Actualização'],
    colModel: [
        { name: 'CodRelatorio', index: 'CodRelatorio', width: 50, align: 'center', hidden: true, sortable: false },
        { name: 'TituloRelatorio', index: 'TituloRelatorio', width: 100, align: 'center', sortable: true },
        { name: 'EstadoRelatorio', index: 'EstadoRelatorio', width: 100, align: 'left', sortable: false },
        { name: 'DataUltimaActualizao', index: 'DataUltimaActualizao', width: 100, align: 'left', hidden: false, sortable: false }
    ],
    pager: jQuery('#pager1'),
    rowNum: 50,
    rowList: [50],
    sortname: 'Id',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'Tarefas Pendentes Médicos',
    onSelectRow: function (id) {
        var data = $("#listMedicosTODO").getRowData(id);
        alert("select row " + data.CodRelatorio);
    },
    loadComplete: function (data) {
        alert("Load Complete");
        //$('#list').setGridParam({ url: '/PesquisarRelatorios/GetGridData/' });
    },
    gridComplete: function () { alert("Grid Complete"); },
    beforeRequest: function () { },
    viewrecords: true,
    autowidth: true,
    autoheight: true
}).navGrid(pager, { edit: false, add: true, del: true, refresh: true, search: false });

Вторая сетка: 

jQuery("#listaAssistentesTODO").jqGrid({
    url: '/Medico/LoadToDoAssistentes/',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Cod.', 'Titulo', 'Assistente', 'Estado', 'Ultima Actualização'],
    colModel: [
        { name: 'CodRelatorio', index: 'CodRelatorio', width: 50, align: 'center', hidden: true, sortable: false },
        { name: 'TituloRelatorio', index: 'TituloRelatorio', width: 100, align: 'center', sortable: true },
        { name: 'Assistente', index: 'Assistente', width: 100, align: 'center', sortable: false },
        { name: 'EstadoRelatorio', index: 'EstadoRelatorio', width: 100, align: 'left', sortable: false },
        { name: 'DataUltimaActualizao', index: 'DataUltimaActualizao', width: 100, align: 'left', hidden: false, sortable: false }
    ],
    pager: jQuery('#page2'),
    rowNum: 50,
    rowList: [50],
    sortname: 'CodRelatorio',
    sortorder: "asc",
    viewrecords: true,
    imgpath: '/scripts/themes/steel/images',
    caption: 'Tarefas Pendentes Assistentes',
    onSelectRow: function (id) {
        var data = $("#listaAssistentesTODO").getRowData(id);
        alert("select row " + data.CodRelatorio);
    },
    loadComplete: function (data) {
        alert("Load Complete");
         //$('#list').setGridParam({ url: '/PesquisarRelatorios/GetGridData/' });
    },
    gridComplete: function () { alert("Grid Complet"); },
    beforeRequest: function () { },
    viewrecords: true,
    autowidth: true,
    autoheight: true
}).navGrid(pager, { edit: false, add: true, del: true, refresh: true, search: false });

Конечная точка сервера:

1º 

if(list != null)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords =  list.Count ;
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    var jsonData = new
                       {
                           total = totalPages,
                           page,
                           records = totalRecords,
                           rows = (from item in list
                                   select new
                                              {
                                                  i ="a" + item.CodRelatorio,
                                                  cell = new[]
                                                             {
                                                                item.CodRelatorio ,
                                                                item.TituloRelatorio,
                                                                item.Assistente ,
                                                                "Em Elaboração",
                                                                item.DataUltimaActualizao
                                                             }

                                             }).ToArray()
                        };


    return Json(jsonData,JsonRequestBehavior.AllowGet);
}

2º конечная точка 

if (list != null)
{
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;
    int totalRecords = list.Count;
    var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = (from item in list
                select new
                {
                    i = "b"+ item.CodRelatorio,
                    cell = new[]
                                 {
                                    item.CodRelatorio ,
                                    item.TituloRelatorio,
                                    "Em Elaboração",
                                    item.DataUltimaActualizao
                                 }

                }).ToArray()
    };

    return Json(jsonData, JsonRequestBehavior.AllowGet);

Этот код содержит ваши рекомендации

Спасибо

Ответы [ 2 ]

6 голосов
/ 13 мая 2011

Можно использовать более одного jqGrid на одной странице. Самое важное, что вы должны знать, это то, что id, которые вы отправили с сервера , должны отличаться в обеих сетках. Например, если вам нужно для первой сетки идентификатор = 1234 и то же самое для второй сетки, вы можете использовать "a1234" для первой сетки и "b1234" для второй.

Если у вас по-прежнему будут проблемы с двумя сетками, вы должны опубликовать определение (код JavaScript) обеих сеток и тестовые данные JSON или XML, с которыми у вас возникли проблемы.

ОБНОВЛЕНО : Ваша главная ошибка в том, что вы не установили id на стороне сервера. Вместо этого вы устанавливаете свойство i, которое неизвестно и которое будет игнорироваться. Если не определено id, jqGrd попытается использовать целые числа: «1», «2», ... значения в качестве идентификаторов. Такое «id-fix» работает в случае одной сетки на странице, но не с двумя сетками.

Таким образом, вы должны изменить i ="a" + item.CodRelatorio и i = "b"+ item.CodRelatorio на id ="a" + item.CodRelatorio и id = "b"+ item.CodRelatorio.

Чтобы сообщить доверию к демонстрационный пример , опубликованный Филом Хааком, был такой же ошибкой записи, но она исправлена ​​6 марта 2011 г. (см. Комментарии на странице).

Еще одно небольшое изменение, которое вы должны сделать:

  1. удалить устарел параметр jqGrid imgpath. Он не используется уже много лет.
  2. вместо неизвестных параметров autowidth: true и autoheight: true вы, вероятно, хотели использовать height:'auto'.
  3. лучше использовать pager:'#page1' и pager:'#page2' вместо pager: '#page1' и pager: '#page2'.
  4. Первая сетка не имеет столбца с именем 'Id'. Таким образом, вы должны заменить sortname: 'Id' jqGrid, например, на sortname: 'CodRelatorio'.

Рекомендую прочитать "ОБНОВЛЕННУЮ" часть ответа . Вы можете скачать пример из ответа и использовать его в качестве шаблона для вашего приложения.

0 голосов
/ 23 мая 2013

Да, мы можем использовать несколько Jqgrid на одной странице, но нам нужно дать разные идентификаторы Jqgrid.

См. Код ниже.Рабочий пример, 

jQuery(document).ready(function () {

        $("#datagrid").jqGrid({    //////////// 1st Grid
            url: "service url",
            //url: "service url",
            type: "GET",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: "json",
            //colNames:['Id','MID','Status','DocNo','VendorID','InvoiceNo','VendorName','Amount','Type','DocDate','DueDate','ClDoc','Texxt','UserName','Currency','ConCode','Region','Stat','Comb','Comments'],

            colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
            colModel:[
    {name:'id',index:'id', width:50,sortable:true},
    {name:'mid',index:'mid', width:50, sortable:true},
    {name:'status',index:'status', width:70, sortable:true},
    {name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
    {name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
    {name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},   
    {name:'docdate',index:'docdate', width:100, sortable:false},
    {name:'amount',index:'amount', width:80, sortable:false,align:"Right"},
    {name:'docno',index:'docno', width:100, sortable:false},
    {name:'typee',index:'typee', width:50, sortable:false},
    {name:'duedate',index:'duedate', width:100, sortable:false},
    {name:'cldoc',index:'cldoc', width:80, sortable:false},
    {name:'text',index:'texxt', width:70, sortable:false},
    {name:'username',index:'username', width:100, sortable:false},
    {name:'currency',index:'currency', width:80, sortable:false},
    {name:'concode',index:'concode', width:80, sortable:false},
    {name:'region',index:'region', width:70, sortable:false},
    {name:'stat',index:'stat', width:60, sortable:false},
    {name:'process',index:'process', width:60, sortable:false},
    {name:'combination',index:'combination', width:60, sortable:true},
    {name:'comments',index:'comments', width:150, height:20, edittype:'textarea', sortable:false, editable: true,
            editoptions: {disabled: false, size:50, resizable:true}}
    ],
viewrecords: true
});


       $("#datagrid1").jqGrid({               ///////////////2nd Grid

            url: "service url",
            type: "GET",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: "json",
            //colNames:['Id','MID','Status','DocNo','VendorID','InvoiceNo','VendorName','Amount','Type','DocDate','DueDate','ClDoc','Texxt','UserName','Currency','ConCode','Region','Stat','Comb','Comments'],
            colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
            colModel:[
    {name:'id',index:'id', width:50,sortable:true},
    {name:'mid',index:'mid', width:50, sortable:true},
    {name:'status',index:'status', width:70, sortable:true},
    {name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
    {name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
    {name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},   
    {name:'docdate',index:'docdate', width:100, sortable:false},
    {name:'amount',index:'amount', width:80, sortable:false,align:"Right" },
    {name:'docno',index:'docno', width:100, sortable:false},
    {name:'typee',index:'typee', width:50, sortable:false},
    {name:'duedate',index:'duedate', width:100, sortable:false},
    {name:'cldoc',index:'cldoc', width:80, sortable:false},
    {name:'text',index:'texxt', width:70, sortable:false},
    {name:'username',index:'username', width:100, sortable:false},
    {name:'currency',index:'currency', width:80, sortable:false},
    {name:'concode',index:'concode', width:80, sortable:false},
    {name:'region',index:'region', width:70, sortable:false},
    {name:'stat',index:'stat', width:60, sortable:false},
    {name:'process',index:'process', width:60, sortable:false},
    {name:'combination',index:'combination', width:60, sortable:true},
    {name:'comments',index:'comments', width:150, edittype:'textarea', sortable:false, editable: true,
            editoptions: {disabled: false, size:50, resizable:true}}
        ]
viewrecords: true
});

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...