Можно ли изменить значение editoptions для типа редактирования jqGrid: "select"? - PullRequest
Новая
       22

Можно ли изменить значение editoptions для типа редактирования jqGrid: "select"?

2 голосов
/ 06 мая 2011

Я использую 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.

Как изменить параметры?

1 Ответ

5 голосов
/ 31 мая 2011

Я решил это методом проб и ошибок. Хотите поделиться этим, пожалуйста, обратитесь к приведенному ниже фрагменту. Изменения в функции 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);
                }
            });
        }
    }
}
...