Зачем реагировать babel бросает дублируемую ошибку объекта, jqgrid на IE?

Я загрузил следующую сетку jqGrid в отношении ежегодной проверки автомобиля на данные технического обслуживания.Зачем реагировать babel бросает дублируемую ошибку объекта, jqgrid на IE?

На хроме это выглядит следующим образом:

Это был сгенерирован как среагировать объекта, код следующим образом:

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'));

Но это ведет себя смешно. когда я побежал код в хроме это работает прекрасно, но когда я побежал это на IE (моя версия 10) это дает следующее сообщение об ошибке на консоли

SCRIPT1046: Несколько определений собственности не допускается в строгом режиме

на данный момент я не могу понять, почему же код выдает результаты в одном браузере, а не в другой. Но я знаю, поднял эту ошибку, так как я добавил formater в колонну прошел

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

Как я могу исправить эту проблему?

источник

2017-02-18 Dore.Ad

Причина проблемы: использование нескольких свойств formatter для столбца passed (см. formatter: 'checkbox', ..., formatter:function(cellvalue, options, rowObject) {...}). Вы должны удалить или прокомментировать код formatter: 'checkbox'.

Я бы рекомендовал вам дополнительно:

никогда заполнить сетку с данными, используя addRowData в цикле. Вы должны удалить строки for(var i=0;i<=mydata.length;i++) jQuery("#grid100").jqGrid('addRowData',i+1, mydata[i]); из своего кода. Кроме того, вы должны добавить параметр data: mydata и удалить ненужный вариант sortorder: "desc".
удалить все index свойства из colModel
удалить ненужные опции gridview: true, rownumbers: false, ignoreCase: true. Все значения уже являются значениями по умолчанию в свободном jqGrid.

источник

2017-02-18 22:01:15 Oleg

спасибо Олегу, теперь сетка загружается на IE:) –

Зачем реагировать babel бросает дублируемую ошибку объекта, jqgrid на IE?

ответ

Смежные вопросы