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>

 

posted @ 2017-06-27 20:03  TZB_007  阅读(1397)  评论(0)  编辑  收藏  举报