Question

我已经加载了jqgrid汽车维护测试结果并生成网格如下：

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/css/ui.jqgrid.min.css" />
</head>
<body>

<div id="divContainer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>

<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

<script type="text/babel" src="sample.jsx">
</script>



</body>
</html>

反应对象

var SampleGrid = React.createClass({
    componentDidMount:function(){
        this.gridLoad();
    },
    gridLoad:function(){

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        var mydata = [
            { id: "1", test: "Engine checkup", teststart: "12/12/2016", testend: "12/30/2016", passed: true},
            { id: "2", test: "Electrical Checkup", teststart: "1/2/2017", testend: "1/3/2017", passed: false},
            { id: "3", test: "Chasis checkup", teststart: "1/4/2017", testend: "1/5/2017", passed: false},
            { id: "4", test: "Aerodynamics checkup", teststart: "1/6/2017", testend: "1/9/2017", passed: true},
            { id: "5", test: "Balance and stability checkup", teststart: "1/10/2017", testend: "1/12/2017", passed: true},
            { id: "6", test: "Report", teststart: "", testend: "", closed: false }
        ];
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//        var mydata = this.state.dbData;

        jQuery("#grid100").jqGrid({
            data:mydata,
            colNames: ['test','passed','test started','test ended'],
            colModel: [
                {name: 'test', index: 'test', width: 220 },
                {name: 'passed', index: 'passed', width: 60, align: 'center',
                    edittype: 'checkbox',
                    editoptions: {value: 'Yes:No', defaultValue: 'Yes'},
                    formatoptions: { disabled: false},
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        if (Number(rowId) == 6) { return ' colspan="3"'  }},
                    formatter:function(cellvalue, options, rowObject)
                    {
                        if(rowObject.id==6)
                        {
                            return '<input type="text" id="txtnotes" ref="refnotes" />';
                        }
                        else
                        {
                            if(rowObject.passed===true)
                            {                                   

                                return '<input type="checkbox"  id="cbPassed-'+ rowObject.id +'"  checked/>';
                            }
                            else
                            {
                                return '<input type="checkbox"  id="cbPassed-'+rowObject.id+ '"  />';
                            }
                        }
                    }

                },
                {name: 'teststart', index: 'teststart', width: 75, formatter: 'string', sorttype: 'string', align: 'center',
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        if (Number(rowId) == 6) { return ' style="display:none;"'  }}},//return ' colspan="5"'
                {name: 'testend', index: 'testend', width: 75, formatter: 'string', sorttype: 'string', align: 'center',
                    cellattr: function(rowId, tv, rawObject, cm, rdata) {
                        if (Number(rowId) == 6) { return ' style="display:none;"' }}}

            ],
            loadComplete:function(){
var iCol = getColumnIndexByName ($(this), 'passed'), rows = this.rows, i,
                    c = rows.length;


                for (i = 1; i < c; i += 1) {
                    $(rows[i].cells[iCol]).click(function (e) {
                        var id = $(e.target).closest('tr')[0].id,
                            isChecked = $(e.target).is(':checked');    

             $('#grid100').jqGrid('setCell', id, 'passed', isChecked);

           $('#grid100').jqGrid('getLocalRow', id).passed = isChecked;

                        return false;

                    });
                }


                    $(rows[6].cells[iCol]).change(function (e) {
                        console.log(e.target);
                        var id = $(e.target).closest('tr')[0].id,
                            newText = $(e.target).value;   

                $('#grid100').jqGrid('setCell', id, 'passed', newText);

                    });




            },
            rowNum: 10,
            rowList: [5, 10, 20],
            threeStateSort:true,
            autoencode: true,
            sortname: "id",
            viewrecords: true,
            sortorder: "desc",
            shrinkToFit: false,

        });

        jQuery("#grid100").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders:[
                {startColumnName: 'passed', numberOfColumns: 3, titleText: 'Test Duration'}
            ]
        });
    },
    render:function(){
        return(<div id="gridContainer" ref="refContainer">
                <form>
                    <table id="grid100"></table>
                </form>
            </div>
        )
    }
})

var getColumnIndexByName = function(grid, columnName) {
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
    for (i = 1, l = cm.length; i < l; i += 1) {
        if (cm[i].name === columnName) {
            return i;
        }
    }
    return -1;
};


ReactDOM.render(<SampleGrid />, document.getElementById('divContainer'));

在loadComplete()我已将change()事件的代码添加到textbox。但它不起作用。如果我从键盘文本框输入内容，仍然不接受任何击键。

为什么会发生这种情况，我该如何解决这个问题？

为什么文本框不接受击键？

0 个答案: