Как выбрать строку jqGrid при щелчке флажка?

Ниже приведен мой код для jqGrid, я хотел бы выбрать строку или выделить текущую строку, когда я check устанавливаю определенный флажок внутри строки jqgrid. прямо сейчас onSelectRow я устанавливаю флажок.

var xmlDoc = $.parseXML(xml); 
         $('#configDiv').empty();
            $('<div width="100%">')
            .attr('id','configDetailsGrid')
            .html('<table id="list1" width="100%"></table>'+
                    '<div id="gridpager"></div>'+
                '</div>')       
            .appendTo('#configDiv');    

            var grid = jQuery("#list1");

            grid.jqGrid({

              datastr : xml,
              datatype: 'xmlstring',
              colNames:['cfgId','','Name', 'Host', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"right", hidden:true},
                  {name:'',index:'', width:15, align:"right",edittype:'checkbox',formatter: "checkbox",editoptions: { value:"True:False"},editable:true,formatoptions: {disabled : false}},
                  {name:'cfgName',index:'cfgName', width:90, align:"right"},
                  {name:'hostname',index:'hostname', width:90, align:"right"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"right"},
                  {name:'productId',index:'productId', width:60, align:"right"},
                  {name:'cfgType',index:'cfgType', width:60, align:"right"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"right"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"right"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"right", hidden:true},
              ],
              pager : '#gridpager',
              rowNum:10,
              scrollOffset:0,
              height: 'auto',

              autowidth:true,
              viewrecords: true,
              gridview: true,
              xmlReader: {
                  root : "list",
                  row: "com\\.abc\\.db\\.ConfigInfo",
                  userdata: "userdata",
                  repeatitems: false
              },
              onSelectRow: function(id,status){
                  var rowData = jQuery(this).getRowData(id); 
                  configid = rowData['cfgId'];
                  configname=rowData['cfgName'];
                  configdesc=rowData['cfgDesc'];
                  configenv=rowData['cfgType'];

                  if(status==true)
                  {

                  }

                  rowChecked=1;
                  currentrow=id;
                  },
              onCellSelect: function(rowid, index, contents, event) {
                  if(index==2)
                  {

                        $(xmlDoc).find('list com\\.abc\\.db\\.ConfigInfo').each(function()
                        {
                            //alert($(this).find('cfgId').text()+" "+configid);
                            if($(this).find('cfgId').text()==configid)  
                            {
                                configname=$(this).find('cfgName').text(); 
                                configdesc=$(this).find('cfgDesc').text();
                                configenv=$(this).find('cfgType').text();
                                filename=$(this).find('fileName').text();
                                updatedate=$(this).find('updateDate').text();
                                absolutepath=$(this).find('absolutePath').text();
                                productname=productMap[$(this).find('productId').text()];
                            }
                        });

                  }
               }

            });
            grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});

Итак, как мне выбрать текущую строку в выбранном флажке?


person Community    schedule 24.06.2011    source источник
comment
привет, ты уже пробовал мой код?   -  person WooDzu    schedule 02.07.2011


Ответы (4)


Поместите это в начало и вашего JS-кода, чтобы запустить выбор при установке флажка.

$("#list1").find('input[type=checkbox]').each(function() {
    $(this).change( function(){
        var colid = $(this).parents('tr:last').attr('id');
        if( $(this).is(':checked')) {
           $("#list1").jqGrid('setSelection', colid );
           $(this).prop('checked',true);
        }
        return true;
    });
});

пример СНОВА ОБНОВЛЕНО: http://jsfiddle.net/vCWNP/

редактирование: это также следует делать каждый раз, когда добавляется новая строка. дайте мне знать, если что-то еще нужно исправить;]

person WooDzu    schedule 27.06.2011

Мне кажется, что вы могли бы решить свою проблему очень легко. То, что вы пытаетесь сделать, уже реализовано в jqGrid. Если вы удалите столбец name:'',index:'', который имеет пустой name, что НЕ РАЗРЕШЕНО, и включите дополнительный параметр jqGrid multiselect:true, все будет работать так, как вам нужно.

person Oleg    schedule 24.06.2011
comment
Куда мне добавить multiselect:true? Также у меня есть CRUD, поэтому, когда я нажимаю кнопку обновления и выбрано более 1 флажка, он должен запрашивать пользователя, т. Е. Он не должен обновляться, как я могу добиться этого в этом случае? - person ; 30.06.2011
comment
@Ricky: Вы должны включить multiselect:true в то же место определения jqGrid, где вы используете все остальные параметры jqGrid, такие как datatype, rowNum и т. д. Вы можете найти здесь некоторые демонстрации того, как может быть множественный выбор использовал. Что касается вашего второго вопроса с кнопкой обновления, я не уверен, что правильно понимаю, что вы имеете в виду. Возможно, вы можете объяснить, что вам нужно более подробно? Какой режим редактирования вы планируете использовать? - person Oleg; 30.06.2011

Один простой способ сделать это:

jQuery(".jqgrow td input").each(function () {
    jQuery(this).click(function () {
        $("#grid").jqGrid('setSelection', $(this).parents('tr').attr('id'));
    });
});
person Timeternity    schedule 15.07.2011

в вашей функции onSelectRow добавьте:

var flag = jQuery(this).find('#'+id+' input[type=checkbox]').prop('checked');
if(flag){
      jQuery(this).css('background-color', 'red' )// row will be in red if checkbox is selected, you have to find out the current row here
}
person Vivek    schedule 24.06.2011
comment
Что вы подразумеваете под you have to find out the current row here , где мне нужно использовать текущую строку? - person ; 24.06.2011
comment
@Ricky: я не знаком с jqgrid, но код, который я написал, даст вам отмеченный флажок в каждой строке (я полагаю), теперь вам нужно найти строку (this.closet('‹tr›') .css(), что-то вроде этого) и примените CSS к этой строке... извините, что не отвечаю в вашем контексте. :( - person Vivek; 24.06.2011