如何突出显示焦点上的单元格内容

时间:2016-11-04 16:52:50

标签: jquery jqgrid

我有以下jqGrid按需要工作,除非我选择一个单元格我想要选择的内容而不必双击。我已将classes属性添加到'reading'列。

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<div class="miscdisplayheader">
    <img title="Close" class="modified20 ifetestestdetailsFormClose_cellEdit floatright" src="/QMSWebApp/Images/close[1].jpg">
</div>

<table id="ifetestdetailslist"></table>
<div id="ifetestdetailspager"></div>
$(document).ready(function() {
    var lastsel;
    var selID = "";

    $("#ifetestdetailslist").jqGrid({
        url: '/QMSWebApp/IFETestingControllerServlet?lifecycle=loadifetestdetailsDataModel',
        editurl: '/QMSWebApp/IFETestingControllerServlet?lifecycle=editifetestdetailsdatamodel',
        datatype: "json",
        height: "auto",
        colNames: ['Index', 'Test Index', 'Reference', 'Value'],
        colModel: [{
            name: 'id',
            index: 'id',
            width: 100,
            hidden: true,
            editable: true,
            editrules: {
                edithidden: true
            },
            formoptions: {
                rowpos: 1,
                colpos: 1,
                label: "Index:"
            }
        }, {
            name: 'testindex',
            index: 'testindex',
            width: 100,
            hidden: true,
            editable: true,
            editrules: {
                edithidden: true
            },
            formoptions: {
                rowpos: 2,
                colpos: 1,
                label: "Test Index:"
            }
        }, {
            name: 'refno',
            index: 'refno',
            width: 300,
            hidden: false,
            editable: false,
            editoptions: {
                readonly: 'readonly'
            },
            editrules: {
                edithidden: true
            },
            formoptions: {
                rowpos: 3,
                colpos: 1,
                label: "Reference:"
            }
        }, {
            name: 'reading',
            index: 'reading',
            width: 300,
            hidden: false,
            editable: true,
            editrules: {
                edithidden: true
            },
            formoptions: {
                rowpos: 4,
                colpos: 1,
                label: "Value:"
            },
            editrules: {
                custom: true,
                custom_func: myValidate1
            },
            classes: 'highlightAll'
        }, ],
        rowNum: 10,
        rowList: [10, 20, 30],
        loadonce: true,
        pager: '#ifetestdetailspager',
        'cellEdit': true, // TRUE = turns on celledit for the grid.
        'cellsubmit': 'remote',
        cellurl: '/QMSWebApp/IFETestingControllerServlet?lifecycle=editifetestdetailsdatamodel',
        viewrecords: true,
        gridview: true,
        loadComplete: lComplete,
        reloadAfterSubmit: true,
        caption: "Test Details"
    });

    function lComplete(data) {
        $('.highlightAll').on("focus", function() {
            $(this).select();
        });
        hideProgressDisplay();
    };

    function myValidate1(value, colname) {
        var readingV = parseFloat(value);
        if (readingV <= 0 || readingV >= 30) {
            return [false, " Value must be > 0 and < 30."];
        } else {
            return [true, ""];
        }
    }

    $('.ifetestestdetailsFormClose_cellEdit').on("click", function() {
        //$("#ifetestingdatalist").jqGrid('setGridParam',{ datatype: 'json' }).trigger('reloadGrid')        
        $('.miscdisplay').hide("slide", {
            direction: "right"
        }, 1000);
    });
});

更新: 我也试过了,但仍然行不通。如在内容中没有选择准备编辑。您仍然需要手动选择或双击。

colNames:['Index','Test Index','Reference','Value'],
    colModel:[
        {name:'id', index:'id', width:100, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Index:"}},
        {name:'testindex', index:'testindex', width:100, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"Test Index:"}},
        {name:'refno', index:'refno', width:300, hidden: false, editable: false, editoptions:{ readonly:'readonly'}, editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Reference:"}},
        {name:'reading', index:'reading', width:300, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:4, colpos:1,label:"Reading:"}, editrules: {custom: true, custom_func: myValidate1}, classes: 'highlightAll'},
        ],
        rowNum:10,
        rowList:[10,20,30],
        loadonce: true,
        pager: '#ifetestdetailspager',
        'cellEdit': true, // TRUE = turns on celledit for the grid.
        'cellsubmit' : 'remote',
        cellurl: '/QMSWebApp/IFETestingControllerServlet?lifecycle=editifetestdetailsdatamodel',
        beforeEditCell: function(rowid,cellname,value,iRow,iCol){
            $("#" + rowid + "_reading").select();

        },
        viewrecords: true,
        gridview: true,
        loadComplete: lComplete,
        reloadAfterSubmit: true,
        caption:"Test Details"

    });

1 个答案:

答案 0 :(得分:0)

我想出了答案:

afterEditCell: function(rowid,cellname,value,iRow,iCol){
            $('.edit-cell > input').select();
        },