easyui datagrid 内容无法加载的问题

Posted 2020-09-25 TZB_007

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui datagrid 内容无法加载的问题相关的知识，希望对你有一定的参考价值。

先看代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="gb2312"/>
    <title>增加，删除行</title>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/>
      <script type="text/javascript" src="../easyui-ku/jquery.min.js"></script>
      <script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script>

      <script type="text/javascript"> 
            $(‘#dg‘).datagrid({
                columns:[[    
                    {field:‘itemid‘,title:‘Item ID‘,width:80,sortable:true},    
                    {field:‘productid‘,title:‘Product ID‘,width:80,sortable:true},    
                    {field:‘product‘,title:‘Item Details‘}    
                ]]    
            });    
      </script>
  </head>
  <body>
    <table id="dg" class="easyui-datagrid"  style="width:400px;height:250px"> </table>

  </body>
</html>

这代码写完后，打开浏览器运行。原以为能看到datagrid的列名，但实际上没有看到。找了一些资料，也没有发现解决的方法。后来问了一位高人，他说以前这样是可以的，现在不行了，原因是html加载是从上到下的，也就是说id="dg"这个标签还没加载，下面的代码是无法控制id=“dg”的显示样式的。

      <script type="text/javascript"> 
            $(‘#dg‘).datagrid({
                columns:[[    
                    {field:‘itemid‘,title:‘Item ID‘,width:80,sortable:true},    
                    {field:‘productid‘,title:‘Product ID‘,width:80,sortable:true},    
                    {field:‘product‘,title:‘Item Details‘}    
                ]]    
            });    
      </script>

听他说完我就把上面的代码换了一个位置发现果然行了，以下是改变位置后的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="gb2312"/>
    <title>增加，删除行</title>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/>
      <script type="text/javascript" src="../easyui-ku/jquery.min.js"></script>
      <script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script>


  </head>
  <body>
    <table id="dg" class="easyui-datagrid"  style="width:400px;height:250px"> </table>
      <script type="text/javascript"> 
            $(‘#dg‘).datagrid({
                columns:[[    
                    {field:‘itemid‘,title:‘Item ID‘,width:80,sortable:true},    
                    {field:‘productid‘,title:‘Product ID‘,width:80,sortable:true},    
                    {field:‘product‘,title:‘Item Details‘}    
                ]]    
            });    
      </script>
  </body>
</html>

或者也可以这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="gb2312"/>
    <title>增加，删除行</title>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/>
      <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/>
      <script type="text/javascript" src="../easyui-ku/jquery.min.js"></script>
      <script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script>
   
      <script type="text/javascript"> 
          $(function(){
            $(‘#dg‘).datagrid({
                columns:[[    
                    {field:‘itemid‘,title:‘Item ID‘,width:80,sortable:true},    
                    {field:‘productid‘,title:‘Product ID‘,width:80,sortable:true},    
                    {field:‘product‘,title:‘Item Details‘}    
                ]]    
            });    
        })();
      </script>
  </head>
  <body>
    <table id="dg" class="easyui-datagrid"  style="width:400px;height:250px"> </table>

  </body>
</html>

以上是关于easyui datagrid 内容无法加载的问题的主要内容，如果未能解决你的问题，请参考以下文章

jquery easyui datagrid 加载成功，选中某一行

关于easyui加载datagrid数据的问题

Easyui Datagrid的Rownumber行号显示问题

EasyUI中datagrid在ie下reload失败解决方案