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>

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com