<!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. org.springframework.beans.factory.CannotLoadBeanClassException-估计mapper出参 和 po字段不对应了

    DEBUG [localhost-startStop-1] - Ignoring bean class loading failure for bean 'itemsService'org.sprin ...

  2. Typecho反序列化导致前台 getshell 漏洞复现

    Typecho反序列化导致前台 getshell 漏洞复现 漏洞描述: Typecho是一款快速建博客的程序,外观简洁,应用广泛.这次的漏洞通过install.php安装程序页面的反序列化函数,造成了 ...

  3. Solr 7.7.0 部署到Tomcat

    第一步 1.Solr 解压后server/solr-webapp下一个webapp目录,它就是Solr的Web项目,把它复制到tomcat的webapps目录下并改名为solr # 进入Solr的se ...

  4. 生产者消费者模型java

    马士兵老师的生产者消费者模型,我感觉理解了生产者消费者模型,基本懂了一半多线程. public class ProducerConsumer { public static void main(Str ...

  5. WebBrowser控件的NavigateToString()方法 参数 为中文时乱码问题的解决。

    public static string ConvertExtendedASCII(string HTML) { StringBuilder str = new StringBuilder(); ch ...

  6. 使用@Valid和BindingResult验证请求参数的合法性并处理校验结果

    /** * 添加用户,使用@RequestBody将请求体映射到Action方法参数中 * 使用@Valid注解验证请求参数的合法性 * 使用BindingResult处理校验结果 * @param ...

  7. 【运维】Dell R710如何做Raid0与Raid5

    [写在前面]         这次是在戴尔服务器R710上面尝试的做Raid0和Raid5,亲测成功.         因为创建Raid0与Raid5的方式是一样的,所以就以创建Raid5为例. 1, ...

  8. dubbo源码分析1——SPI机制的概要介绍

    插件机制是Dubbo用于可插拔地扩展底层的一些实现而定制的一套机制,比如dubbo底层的RPC协议.注册中心的注册方式等等.具体的实现方式是参照了JDK的SPI思想,由于JDK的SPI的机制比较简单, ...

  9. 二层环路保护，RRPP多环的配置

    作者:邓聪聪 组网需求: 局域网中,由A/B/C/D构成RRPP域1换网络结构,要求环网机构中的任意两条线路中断都不能影响业务. 配置思路: 环路由两部分组成,ring1.ring2,B为环1的主节点 ...

  10. python3+selenium入门09-键盘事件

    Keys类提供了键盘上几乎所有按键的方法.通过send_keys()方法不仅可以用来模拟键盘输入,还可以用它来模拟键盘上的按键.包括组合键,比如Ctrl+a等 需要导入Keys类 from selen ...