2

我正在使用 jqGrid 3.8.1。我想根据另一个组合框的选定值更改组合框的下拉值。这就是为什么我正在寻找如何更改editoptions:value.edittype:"select"

这是示例 jqGrid 代码：

<%@ 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>

设想：

  1. 所有ship将显示为初始加载。
  2. 如果库存栏更改为Yes，ship将仅显示FedEx，TNT。
  3. 如果库存栏更改为No,ship将仅显示InTime, ARAMEX, ARAMEX123456789。

如何更改选项？

4

1 回答 1

5

我通过反复试验解决了它。想要分享，请参考下面的片段。更改在 onSelectRow 函数上。

    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);
                }
            });
        }
    }
}
于 2011-05-31T01:02:48.530 回答