1

我今天遇到了 jqGrid 的一个关键问题。让我们先解释一下我的问题。

我有一个包含以下列的主网格：

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

现在我需要这个主网格的子网格。学生类型是一个选择类型列。当用户为学生类型列选择差并单击子网格图标时，将显示以下子网格： 

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

当用户选择Meritorious时，将显示一个不同的子网格，如下所示： 

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

并且个人显示以下内容： 

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 回答