1

今日、jqGridで重大な問題に直面しました。最初に私の問題を説明しましょう。

次の列を含むメイングリッドがあります。

Scholarship Name .................................. Student Type
-----------------------------------------------------------------
Full Free Studentship ............................. Poor   
Sir Alfred Nobel Scholarship ...................... Meritorious   
Taj Uddin Memorial Scholarship .................... Individual 

ここで、このメイングリッドのサブグリッドが必要です。Student Typeは、選択タイプの列です。ユーザーが[StudentType]列で[ Poor ]を選択し、サブグリッドアイコンをクリックすると、次のサブグリッドが表示されます。

Guardian Income Range Start Value ....................... Range End Value
--------------------------------------------------------------------------
0 ....................................................... 5000   
5001 .................................................... 10000

ユーザーがMeritoriousを選択すると、次のような別のサブグリッドが表示されます。

Merit Start .................. Merit End
----------------------------------------
1 ............................ 7

そして、Individualは次のことを示しています。

Student ID
----------
115588   
225577   
336699 

私の質問:

jqGridまたは他の簡単な方法でこれを実装することは可能ですか?

前もって感謝します。

4

2 に答える 2

2

SubGridRowExpandedとsubGridRowColapsedを使用してサブグリッドを構築すると、展開された行に基づいて完全に異なるサブグリッドを生成できることがわかりました。

以下に、 JQGridのGridAsSubGridの例の変更を含めました。 ここでは、展開されている行のIDを確認し、特殊なケース(id = 12345)の場合は特殊なグリッドを表示します。生徒のタイプに基づいてフィルタリングし、それに応じてグリッドを表示することができます。

addRowDataを使用して情報を追加していますが、他のデータバインディングメソッドはテストしていません。

<script type="text/javascript">
var lastsel2;
$(document).ready(function(){
    jQuery("#rowed5").jqGrid({
        datatype: "local",
        height: 250,
        colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
        colModel:[
            {name:'id',index:'id', width:90, sorttype:"int", editable: true},
            {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
            {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
            {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},       
            {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}      
        ],
        onSelectRow: function(id){
            if(id && id!==lastsel2){
                jQuery('#rowed5').jqGrid('restoreRow',lastsel2);
                jQuery('#rowed5').jqGrid('editRow',id,true);
                lastsel2=id;
            }
        },
        editurl: "server.php",
        caption: "Input Types",
        multiselect: false,
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id){
            var subgrid_table_id;
            subgrid_table_id = subgrid_id+"_t";
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'>");

            if(row_id != "12345") {
                jQuery("#"+subgrid_table_id).jqGrid({
                    datatype: "local",
                    colNames: ['No','Item','Qty','Unit','Line Total'],
                    colModel: [
                        {name:"num",index:"num",width:80},
                        {name:"item",index:"item",width:130},
                        {name:"qty",index:"qty",width:70,align:"right"},
                        {name:"unit",index:"unit",width:70,align:"right"},
                        {name:"total",index:"total",width:70,align:"right",sortable:false}
                    ],
                    rowNum:20,
                    sortname: 'num',
                    sortorder: "asc",
                    height: '100%'
                });

                var tdata = [ 
                        { num:"123", item:"single item", qty:"1", unit:"£1.00", total:"£1.00"}, 
                        { num:"234", item:"multi item", qty:"2", unit:"£1.00", total:"£2.00"},
                    ];

                for(var i=0;i < tdata.length;i++)
                    jQuery("#"+subgrid_table_id).jqGrid('addRowData',subgrid_table_id+"r"+tdata[i].num,tdata[i]);
            } else {
                jQuery("#"+subgrid_table_id).jqGrid({
                    datatype: "local",
                    colNames: ['No','Error Message'],
                    colModel: [
                        {name:"num",index:"num",width:80},
                        {name:"error",index:"item",width:250},
                    ],
                    rowNum:20,
                    sortname: 'num',
                    sortorder: "asc",
                    height: '100%'
                });

                var tdata = [ 
                        { num:"1", error:"not validated"}, 
                        { num:"2", error:"only available on thursdays"},
                    ];

                for(var i=0;i < tdata.length;i++)
                    jQuery("#"+subgrid_table_id).jqGrid('addRowData',subgrid_table_id+"r"+tdata[i].num,tdata[i]);
            }
        },
        subGridRowColapsed: function(subgrid_id, row_id){
            var subgrid_table_id;
            subgrid_table_id = subgrid_id+"_t";
            jQuery("#"+subgrid_table_id).remove();
        }

    });
    var mydata2 = [
            {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
            {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
            {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
            {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
            {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
            {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
            {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
            {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
            {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
            ];
    for(var i=0;i < mydata2.length;i++)
        jQuery("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
});
</script>
<table id="rowed5"></table>
于 2011-09-06T15:39:26.333 に答える
0

私の知る限り、jqGridでは不可能です。単一のグリッドに同じサブグリッドを使用する必要があります。素敵な質問をありがとう。

ああ...可能であれば、プロセスを知らせましょう。

于 2011-08-18T08:13:47.430 に答える