easyui datagrid 内容无法加载的问题

最新推荐文章于 2023-08-12 11:28:34 发布

a17603847137

最新推荐文章于 2023-08-12 11:28:34 发布

阅读量276

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/TZB007/p/7086909.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"> 
            $('#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>

转载于:https://www.cnblogs.com/TZB007/p/7086909.html

a17603847137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid 内容无法加载的问题

先看代码<!DOCTYPE html><html lang="en"> <head> <meta charset="gb2312"/> <title>增加，删除行</title> <link rel="stylesheet" type="text/css" h...
复制链接

扫一扫