Question

我在使用JQuery时遇到了jQgrid和accordion的问题。

我使用4个手风琴，其中两个我插入了一个jQgrid。问题是第一个jqgrid之后的所有组件都插入同一个手风琴中;我不明白为什么..

这是页面：

    <script>
    $(function() {
        $('#tabs').tabs();
    });

    $(function(){   
        $("#listDatiTecnici").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: '#pagerDatiTecnici',
        rowNum:10,
        sortname: 'id',
        sortorder: 'asc',
        viewrecords: true,
        height: 'auto',
        editurl: '${urlAddDatiTecnici}',
        caption: '${labelDatiTecnici}',
        onSelectRow: function(id){
            lastsel=id;
        },
    });   

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

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

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

    });

    $(function(){    
        $("#listComponenteInsieme").jqGrid({
        url:'${urlComponenteInsieme}listgrid',
        datatype: 'json',
        mtype: 'GET',
        autowidth: true,
        colNames:['${labelTipologiaAttrezzatura}','${labelNumeroFabbrica}', '${labelMarcaturaCE}', '${labelAttrezzaturaISPESL}', '${labelAccessoriSicurezza}', ''],
        colModel :[{name:'tipologiaAttrezzatura', index:'tipologiaAttrezzatura', width:100, editable:true },
                     {name:'numeroFabbrica', index:'numeroFabbrica', width:100, editable:true }, 
                     {name:'marcaturaCE', index:'marcaturaCE', width:100, editable:true }, 
                     {name:'attrezzaturaISPESL', index:'attrezzaturaISPESL', width:100, editable:true }, 
                     {name:'accessoriSicurezza', index:'accessoriSicurezza', width:100, 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: '#pagerComponenteInsieme',
        rowNum:10,
        sortname: 'camera',
        sortorder: 'asc',
        viewrecords: true,
        height: 'auto',
        editurl: '${urlAddComponenteInsieme}',
        caption: '${labelComponenteInsieme}',
        onSelectRow: function(id){
        },
    });   

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

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

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

    }); 
</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">ATTREZZATURA</a></li>
            <li><a href="#tabs-2">DATI TECNICI</a></li>
            <li><a href="#tabs-3">COMPONENTE INSIEME</a></li>
            <li><a href="#tabs-4">INCARICHI</a></li>
        </ul>

    <div id="tabs-1">
        <h3>Dati Atrezzatura</h3>
        <div>
            <jsp:include page="../../pressione/show.jspx" />
        </div>
    </div>
    <div id="tabs-2">
                <table id="listDatiTecnici"><tr><td></td></tr></table>
    <div  id="pagerDatiTecnici"></div>

    </div>
    <div id="tabs-3">
                <table id="listComponenteInsieme"><tr><td></td></tr></table>
    <div  id="pagerComponenteInsieme"></div>

    </div>
    <div id="tabs-4">
        <jsp:include page="../elencoIncarichiPressione.jspx" />
    </div>
  </div>
</form:show>

提前致谢

Answer 1

我解决了.. 我替换了这个

<div  id="pagerDatiTecnici"></div>

<div  id="pagerComponenteInsieme"></div>

用这个：

<p>
    <table id="listDatiTecnici"><tr><td></td></tr></table>
    <p  id="pagerDatiTecnici"></p>
</p>


    <p>
    <table id="listComponenteInsieme"><tr><td></td></tr></table>
    <p  id="pagerComponenteInsieme"></p>
  </p>

如何将jQgrid插入不同的选项卡？

1 个答案: