왜 react의 바벨이 IE에서 중복 객체 오류, jqgrid를 던집니까?

유지 보수 데이터에 대한 자동차 연간 점검과 관련하여 다음 jqGrid 표를로드했습니다. 크롬에왜 react의 바벨이 IE에서 중복 객체 오류, jqgrid를 던집니까?

이는 다음과 같습니다

이는 반응 오브젝트로 생성 된 코드는 다음과 같이

HTML :

<!DOCTYPE html> 
    <html> 
    <head lang="en"> 
     <meta charset="UTF-8"> 
     <title></title> 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/start/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>

JSX 코드 :

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 } 
     ]; 

     jQuery("#grid100").jqGrid({ 
      colNames: ['test','passed','test started','test ended'], 
      colModel: [ 
       {name: 'test', index: 'test', width: 220 }, 
       {name: 'passed', index: 'passed', width: 60, align: 'center', formatter: 'checkbox', 
        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;"' }}} 

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

     }); 
     for(var i=0;i<=mydata.length;i++) 
      jQuery("#grid100").jqGrid('addRowData',i+1,mydata[i]); 

     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> 
     ) 
    } 
}) 

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

하지만 이것은 우스운 행동입니다. 내가 그것을 완벽하게 잘 작동 크롬의 코드를 실행하지만 난 (내 버전 10) IE에서이 작업을 실행 할 때 콘솔에

SCRIPT1046을 다음과 같은 오류를 제공하는 경우 : 등록 정보의 여러 정의가 엄격 모드에서 허용되지

동일한 코드가 다른 하나 개의 브라우저에서 결과를하지 왜 내가 알아낼 수 없습니다 순간

. 내가

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+ '" />'; 
        } 
       } 
      }

가 어떻게이 문제를 해결합니까 전달 된 열 에 formater를 추가 한 이후하지만 난이 오류가 발생 알아?

출처

2017-02-18 Dore.Ad

이유 : 열 passed (formatter: 'checkbox', ..., formatter:function(cellvalue, options, rowObject) {...} 참조)에 대해 formatter 속성이 여러 개 사용되었습니다. 코드에서 formatter: 'checkbox'을 제거하거나 주석 처리해야합니다.

나는 또한 당신을 추천 할 것이다 :

결코 루프에 addRowData를 사용하여 데이터 그리드를 입력합니다. 코드에서 for(var i=0;i<=mydata.length;i++) jQuery("#grid100").jqGrid('addRowData',i+1, mydata[i]); 줄을 제거해야합니다. 또한 data: mydata 매개 변수를 추가하고 불필요한 sortorder: "desc" 옵션을 제거해야합니다.
는 colModel
제거 불필요한 옵션 gridview: true, rownumbers: false, ignoreCase: true에서 모든 index 속성을 제거합니다. 모든 값은 이미 무료 jqGrid의 기본값입니다.

출처

2017-02-18 22:01:15 Oleg

덕분에 올레그, 이제 IE에 그리드가로드됩니다.) –

왜 react의 바벨이 IE에서 중복 객체 오류, jqgrid를 던집니까?

답변

관련 문제