<!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. 为什么react的组件要super(props)

    https://segmentfault.com/q/1010000008340434

  2. C. Edgy Trees Codeforces Round #548 (Div. 2) 并查集求连通块

    C. Edgy Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  3. CF369E Valera and Queries

    嘟嘟嘟 这题刚开始以为是一个简单题,后来越想越不对劲,然后就卡住了. 瞅了一眼网上的题解(真的只瞅了一眼),几个大字令人为之一振:正难则反! 没错,把点看成区间,比如2, 5, 6, 9就是[1, 1 ...

  4. 转://Linux下误删除/home目录的恢复方法

    一般情况下,我们在安装Oracle数据库的时候,都会创建一个Oracle用户,用该用户来安装和管理Oracle.Oracle用户的根目录就是/home/oracle. 通常安装Oracle数据库是按照 ...

  5. Quartz Cron表达式详解

    转:https://www.jianshu.com/p/f03b1497122a 本文包含如下内容 CronTrigger简介 Cron 表达式 Cron表达式可选的值 Cron表达式的配置规则 Cr ...

  6. P1101 单词方阵 （单词方阵）

    思路:就是白白的模拟 #include<iostream> using namespace std; ][]; ][]; char kk[] = "yizhong"; ...

  7. 【转】如何修改 video 样式

    我们这里说的“修改 video 样式”并不是要自己实现一套 controls,而是尝试修改 video 的默认样式 隐藏全屏按钮 这个很容易查到 video::-webkit-media-contro ...

  8. Python：Day09

    Ubantu忘记密码: 1.开机长按shift,进入界面后按e: 2.将红框中内改成如下并按F10重启: 3.输入passwd,然后用户名,然后重新输入密码: locale命令查看系统中是否有中文 a ...

  9. Python：Day04

    数学运算符: +  加 -  减 *  乘 **  指数运算 /  除 //  整除 %  取余 比较运算符: >  大于 <  小于 >=  大于等于 <=  小于等于 == ...

  10. Spring Security（二十五）：7. Sample Applications

    There are several sample web applications that are available with the project. To avoid an overly la ...