Question

您好我有以下三角形jqgrid（4.6）加载了值

正如您所看到的那样，列标题为textbox。以下代码应响应文本框上的鼠标单击事件并显示警告但不显示警报，为什么它显示字符串{this.state.TextDate}而不是其值？

这是我的代码：

var DEMOCOMPONENT = React.createClass({

    getInitialState:function(){
        return{
            TextDate:''
        }
    },
    componentDidMount:function(){
        this.getData();
    },
    showDTPicker:function(){
        alert('date picker hit');
    },
    setTextDate:function(){
        var newV = ReactDOM.findDOMNode(this.refs.reftxt).value;

        this.setState({TextDate:newV},function(){


        });
    },
    render: function () {
        return (<div><table id="list4"></table><div id="plist483"></div></div>)

    },
    getData:function(){

        jQuery("#list4").jqGrid({
            datatype: "local",
            height: 250,
            colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
            colModel:[
                {name:'id',index:'id', width:60, sorttype:"int"},
                {name:'invdate',index:'invdate', width:90, sorttype:"date"},
                {name:'name',index:'name', width:100},
                {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                {name:'note',index:'note', width:150, sortable:false}
            ],
            multiselect: true,
            caption: "Manipulating Array Data",
        rowNum:10,
        width:700,
        rowList:[10,20,30],
        pager: '#plist483',
        sortname: 'invdate',
        height: '100%'
        });

        //setting groupcolumn headers
        jQuery("#list4").jqGrid('setGroupHeaders', {
            useColSpanStyle: true,
            groupHeaders:[
                {startColumnName: 'amount',
                    numberOfColumns: 3,
                    titleText: '<span><div style="text-align: left"><input type="text" id="txt" style="width: 50%" ref="reftxt" onClick={this.showDTPicker} onChange={this.setTextDate} value={this.state.TextDate} />'
                },
                {startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
            ]});


        var mydata = [
            {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];
        for(var i=0;i<=mydata.length;i++)
            jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
    }
});


ReactDOM.render(<DEMOCOMPONENT />,document.getElementById('divdemo'));

这是我的HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />

</head>
<body>
<div id="divdemo">
</div>

<script src="react-15.0.0.js"></script>
<script src="react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/babel" src="demo.js"></script>

</body>
</html>

Answer 1

将jq Grid Column属性中的可编辑选项设为true，例如

name : 'ABC',
index : 'ABC',
align : "center",
formatter : 'select',
edittype : 'select',
width : 174,
**editable : true,**

为什么jqgrid上的文本框不响应鼠标点击？

1 个答案: