The jqGrid cannot display the table.

I want to display the table with jqGrid, but it doesn't look good at all.What is the cause?
I have downloaded and used the following for jQueryUI and jqGrid.
·jQueryUI(http://jqueryui.com/download/)
·jqGrid(http://www.trirand.com/blog/?page_id=6)
Also, I got jQuery from Google's CDN.

<!DOCTYPE html>
<html lang="ja">
<head>
  <metacharset="utf-8">
  <title>JPGrid</title>
  <link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css"/>
  <link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap-ui.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-ui/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  <script type="text/javascript" src="jqGrid/js/i18n/grid.locale-en.js">/script>
  <script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
</head>
<body>
  <table id="sample1"></table>
  <divid="pager1"></div>
  <script>
    // Column Settings
    varcolModelSettings = [
    {name:"radio", index:"radio", width:50, align:"center", classes:"radio_class"},
    { name: "no", index: "no", width: 70, align: "center", classes: "no_class"},
    {name:"name", index:"name", width:200, align:"center", classes:"name_class"},
    { name: "age", index: "age", width: 200, align: "center", classes: "age_class"},
    { name: "local", index: "local", width: 200, align: "center", classes: "local_class"},
    { name: "hobby", index: "hobby", width: 200, align: "center", classes: "hobby_class"}
    ]
    // Column Display Name
    varcolNames=[", "No.", "name", "age", "local", "hobby" ];
    // Creating Tables
    $("#sample1").jqGrid({
      data:date,  
      datatype: "local",         
      colNames —colNames,        
      colModel:colModelSettings,
      rowNum—10,                
      rowList: [1,10,20],      
      caption: "Sample Display", 
      height —200,               
      width —500,                
      pager: 'pager1',           
      shrinkToFit:true,        
      viewrecords —true           
    });

    vardate = [
    {no:1, name: "nakagawa", age:20, local: "Japan", hobby: "Tennis"},
    {no:2, name: "nakayama", age:20, local: "Japan", hobby: "Soccer"},
    ];
  </script>
</body>
</html>

javascript jquery css html5

2022-09-30 21:25

1 Answers

I think the order of the declaration part of the data and the generation part of the jqGrid is the opposite.
I don't think jqGrid dynamically generates data parts by detecting variable changes.

vardate=[
  {no:1, name: "nakagawa", age:20, local: "Japan", hobby: "Tennis"},
  {no:2, name: "nakayama", age:20, local: "Japan", hobby: "Soccer"},
];
// Creating Tables
$("#sample1").jqGrid({
  data:date,  
  datatype: "local",         
  colNames —colNames,        
  colModel:colModelSettings,
  rowNum—10,                
  rowList: [1,10,20],      
  caption: "Sample Display", 
  height —200,               
  width —500,                
  pager: 'pager1',           
  shrinkToFit:true,        
  viewrecords —true           
});

2022-09-30 21:25

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656