<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据网格-工具栏</title>
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/layout.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/pagination.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui/themes/default/datagrid.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-easyui/jquery.easyui.min.js"></script>
    <script>

    </script>
</head>
<body>
<div style="background-color: #b3b3b3; border: 1px solid #666; width: 610px; height: auto; margin: 100px auto">
    <div id="tt" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
        </div>
        <div>
            Date From: <input class="easyui-datebox" style="width:80px">
            To: <input class="easyui-datebox" style="width:80px">
            Attribute:
            <input class="easyui-combobox" style="width:100px"
                   url="data/combobox_data.json"
                   valueField="id" textField="text">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
    </div>
    <table id="table1" class="easyui-datagrid" style="width:610px; height: 300px"
           iconCls="icon-save" rownumbers="true" pagination="true">
        <!--数据网格（datagrid）列，并设置 'pagination' 属性为 true，它将在数据网格（datagrid）的底部
        生成一个分页（pagination）工具栏。pagination将发送两个参数到服务器：
         page：页码，起始值 1。
         rows：每页显示行。-->
        <thead>
        <tr>
            <th field="itemid" width="100">Item ID</th>
            <th field="productid" width="100">Product ID</th>
            <th field="listprice" width="100" align="right">List Price</th>
            <th field="unitcost" width="100" align="right">Unit Cost</th>
            <th field="attr1" width="100">Attribute</th>
            <th field="status" width="100" align="center">Stauts</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>4</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>
            <td>5</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        <tr>

            <td>6</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        </tbody>
    </table>

</div>
</body>
</html>

easyUI-datagrid带有工具栏和分页器的数据网格的更多相关文章

  1. easyui datagrid combobox下拉框获取数据问题

    最近在使用easyui的datagrid,在可编辑表格中添加一个下拉框,查了下API,可以设置type : 'combobox',来做下拉框,这下拉框是有了,可是这后台数据怎么传过来呢,通过查API可 ...

  2. easyUI datagrid 根据查询条件 选中对应数据的行

    开始 输入了 土豆,南瓜,再次是小青菜,每次输入点击搜索的时候(模糊查询),选中的当前数据对应的行 在做之前,在网上查询了许多资料,也在技术群里问过许多次,弄了好久终于好了. 第一次写博客真不知道写啥 ...

  3. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  4. EasyUI DataGrid getChecked/getSelections 获取不到数据

    今天使用getChecked获取选择的行,结果总是获取一行数据,于是换用getSelections,结果还是一样,想起之前做的项目,把idField换了下,之后getChecked/getSelect ...

  5. easyui datagrid设置一开始不加载数据

    解决办法就是:一开始的url属性设置为空,例如: <table id="dg" title="用户管理" class="easyui-datag ...

  6. easyui,datagrid 分页，跨域访问数据

    http://blog.itpub.net/30980622/viewspace-2051035/ 思路: 1.通过配置属性,loader加载跨域资源 2.获得$(pager).pagination对 ...

  7. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  8. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  9. jquery easyui datagrid 将值作为img显示图片时报404 undefined

    原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {}  value = undefined  index = 0 进行一次渲染, 在没有formater情况将数据 ...

随机推荐

  1. MySQL常用的sql操作

    1.日期时间格式化 2.日期时间格式化 3.查询第11到第15条数据 ,5//落过多少,取出多少. 4.字符串转日期 select str_to_date('2016-01-02', '%Y-%m-% ...

  2. CMake的一些正确姿势

    1, 2,

  3. ROC和AUC理解

    一. ROC曲线概念 二分类问题在机器学习中是一个很常见的问题,经常会用到.ROC (Receiver Operating Characteristic) 曲线和 AUC (Area Under th ...

  4. eMMC基础技术7：Bus Speed Modes

    1. 前言 eMMC有多种速率模式,主要根据如下几个方面进行划分: single rate or dual rate I/O电压 BUS宽度 支持的clock频率范围 最大的传输速率 2. 概览 图 ...

  5. requests库入门06-post请求

    示例相应的接口文档:GitHub邮箱接口文档 先登录GitHub,然后右上角用户下拉框中选择settings,然后选Emails.可以看到当前账户设置的邮箱情况 再看添加邮箱接口的文档描述,可以通过一 ...

  6. telnetlib 中各种 read 函数的意义

    基本原理 要明白 telnetlib 中各个 read 函数的意义,首先要了解 telnetlib 的工作原理. telnetlib 首先通过 socket 连接从网络接收数据,把数据存储到自己的 r ...

  7. 题解-USACO18DEC Sort It Out

    Problem 洛谷5156 题意概要:给定一个长为\(n\)的排列,可以选择一个集合\(S\)使这个集合内部元素排到自己在整个序列中应该在的位置(即对于集合\(S\)内的每一个元素\(i\),使其排 ...

  8. 【转】Java并发编程：同步容器

    为了方便编写出线程安全的程序,Java里面提供了一些线程安全类和并发工具,比如:同步容器.并发容器.阻塞队列.Synchronizer(比如CountDownLatch).今天我们就来讨论下同步容器. ...

  9. spring3.1 profile 配置不同的环境

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  10. Openssl与私有CA搭建

    转自:http://www.tuicool.com/articles/aURnim 随着网络技术的发展.internet的全球化,信息共享程度被进一步提高,各种基于互联网的应用如电子政务.电子商务日益 ...