Выделите строку, когда флажок установлен

17

Может кто-нибудь мне помочь, у меня есть jqgrid, и я хочу выделить строку, если флажок прав, спасибо!

вот что я хочу сделать в этом проекте ...

function loadjqGrid(jsonGridData){
    var xaxis=1300
    var yaxis = $(document).height();
    yaxis = yaxis-500;
    getGrids();     
    $("#maingrid").jqGrid({
        url:'models/mod.quoservicetypedetails.php?ACTION=view',
        mtype: 'POST',
        datatype: 'xml',
        colNames:getColumnNames(jsonGridData),
        colModel :[ 
            {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true,
            edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}},  
            {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                  
            {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                      
            {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true,
            edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                    
            {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},                  
            {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},  
            {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},     
            {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, 
            //If the GroupHeader is true the row background is yellow
            {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
            {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}}, 
        ],
        viewrecords: true,  
        rowNum:20,
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc",
        height: yaxis,
        pager : '#gridpager',
        recordtext: "View {0} - {1} of {2}",
        emptyrecords: "No records to view",
        loadtext: "Loading...",
        pgtext : "Page {0} of {1}",         
        height: yaxis,
        width: xaxis,
        shrinkToFit: false,
        multiselect: true,
        editurl:'models/mod.quoservicetypedetails.php?ACTION=edit'
    }); 
}

Как я могу это сделать? Кто-нибудь может мне помочь?

    
задан Jacx Toi 10.05.2012 в 10:13
источник
  • stackoverflow.com/questions/6466750/... –  Haim Evgi 10.05.2012 в 10:15
  • [link] lh5.googleusercontent.com/-Gda0KxFtUiM/T6uDOgi_YjI/AAAAAAAAAGw/... –  Jacx Toi 10.05.2012 в 11:04

1 ответ

42

Я описал в ответ один хороший способ, как вы можете реализовать выделение.

Версия 4.3.2 jqGrid имеет новую функцию - rowattr обратного вызова (см. мое первоначальное предложение ), который был введен специально для таких случаев, как ваш. Он позволяет выделить некоторые строки сетки во время заполнения сетки. Чтобы иметь лучшее преимущество в производительности, вы должны дополнительно использовать gridview: true . Кстати я рекомендую вам использовать gridview: true во всех jqGrids .

Использование обратного вызова rowattr очень просто:

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case
        return {"class": "myAltRowClass"};
    }
}

Класс CSS myAltRowClass должен определять цвет фона выделенных строк.

В соответствующей демонстрации вы найдете здесь :

Потому что в вашей демонстрации вам нужно просто выделить и не выбирать строки, в которых я не использовал multiselect: true в своей демонстрации. В случае multiselect: true он работает точно так же.

В конце моего ответа я хотел бы рекомендовать вам использовать шаблоны столбцов . Эта функция сделает ваш код короче, читабельнее и прост в обслуживании. Что вам нужно сделать, это следующее:

  • вы можете включить общие или наиболее часто используемые настройки из определений столбцов в cmTemplete . В вашем случае это может быть
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
  • , то вы можете определить некоторые переменные, которые описывают общие свойства, которые вы часто используете в некоторых столбцах. Например:
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
        editoptions: {value: "1:0"}},
    myTextareaTemplate = {edittype: "textarea",
        editoptions: {size: "30", maxlength: "30"}};
  • после этого вы можете использовать myCheckboxTemplate и myTextareaTemplate внутри colModel , что уменьшится в вашем случае до следующего
colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
    
ответ дан Oleg 10.05.2012 в 11:59
источник
  • Это работает! Большое вам спасибо, больше силы для вас @ Олег. –  Jacx Toi 12.05.2012 в 04:25
  • @JacxToi: Добро пожаловать! Если проблема решена, вы можете «принять» ответ. –  Oleg 12.05.2012 в 11:33
  • Awesome! Спасибо за вашу помощь еще раз! У меня есть «вопрос», который, я думаю, связан с этим вопросом. Вы можете проверить это здесь? –  FastTrack 07.11.2013 в 17:41
  • @FastTrack: У вас вопрос очень хороший! Я думаю, что лучший способ - изменить код groupingRender для вызова rowattr, но я постараюсь подготовить некоторое решение для существующей версии jqGrid. Я вернусь к вашему вопросу позже (вероятно, в выходные). –  Oleg 07.11.2013 в 23:15
  • @ Олег Отлично! Спасибо! –  FastTrack 08.11.2013 в 14:05