free-jqgrid:setCell将css类添加到单元格

时间:2017-02-14 14:16:41

标签: jquery css jqgrid free-jqgrid

需要帮助...我刚刚升级到free-jqgrid 4.13.6。早些时候我使用的是jqgrid 4.3

在我使用的jqgrid 4.3中,它将CSS类红色突出显示添加到特定单元格

grid.jqGrid('setCell', row_id, 'status', '', 'red-highlight');

但是在迁移到free-jqgrid 4.13.6之后,这不起作用。

function validateOnSubmit() {
    var grid = $("#mySearchResultGridTable");
    var obj = $('#mySearchResultGridTable').jqGrid ('getRowData');
    $.each(obj, function(key, value) {
        var row_id = key+1;

        if ($("tr#jqg" + thisRow).attr("editable") === "1") {
            selectedStatus = $("#jqg"+ row_id +"_status").val();
        }
        if(selectedStatus == '' || selectedStatus == 'Select') {
        grid.jqGrid('setCell', row_id, 'status', '', 'red-highlight');
    });
}


$grid.jqGrid({
    datatype: 'json',
    url: 'myUrl.do?custId=' + custId,
    mtype: 'GET',
    ajaxSubgridOptions: { async: false },
    colNames:[ 'Customer Id', Status',  'Comments'],
    colModel:[                    
        {name:'customerId', width:75, fixed: true, sortable: true, search: false, frozen: true, resizable: false, classes: 'customer_id_grid_class'},
        {name:'customerNm', width:215, fixed: true, sortable: true, search: false, frozen: true, resizable: false, classes: 'customer_name_grid_class'},
        {name:'status', index:'status', sortable: false, search: false, width: 80, fixed: true, align:'center', resizable: false, editable: true, stype:'select', 
         edittype:'select', editoptions:{
             value:'Select:Select;Y:Yes;N:No',
             defaultValue:'Intime',
             multiple: false
         },
         searchoptions: {
             sopt: ['eq','ne'],
             value: 'Y:Yes;N:No',
             attr: {multiple: 'multiple', size: 3},
             dataInit: dataInitMultiselect
         }
        },
        {name:'comments', width:150, fixed: true, sortable: false, search: false, editable: true, resizable: false, editoptions: { maxlength: 3000 }}
    ],
    headertitles:true,
    rowNum:999,
    rowList:[],
    pager: '',
    records: 1000,
    pgbuttons : false,
    viewrecords : false,
    pgtext : null,
    pginput : false,
    gridview:true,
    ignoreCase:true,
    rownumbers:true,
    sortname: 'invdate',
    viewrecords: true,
    sortorder: 'desc',
    multiselect: true, 
    caption: "Customer Search",
    height: '100%',
    editurl: 'clientArray',
    autoencode: true,
    loadonce: true,
    multiselectWidth: 30,
    width: 1024,
    viewsortcols : [true,'vertical',true],
});

JSON数据:

[{
    "customerId": "123",
    "customerNm": "Dany Web",
    "status": "Y",
    "comments": "testing"
}, {
    "customerId": "345",
    "customerNm": "Charlie Studdard",
    "status": "N",
    "comments": "testing"
}]

双击编辑:

ondblClickRow: function(id){
    $(this).jqGrid('editRow', id, true);
}

任何帮助请...

1 个答案:

答案 0 :(得分:0)

如果列的值包含唯一数据,建议您将key: true添加到列customerId

您可以通过以下方式修复validateOnSubmit的当前代码

function validateOnSubmit() {
    var grid = $("#mySearchResultGridTable");
    var editingRows = grid.jqGrid("getGridParam", "savedRow");
    // the array editingRows will contains the information about the values
    // of all editable columns from all currently editing rows
    // one allows typically ONE editing row at once. Thus one can use
    if (editingRows.length > 0) {
        var selectedStatus = $("#jqg"+ editingRows[0].id +"_status").val();
        if (selectedStatus === '' || selectedStatus === 'Select') {
            grid.jqGrid('setCell', editingRows[0].id, 'status', '', 'red-highlight');
        }
    }
}

我建议您考虑将state列的定义替换为

{ name: "state", template: "booleanCheckbox", editable: true }

你可以试试结果,看看它是否是你个案中更好的选择。