<!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. 【转载】 python-星号变量的特殊用法

    原文链接:https://www.qingsword.com/qing/python-12.html 引言 在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前 ...

  2. [TensorFlow笔记乱锅炖] tf.multinomial(logits, num_samples)使用方法

    tf.multinomial(logits, num_samples) 第一个参数logits可以是一个数组,每个元素的值可以简单地理解为对应index的选择概率,注意这里的概率没有规定加起来的和为1 ...

  3. Debian 9 美化界面

    Debian 桌面美化 安装 gnome-tweak-tool aptitude install gnome-tweak-tool 登陆gnome-look下载主题包 gnome-look上有很多主题 ...

  4. 【转】数据库介绍（MySQL安装 体系结构、基本管理）

    [转]数据库介绍(MySQL安装 体系结构.基本管理) 第1章 数据库介绍及mysql安装 1.1 数据库简介 数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新 ...

  5. python的MySQLdb库链接MySQL入门代码

    链接:http://www.runoob.com/python/python-mysql.html

  6. FAT文件系统规范v1.03学习笔记---1.保留区之启动扇区与BPB

    1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...

  7. 如何操控DevExpress的 SpreadSheet 控件 并与 XAF 结合应用

    DevExpress的XAF 框架通常使用 GridControl 控件来操作数据库表中的数据,但导入导出.非结构化数据的管理可以使用SpreadSheet 控件. SpreadSheet 控件模拟微 ...

  8. 用css解决table文字溢出控制td显示字数

    场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...

  9. Cnblog-Latex数学公式使用测试

    *默认不支持换行的数学公式 1. \(a+b=c\) $a+b=c$ 2. \[a+b=c\] $$a+b=c$$ 3. $alpha$ $\alpha$ $pi$ $\pi$ 4. $\Gamma$ ...

  10. ACM Computer Factory POJ - 3436 网络流拆点+路径还原

    http://poj.org/problem?id=3436 每台电脑有$p$个组成部分,有$n$个工厂加工电脑. 每个工厂对于进入工厂的半成品的每个组成部分都有要求,由$p$个数字描述,0代表这个部 ...