Question

我正在使用jqGrid 3.8.1。我想根据另一 com子的选定价值,改变 com子的拉动价值。因此,我正在探讨如何修改<代码>编辑: of an edittype:"select”。

Here s the sample jqGrid code:

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#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;AR1:ARAMEX123456789"}},       
        {name: note ,index: note , width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}      
    ],
    caption: "Input Types",
    resizeStop: function (newwidth, index) {
        var selectedRowId = $("#rowed5").getGridParam( selrow );
        if(selectedRowId) {
            //resize combobox proportionate to column size
            var selectElement = $( [id="  + selectedRowId +  _ship"][role="select"] );
            if(selectElement.length > 0){
                $(selectElement).width(newwidth);
            }
        }
    }
    ,
    onSelectRow: function(id){
        if(id && id!==lastsel2){
            //$(this).saveRow(lastsel2, true);
            $(this).restoreRow(lastsel2);
            $(this).editRow(id,true);

            lastsel2=id;

            $(this).scroll();

            //resize combobox proportionate to column size
            var rowSelectElements = $( [id^="  + id +  _"][role="select"] );
            if(rowSelectElements.length > 0) {
                $(rowSelectElements).each(function(index, element){
                    var name = $(element).attr( name );
                    var columnElement = $( #rowed5_  + name);
                    if(columnElement.length > 0) {
                        var columnWidth = $(columnElement).width();
                        $(element).width(columnWidth);
                    }
                });
            }
        }
    }
});
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:"ARAMEX123456789"},
        {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++) {
 $("#rowed5").jqGrid( addRowData ,mydata2[i].id,mydata2[i]);
}
</script>

Scenario:

All ship will be displayed as initial load.
If the stock column changes to Yes, ship will display only FedEx, TNT.
If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.

How can I change the options?

Answer 1

I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.

    onSelectRow: function(id){
    if(id && id!==lastsel2){
        //$(this).saveRow(lastsel2, true);
        $(this).restoreRow(lastsel2);

        // get the selected stock column value before the editRow
        var stockValue = $("#rowed5").jqGrid( getCell , id,  stock );
        if( stockValue ==  Yes ) {
            $("#rowed5").jqGrid( setColProp ,  ship , { editoptions: { value:  FE:FedEx;TN:TNT } });
        } else if( stockValue ==  No ) {
            $("#rowed5").jqGrid( setColProp ,  ship , { editoptions: { value:  IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789 } });
        }

        $(this).editRow(id,true);

        lastsel2=id;

        $(this).scroll();

        //resize combobox proportionate to column size
        var rowSelectElements = $( [id^="  + id +  _"][role="select"] );
        if(rowSelectElements.length > 0) {
            $(rowSelectElements).each(function(index, element){
                var name = $(element).attr( name );
                var columnElement = $( #rowed5_  + name);
                if(columnElement.length > 0) {
                    var columnWidth = $(columnElement).width();
                    $(element).width(columnWidth);
                }
            });
        }
    }
}

友情链接