<!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. MVC四大筛选器—ExceptionFilter

    该筛选器是在系统出现异常时触发,可以对抛出的异常进行处理.所有的ExceptionFilter筛选器都是实现自IExceptionFilter接口 public interface IExceptio ...

  2. keepalived脑裂问题查找

    在自己环境做keepalived+redis实验时,当重启了备用redies机器后,发现两台redies主机都拿到了VIP [root@redis2 ~]# ip addr list 1: lo: & ...

  3. C. Nice Garland Codeforces Round #535 (Div. 3) 思维题

    C. Nice Garland time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. 1.01-url-open_code

    import urllib.request def load_data(): url = "http://www.baidu.com/" #get的请求 #http请求 #resp ...

  5. Spring获取实现某接口的所有实例bean

    1.获取 applicationContext,通过ApplicationAware自动注入 2.getBeansOfType.getBeanNamesForType Map<String, I ...

  6. >/dev/null 2>&1和2>&1 >/dev/null区别

    >/dev/null 2>&1和2>&1 >/dev/null区别 >/dev/null 2>&1 //会将标准输出,错误输出都重定向至/d ...

  7. a,b,c为3个整型变量,在不引入第四个变量的前提下写一个算法实现 a=b b=c c=a?(异或解决值互换问题)

    package com.Summer_0424.cn; /** * @author Summer * a,b,c为3个整型变量,在不引入第四个变量的前提下写一个算法实现 a=b b=c c=a? */ ...

  8. 项目Alpha冲刺4

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第四天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  9. BZOJ4061/Gym100624F CERC2012 Farm and Factory 最短路、切比雪夫距离

    传送门--BZOJCH 传送门--Vjudge 设\(f_i\)表示\(i\)到\(1\)号点的最短距离,\(g_i\)表示\(i\)到\(2\)号点的最短距离,\(s_i\)表示\(n+1\)号点到 ...

  10. 2018年12月份GitHub上最热门的Java开源项目

    来自:开源最前线(ID:OpenSourceTop) 链接:https://www.itcodemonkey.com/article/12747.html 又到了公布 GitHub 上热门项目的时候啦 ...