<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>easyUI 数据表格datagrid的使用</title>

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

        <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>

        <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script>

        <link rel="stylesheet" href="js/easyui/themes/bootstrap/easyui.css"/>

        <link rel="stylesheet" href="js/easyui/themes/icon.css"/>

    </head>

    <body>

        <table id="grid"></table>

    </body>

    <script type="text/javascript">

        $(function(){

            $("#grid").datagrid({

                columns:[[

                    {

                        field:"id",

                        title:"商品编号",

                        width:100

                    },

                    {

                        field:"name",

                        title:"商品名称",

                        width:100

                    },

                    {

                        field:"price",

                        title:"商品价格",

                        width:100

                    }

                ]],

                url:"product.json",

                pagination:true,//分页

                toolbar:[

                    {

                        id:"saveBtn",

                        text:"保存",

                        iconCls:"icon-save",

                        handler:function(){

                            alert("这是保存操作")

                        }

                    },

                    {

                        id:"exportBtn",

                        text:"导出",

                        iconCls:"icon-save",

                        handler:function(){

                            alert("这是导出操作")

                        }

                    },

                ]

            });

        });

    </script>

</html>

easyUI 数据表格datagrid的使用的更多相关文章

  1. easyUI数据表格datagrid之笔记2

    /**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...

  2. easyUI数据表格datagrid之分页

    一.分页函数 /**========================================= * 分页函数 */function pagerFilter(data) { if(typeof ...

  3. easyUI数据表格datagrid之笔记

    1.用ajax获取数据库数据 /**========================================= * 读取数据库信息,使用ajax的load方法 */function getMe ...

  4. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  5. easyui框架--基础篇（一）-->数据表格datagrid（php与mysql交互）

      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...

  6. jQuery EasyUI - 数据表格（DataGrid）

    由于工作需要,项目使用前端 jQuery EasyUI - DataGrid 来控制数据表格. 1.加载相关js和css,因为easyui依赖jquery,所有加载easyui前要先加载jquery, ...

  7. Easyui数据表格-地区列表及工具栏增删改

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 商城项目回顾整理（二）easyUi数据表格使用

    后台主页: 商品的数据表格展示 引入用户表数据表格展示 引入日志表数据表格展示 引入订单表数据表格展示 后台主页代码: <%@ page language="java" co ...

  9. 数据表格 - DataGrid - 查询

    toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...

随机推荐

  1. 前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）

    ---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...

  2. P2066 机器分配 DP

    题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M≤15,N≤10.分 ...

  3. C#基础の迭代器详解

    一.什么是迭代器 迭代器(iterator)有时又称游标(cursor)是程序设计的软件设计模式,可在容器(container,例如链表或阵列)上遍访的接口,设计人员无需关心容器的内容. 迭代器模式是 ...

  4. php面试题整理（四）

    应该是group by username }

  5. 2.03-handler_openner

    import urllib.request def handler_openner(): #系统的urlopen并没有添加代理的功能所以需要我们自定义这个功能 #安全 套接层 ssl第三方的CA数字证 ...

  6. foreach 引用传值&

    foreach  引用传值& php 怎么在foreach中循环数组   ,的时候添加元素跟值 foreach($arr as $key => &$vo){ //注意,由于上面遍 ...

  7. 08 python 初学（字典）

    字典是 python 中唯一的映射类型 .采用键值对(key-value)的形式存储数据. python 对 key 进行哈希函数运算,根据计算的结果决定 value 的存储地址,所以字典时无需存储的 ...

  8. hyperledge环境安装

    1.安装环境 1)本机安装 前提是已经安装好了docker\docker-compose\go,相应的内容可见 docker-1-环境安装及例子实践 docker官方文档学习-1-Docker for ...

  9. solaris下安装oracle 11g与11g rac

    1.To Find Swap, RAM, and OS Version 对于 Solaris 操作系统,查看 Swap, RAM, and OS Version 的方法: swap -l /usr/s ...

  10. 初学Python—列表和元组

    一.什么是列表 列表是一系列数据的集合 二.列表的引用 首先定义一个列表 names=["alex","bob","alice"," ...