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>

时间： 2024-12-20 14:35:01

easyui datagrid 内容无法加载的问题的相关文章

谈谈easyui datagrid 的数据加载(转)

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据调用方式目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将

谈谈easyui datagrid 的数据加载

文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程

【颗粒归仓】（一）jQuery easyui datagrid 的数据加载

其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非url调用).在项目中我用到的以及研究别人代码中用到的普遍是第一种,下面就分别对他们进行总结. 一.ajax加载目标url返回的json数据首先明确,通过ajax加载目标url返回的值不一定是json格式,在http://blog.csdn.net/luckystar689/article/details/5

EasyUI - DataGrid 组建 - [ 组件加载和排序 ]

效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html代码: <table id="tab"></table> JS代码: 此时显示的列名称,对应的是JSON数据中的列名称. $(function () { $('#tab').datagrid({ width: 500,//宽度 title: '信息列表',//标题名

【EasyUi DataGrid】动态加载列

动态加载列可以说是一个从无到有的过程,如果只是网页上的DataGrid实现那就太无味了,有趣的在这里,这个页面上连带着一大堆的数据库表的查询修改,尤其是做着做着发现数据表设计有缺陷,需要的数据竟然只有出口没有入口,想想也是醉了,对业务不熟悉真心的杀不起啊.这个其实蛮好玩的,就像玩捉迷藏藏得那个人叫做nothing,再后来我又遇到了Multiple-births(多胞胎),一个页面上涉及到了六七张数据库表,里边的字段名虽然不一样,可它就是达到了百分之七八十的相似度,多亏咱是上过学的,欺负不了我读书

easyui datagrid 的数据加载Json数据

var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#tt').datagrid('loadData',obj);

easyui中的datagrid的数据加载的问题

我们在第一次使用easyui的datagrid的url加载所需的数据时,如果第二次加载数据我们使用的不是ulr而是数据返回结果进行加载的时候$("#div").datagird('loadData',data)就如同这样,我们是不能将最新的数据加载上的,表单加载的数据仍然是原来的数据,因为url还是原来的url,datagrid会按照原来的数据进行加载,这时候我们如果想要加载数据的时候可以使用$("#div").datagrid({url,"",

easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数.假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的东西执行后发现更本没加载我们的中文下面是我写的datetimebox日期控件js代码: $(function () { function adddaytimes(

【EasyUI学习-2】Easyui Tree的异步加载

作者:ssslinppp 1. 摘要 easyui相关的介绍可以上其官网或者百度去搜索,这里不做介绍. Easyui Tree的使用,官网或者easyui中文网站,也有相关介绍,但是官方提供的实例所使用的json是写死的,不是后台实时读取的.在实际的项目中,要显示的tree数据,一般都是从数据库中读取,然后通过通过ajax或者其他技术将tree的json数据发送到前台,然后显示. 本文将介绍easyui tree的异步加载,以及手动展开tree. 2. tree的相关介绍上图是一个