<!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. 【PS技巧】如何校正倾斜的图片

    1.打开PS,直接拖拽图片. 2.点击[滤镜==>扭曲==>镜头校正],出现校正对话框. 3.点击拉直工具,从右向左滑一条直线. 参考文档: 在Photoshop中如何校正倾斜的图片?

  2. wrk 压力测试 http benchmark POST接口

    简单的 http 性能测试工具 wrk.git 一个简单的 http benchmark 工具, 能做很多基本的 http 性能测试. wrk 的一个很好的特性就是能用很少的线程压出很大的并发量. 原 ...

  3. JSP内置对象概述

    JSP内置对象预先定义了九个这个的对象: request(请求) . response (响应). session (会话). application (应用程序). out . pageContex ...

  4. E - Intervals 贪心

    Chiaki has n intervals and the i-th of them is [li, ri]. She wants to delete some intervals so that ...

  5. CAS适用场景

    转载:http://www.jb51.net/article/86192.htm 下面小编就为大家带来一篇Java并发编程总结——慎用CAS详解.小编觉得挺不错的, 现在就分享给大家,也给大家做个参考 ...

  6. Spark大数据平台安装教程

    一.Spark介绍 Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎.Spark是开源的类Hadoop MapReduce的通用并行框架,Spark拥有Hadoop MapRe ...

  7. UVA1434-The Rotation Game(迭代加深搜索)

    Problem UVA1434-The Rotation Game Accept:2209  Submit:203 Time Limit: 3000 mSec  Problem Description ...

  8. [2] LabelImg图片标注 与 YOLOv3 网络训练 (待补充)

    LabelImg是一个图形图像注释工具. 它是用Python编写的,并使用Qt作为其图形界面. 注释以PASCAL VOC格式保存为XML文件,这是ImageNet使用的格式.Besdies,它也支持 ...

  9. Python：Day55 ORM多表操作

    命令行创建UTF8数据库: CREATE DATABASE 数据库名称 DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 创建多表(外键)

  10. Python：Day14 集合、函数

    浅copy只copy一层 深copy相当于克隆一份 深copy要引入copy,具体如下: import copy wife = copy.copy() #此为浅copy,括号中要加copy的对象,相当 ...