如何在同一页面中包含两个jqgrid?

时间:2013-11-30 08:08:51

标签: jquery spring-mvc jqgrid jspx

如上所述,我能做到吗?

这是我的jspx页面:

<script>
    $(function() {
        $('#accordion').accordion({collapsible: true});
        $('#tabs').tabs();
    });
</script>

<form:show id="fs_abstractPressione" path="/pressione" object="${abstractPressione}" create="false" list="false">
    <h2>Insieme a Pressione</h2>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">A</a></li>
            <li><a href="#tabs-2">B</a></li>
            <li><a href="#tabs-3">C</a></li>
            <li><a href="#tabs-4">D</a></li>
        </ul>
        <div id="tabs-1">
            <div id="accordion">
                <h3>A</h3>
                <div>
                    <jsp:include page="../../pressione/show.jspx" />
                </div>
            </div>
        </div>
        <div id="tabs-2">
        b
        </div>
        <div id="tabs-3">
        c
        </div>
        <div id="tabs-4">
            <jsp:include page="../elencoIncarichiPressione.jspx" />
        </div>
  </div>

我希望在tabs-2tabs-3每个标签中插入一个jqgrid。

修改 为此,我在主页中包含带有jQgrid的页面,这样:

<jsp:include page="../a/1.jspx"/>     <jsp:include page="../b/2.jspx"/>

完成编辑

这些是我的jQrdid: tabs-1

        $("#list").jqGrid({
        url:'${urlDatiTecnici}listgrid',
        datatype: 'json',
        mtype: 'GET',
        autowidth: true,
        colNames:['${labelTipologia}','${labelPressione}', '${labelTemperaturaMin}', '${labelTemperaturaMax}', '${label_naturaFluido}', '${label_gruppoFluido}', '${label_statoFluido}', '${label_volume}', '${label_dn}', ''],
        colModel :[{name:'camera', index:'camera', width:100, editable:true },
                     {name:'ps', index:'ps', width:60, editable:true }, 
                     {name:'temperaturaMin', index:'temperaturaMin', width:60, editable:true }, 
                     {name:'temperaturaMax', index:'temperaturaMax', width:60, editable:true }, 
                     {name:'naturaFluido', index:'naturaFluido', width:55, editable:true }, 
                     {name:'gruppo', index:'gruppo', width:65, editable:true },
                     {name:'stato', index:'stato', width:80, editable:true, edittype: 'select', editoptions: {value:"Solido:Solido;Liquido:Liquido;Gassoso:Gassoso"}}, 
                     {name:'volume', index:'volume', width:60, editable:true }, 
                     {name:'dn', index:'dn', width:40, editable:true }, 
                     {name : 'Elimina', index: 'elimina', width:35, formatter:'actions',
                 formatoptions: {
                     keys: true,
                     editbutton: false,
                     align: 'left',
                    delOptions: { url:'${urlDelete}', dataType: "json" }}}],
        jsonReader : {
            root:"entryData",
            page: "currentPage",
            total: "totalPages",
            records: "totalRecords",
            repeatitems: false,
            id: "id"
        },      
        pager: '#pager',
        rowNum:10,
        sortname: 'id',
        sortorder: 'asc',
        viewrecords: true,
        height: 'auto',
        editurl: '${urlAddDatiTecnici}',
        caption: '${labelDatiTecnici}',
        onSelectRow: function(id){
            lastsel=id;
        },
    });   

       $("#list").jqGrid('navGrid','#pager', {edit:false, add:true, del:false, search:false, refresh:false});
       $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");

        $("#saverow").click( function() {
            $("#list").jqGrid('saveRow',cursel);
            $(this).attr("disabled",true); 
            $("#editrow").attr("disabled",false); 
            $("#addrow").attr("disabled",false); 
        });

        $("#cancel").click( function() {
            $("#list").jqGrid('restoreRow',cursel);
            $(this).attr("disabled",true); 
            $("#editrow").attr("disabled",false);
            $("#addrow").attr("disabled",false); 
        });

    });  

代表tabs-2

        $("#list").jqGrid({
        url:'${urlComponenteInsieme}listgrid',
        datatype: 'json',
        mtype: 'GET',
        autowidth: true,
        colNames:['${labelTipologiaAttrezzatura}','${labelNumeroFabbrica}', '${labelMarcaturaCE}', '${labelAttrezzaturaISPESL}', '${labelAccessoriSicurezza}', ''],
        colModel :[{name:'tipologiaAttrezzatura', index:'tipologiaAttrezzatura', width:50, editable:true },
                     {name:'numeroFabbrica', index:'numeroFabbrica', width:30, editable:true }, 
                     {name:'marcaturaCE', index:'marcaturaCE', width:30, editable:true }, 
                     {name:'attrezzaturaISPESL', index:'attrezzaturaISPESL', width:30, editable:true }, 
                     {name:'accessoriSicurezza', index:'accessoriSicurezza', width:30, editable:true, edittype:'checkbox', editoptions: { value:"true;false" }}, 
                 {name : 'Elimina', index: 'elimina', width:10, formatter:'actions',
                 formatoptions: {
                     keys: true,
                     editbutton: false,
                     align: 'center',
                 delOptions: { url:'${urlDelete}', dataType: "json" }}}],
        jsonReader : {
            root:"entryData",
            page: "currentPage",
            total: "totalPages",
            records: "totalRecords",
            repeatitems: false,
            id: "id"
        },      
        pager: '#pager',
        rowNum:10,
        sortname: 'camera',
        sortorder: 'asc',
        viewrecords: true,
        height: 'auto',
        editurl: '${urlAddComponenteInsieme}',
        caption: '${labelComponenteInsieme}',
        onSelectRow: function(id){
        },
    });   

       $("#list").jqGrid('navGrid','#pager', {edit:false, add:true, del:false, search:false, refresh:true});
       $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");

        $("#saverow").click( function() {
            $("#list").jqGrid('saveRow',cursel);
            $(this).attr("disabled",true); 
            $("#editrow").attr("disabled",false); 
            $("#addrow").attr("disabled",false); 
        });

        $("#cancel").click( function() {
            $("#list").jqGrid('restoreRow',cursel);
            $(this).attr("disabled",true); 
            $("#editrow").attr("disabled",false);
            $("#addrow").attr("disabled",false); 
        });

    });  

我该怎么做?

提前致谢

1 个答案:

答案 0 :(得分:3)

如果将它们附加到不同的表格和寻呼机ID,则可以有多个网格。

$("#table1").jqGrid( { options });
$("#table2").jqGrid( { options });

HTML:

<table id="table1"></table>
<div id="pager1"><div>
<table id="table2"></table>
<div id="pager2"><div>