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

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
источник

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
источник