<!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. nginx学习笔记（一）

    select模型主要是apache用   FD 文件描述符   soa架构 安装nginx ping baidu.com netstat -lntup 查看端口 cat /etc/redhat-rel ...

  2. 词云wordcloud入门示例

    整体简介: 词云图,也叫文字云,是对文本中出现频率较高的“关键词”予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨. 基于Python的词云生成类库 ...

  3. centos7下安装docker（17.5docker监控的总结对比）

    到现在为止,我已经学习了docker自带的监控方案:ps/ls/top/stats,以及sysdig,weave scope,cadvisor,prometheus多种监控工具,现在做个总结和比较 部 ...

  4. 转://Oracle 数据备份与恢复微实践

    1.模拟控制文件丢失后的数据库恢复(完全恢复) 今天的主题是备份与恢复,目的就是保护数据的安全性,众所周知Oracle之所以在市场上占据了50%的份额,与它提供了强大的数据保护措施是分不开的,下面我们 ...

  5. ENQ: KO - FAST OBJECT CHECKPOINT tips

    ENQ: KO - FAST OBJECT CHECKPOINT tips Question: What does the wait event ENQ: KO - FAST OBJECT CHECK ...

  6. nginx指定配置文件启动

    /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

  7. ESP8266开发综合篇第十四节(LUA)-8266作为TCP服务器,Android客户端连接,显示温湿度,控制继电器

    前几节先略过,我先补充上大部分人迫切的需求 编写Android TCP客户端  用Android Studio 先做一下界面 然后放一个输入对话框,因为没有显示出来这个控件.所以就手写 剩下的自己研究 ...

  8. Jenkins-配置LDAP认证

    Jenkins-配置LDAP认证 参考文档: LDAP添加用户详见我的博文  Linux分类 中的< LDAP2-创建OU和用户>博文. 1.LDAP配置 1.准备一个adminDN账号用 ...

  9. Mysql字段名与保留字冲突导致的异常解决

    一:引言 用hibernate建表时经常遇到的一个异常:Error executing DDL via JDBC Statement 方法: 查看报错sql语句.问题就在这里. 我是表名(字段名)与保 ...

  10. 用Java执行Python：Jython踩坑笔记

    常见的java调用python脚本方式 1.通过Jython.jar提供的类库实现 2.通过Runtime.getRuntime()开启进程来执行脚本文件 1.Jython Jpython使用时,版本 ...