JQX網格不在鉻中工作

Question

我使用JQX網格小部件。並通過javascript我填充單元格值。這適用於Firefox.But不適用於Chrome.Here是我使用的代碼。

var objCredit = jQuery.parseJSON(returnText); 
    document.getElementById('txtCustNumber').value = objCredit.CustomerId; 
    $('[id$=txtCustNumber]').text(objCredit.CustomerId); 
    getCustomerDetails(); 
    document.getElementById('cmbDocType').value = '3'; 

    ***documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', objCredit.Amount);*** 

這是我的網格定義。

var source1 = { totalrecords: 5, unboundmode: true, datatype: "json", 
    datafields: [ 
        { name: 'LineId' }, 
        { name: 'DistCode' }, 
        { name: 'distFinder' }, 
        { name: 'DistCodeDesc' }, 
        { name: 'RevAccount' }, 
        { name: 'revAccountFinder' }, 
        { name: 'RevAccDesc' }, 
        { name: 'Amount', type: 'float' }, 
        { name: 'PrintComment' }, 
        { name: 'Comment' }, 
        { name: 'Discountable', type: 'string' }, 
        { name: 'OptionalField' }, 
        { name: 'optionalFieldFinder' } 
       ], 
    localdata: data 

}; 

var dataAdapter1 = new $.jqx.dataAdapter(source1); 



documentGridContainer.jqxGrid(
    { 
     width: 975, 
     source: dataAdapter1, 
     theme: '', 
     editable: true, 
     enabletooltips: true, 
     columnsresize: true, 
     autoheight: true, 
     selectionmode: 'singlecell', 
     columns: [ 
      { text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false }, 
      { text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 }, 
      { text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function() { }, 
       buttonclick: function (row) { 
        editrow = row; 
        showDocumentDistFinder(editrow); 

       } 
      }, 
      { text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false }, 
      { text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 }, 
      { text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function() { }, 
       buttonclick: function (row) { 
        editrow = row; 
        showDocumentRevenueFinder(editrow); 
       } 
      }, 
      { text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false }, 
      { text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: setAmountEditable() }, 
     //{ text: 'Print Comment', datafield: 'PrintComment', width: 150 }, 
      {text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist', 
      createeditor: function (row, column, editor) { 
       // assign a new data source to the dropdownlist. 
       var list = ['Yes', 'No']; 
       editor.jqxDropDownList({ source: list }); 
      }, 
      // update the editor's value before saving it. 
      cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { 
       // return the old value, if the new value is empty. 
       if (newvalue == "") return oldvalue; 
      } 
     }, 
      { text: 'Comment', datafield: 'Comment', width: 250 }, 
     //{ text: 'Discountable', datafield: 'Discountable', width: 100 } 
      {text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist', 
      createeditor: function (row, column, editor) { 
       // assign a new data source to the dropdownlist. 
       var list = ['Yes', 'No']; 
       editor.jqxDropDownList({ source: list }); 
      }, 
      // update the editor's value before saving it. 
      cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { 
       // return the old value, if the new value is empty. 
       if (newvalue == "") return oldvalue; 
      } 
     }, 
      { text: 'Optional Field', datafield: 'OptionalField', width: 100 }, 
      { text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function() { }, 
       buttonclick: function (row) { 
        editrow = row; 
        createDocumentOptionalFields(editrow); 
        $('#model-documentOptionField').modal('show'); 
       } 

      } 
     ] 
    }); 

在此先感謝

Answer 1

你的初始化不正確。數據類型：未綁定模式下的「json」沒有意義。你應該刪除它。以下是一個工作示例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> 
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var source1 = { 
       totalrecords: 5, unboundmode: true, 
       datafields: [ 
           { name: 'LineId' }, 
           { name: 'DistCode' }, 
           { name: 'distFinder' }, 
           { name: 'DistCodeDesc' }, 
           { name: 'RevAccount' }, 
           { name: 'revAccountFinder' }, 
           { name: 'RevAccDesc' }, 
           { name: 'Amount', type: 'float' }, 
           { name: 'PrintComment' }, 
           { name: 'Comment' }, 
           { name: 'Discountable', type: 'string' }, 
           { name: 'OptionalField' }, 
           { name: 'optionalFieldFinder' } 
       ] 
      }; 

      var dataAdapter1 = new $.jqx.dataAdapter(source1); 

      var documentGridContainer = $("#jqxgrid"); 

      documentGridContainer.jqxGrid(
       { 
        width: 975, 
        source: dataAdapter1, 
        theme: '', 
        editable: true, 
        enabletooltips: true, 
        columnsresize: true, 
        ready: function() 
        { 
         documentGridContainer.jqxGrid('setcellvalue', 0, 'Amount', 50); 
        }, 
        autoheight: true, 
        selectionmode: 'singlecell', 
        columns: [ 
         { text: 'Line Number', columntype: 'textbox', datafield: 'LineId', width: 100, editable: false }, 
         { text: 'Dist.Code', columntype: 'textbox', datafield: 'DistCode', width: 80 }, 
         { 
          text: '', datafield: 'distFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function() { }, 
          buttonclick: function (row) { 
           editrow = row; 
           showDocumentDistFinder(editrow); 

          } 
         }, 
         { text: 'Description', datafield: 'DistCodeDesc', columntype: 'textbox', width: 150, editable: false }, 
         { text: 'Revenue Account', datafield: 'RevAccount', columntype: 'textbox', width: 150 }, 
         { 
          text: '', datafield: 'revAccountFinder', columntype: 'button', width: 30, resizable: false, cellsrenderer: function() { }, 
          buttonclick: function (row) { 
           editrow = row; 
           //showDocumentRevenueFinder(editrow); 
          } 
         }, 
         { text: 'Acc. Description', datafield: 'RevAccDesc', columntype: 'textbox', width: 150, editable: false }, 
         { text: 'Amount', datafield: 'Amount', cellsformat: 'f2', cellsalign: 'right', align: 'right', width: 80, editable: true }, 
        //{ text: 'Print Comment', datafield: 'PrintComment', width: 150 }, 
         { 
          text: 'Prt Comment', datafield: 'PrintComment', width: 93, columntype: 'dropdownlist', 
          createeditor: function (row, column, editor) { 
           // assign a new data source to the dropdownlist. 
           var list = ['Yes', 'No']; 
           editor.jqxDropDownList({ source: list }); 
          }, 
          // update the editor's value before saving it. 
          cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { 
           // return the old value, if the new value is empty. 
           if (newvalue == "") return oldvalue; 
          } 
         }, 
         { text: 'Comment', datafield: 'Comment', width: 250 }, 
        //{ text: 'Discountable', datafield: 'Discountable', width: 100 } 
         { 
          text: 'Discountable', datafield: 'Discountable', width: 93, columntype: 'dropdownlist', 
          createeditor: function (row, column, editor) { 
           // assign a new data source to the dropdownlist. 
           var list = ['Yes', 'No']; 
           editor.jqxDropDownList({ source: list }); 
          }, 
          // update the editor's value before saving it. 
          cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) { 
           // return the old value, if the new value is empty. 
           if (newvalue == "") return oldvalue; 
          } 
         }, 
         { text: 'Optional Field', datafield: 'OptionalField', width: 100 }, 
         { 
          text: '', datafield: 'optionalFieldFinder', columntype: 'button', width: 30, cellsrenderer: function() { }, 
          buttonclick: function (row) { 
           editrow = row; 
           createDocumentOptionalFields(editrow); 
           $('#model-documentOptionField').modal('show'); 
          } 

         } 
        ] 
       }); 
     }); 
    </script> 
</head> 
<body class='default'> 
    <div id='jqxWidget'> 
     <div id="jqxgrid"> 
     </div> 
    </div> 
</body> 
</html>