<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>Page Title</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/default/easyui.css    ">

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/icon.css">

     <script type="text/javascript"  src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

     <script type="text/javascript" src="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/jquery.easyui.min.js"></script>

 </head>

 <body>

 <table id="dg" class="easyui-datagrid" style="width: auto; height: 350px;"></table>

 </body>

 <script>

     $("#dg").datagrid({

         iconCls: "icon-add",

         fitColumns: false,

         loadMsg: "数据加载中......",

         data:[ { "productid": "K9-DL-01", "unitcost": , "status": "P", "listprice": , "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "unitcost": , "status": "P", "listprice": , "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-18" }, { "productid": "AV-CB-03", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-134" }] ,

         pagination: true,

         rownumbers: true,

         nowrap: false,

         showFooter: true,

         singleSelect: true,

         columns: [[

             {

                 field: 'itemid', title: '编号', width: , align: 'center',

                 formatter: function (value, row, index) {

                     return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";

                 }

             },

             {

                 field: 'productid', title: '用户名', width: , align: 'center',

             },

             {

                 field: 'listprice', title: '姓名', width: , align: 'center',

             },

             {

                 field: 'unitcost', title: '操作', width: , align: 'center',

             },

             {

                 field: 'attr1', title: '操作', width: , align: 'center',

             },

             {

                 field: 'status', title: '操作', width: , align: 'center',

             }

         ]]

     })

 </script>

 </html>

EasyUI datagrid 一个可以 直接运行例子一个文件 六的更多相关文章

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

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  2. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  3. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  4. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  5. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  6. 一个简单的CORBA例子

    因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...

  7. 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

    这篇文章主要介绍了一个简单nodejs服务器例子,本文实现了一个简单的hello world例子,并展示如何运行这个服务器,需要的朋友可以参考下   我们先来实现一个简单的例子,hello world ...

  8. Spark认识&环境搭建&运行第一个Spark程序

    摘要:Spark作为新一代大数据计算引擎,因为内存计算的特性,具有比hadoop更快的计算速度.这里总结下对Spark的认识.虚拟机Spark安装.Spark开发环境搭建及编写第一个scala程序.运 ...

  9. 使用Multiplayer Networking做一个简单的多人游戏例子-2/3（Unity3D开发之二十六）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 ...

随机推荐

  1. cpu-z for ubuntu 12.04 64bit : cpu-g

    wget https://launchpad.net/~phantomas/+archive/ppa/+files/cpu-g_0.9.0_amd64.deb sudo dpkg -i cpu-g*. ...

  2. Win10系列：UWP界面布局进阶6

    在Windows 10的"个性化设置"中,用户可以更改计算机在锁屏状态下的背景图片,除此之外,也可以通过Windows应用商店应用程序将喜欢的图片设置为锁屏背景,下面通过一个示例来 ...

  3. 服务消费和负载（Feign）

    Spring Cloud Feign Spring Cloud Feign是一套基于Netflix Feign实现的声明式服务调用客户端.它使得编写Web服务客户端变得更加简单.我们只需要通过创建接口 ...

  4. 总结5条对学习Linux系统有帮助的经验心得

    作为国产手机中的代表厂商,OPPO一直走在国内的前沿.不仅手机出货量在国内遥遥领先,而且在国外也抢占不少的市场份额.前段时间,OPPO在台湾地区签下田馥甄和林宥嘉担任OPPO R9s的代言人外,在东南 ...

  5. asp.net webapi 返回json结果的方法

    第一种: public static void Register(HttpConfiguration config) { //1.将默认的xml格式化程序清除 GlobalConfiguration. ...

  6. [Leetcode221]最大面积 Maximal Square

    [题目] Given a 2D binary matrix filled with 0's and 1's, find the largest square containing only 1's a ...

  7. 网口扫盲三:以太网芯片MAC和PHY的关系（转）

      问:如何实现单片以太网微控制器? 答:诀窍是将微控制器.以太网媒体接入控制器(MAC)和物理接口收发器(PHY)整合进同一芯片,这样能去掉许多外接元器件.这种方案可使MAC和PHY实现很好的匹配, ...

  8. Grid Layout 注释

    .wrapper {  display: grid;/*定义一个块级的网格容器*/  grid-template-columns: repeat(3, 1fr); /*表示平均分为3列*/  grid ...

  9. socket 编程通信实例

    socket 编程通信实例:TCPserver: , ServerThread,  ;    WSADATA wsaData;    ,),  ;    }    ;    }    } ;    g ...

  10. 实力封装：Unity打包AssetBundle（番外篇）

    前情提要:第二种打包方式. 自定义AssetBundle包扩展名 在之前的教程中,我们已经多次提到过扩展名了,并且也已经说明了如何设置自定义的AssetBundle扩展名.至于为什么还要把它单独拿出来 ...