【问题标题】:Different SubGrids depend on Main Grid's Column Value in jqGrid不同的子网格依赖于 jqGrid 中主网格的列值
【发布时间】:2011-10-17 04:25:57
【问题描述】:

我今天遇到了 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

当用户选择功勋时,会显示不同的子网格,如下所示:

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

个人显示如下:

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

我的问题:

是否有可能在 jqGrid 或任何其他简单的方式来实现这一点。

提前致谢。

【问题讨论】:

  • 你问题中的例子对我来说不是很清楚。您写了“当用户为学生类型列选择差时”。通常,网格仅在编辑模式或搜索对话框中显示选择(下拉)元素。如果我理解你的情况是正确的,主网格的第二个“学生类型”列不是对应于第一列的数据部分。是这样吗?您希望选择控件仅显示在第二列中,以使用户能够控制应在子网格中显示哪些信息。是你想要的吗?
  • @Oleg 当用户点击显示子网格时,如果学生类型设置为差,则子网格应显示监护人收入范围等。
  • 我不清楚的是:“差”是对应于“完全免费学生”的类型,用户无法选择另一个值。在这种情况下,要求更容易。或者你有这样的情况,在网格的第二列应该显示下拉列表,用户可以选择一些东西来控制子网格包含的包含?你的意思是?可能我的问题是我对奖学金一无所知,所以网格/子网格内的信息就像 x、y、z 一样,我什么都猜不出来。
  • @Oleg:对不起,我的错。差、有功和个人是可以与任何奖学金名称相关联的类型。当用户将 Poor 与任何奖学金名称相关联时,将显示对应于差的子网格,依此类推。
  • 我还是不太明白你的问题。应填写第二列“学生类型”的包含,以便在 before 列中包含一些包含和来自用户侧的操作。现在“用户可以关联”“学生类型”中的另一个值。所以在“协会”之后会在第二行之前看到例如“Sir Alfred Nobel Scholarship”---“Poor”而不是“Sir Alfred Nobel Scholarship”---“Meritorious”桌子?是你的意思吗?选择是否应该保存在服务器上? “关联”是在查看模式下还是在编辑模式下完成?

标签: jquery jquery-plugins jqgrid jqgrid-php


【解决方案1】:

我发现如果您使用 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>

【讨论】:

    【解决方案2】:

    据我所知,在 jqGrid 中是不可能的。您必须对单个网格使用相同的子网格。谢谢你的好问题。

    哦...如果可能的话,让我们告知流程。

    【讨论】:

    • 到目前为止,我也做出了不可能的决定。感谢您的回答。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多