<!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. 控件屏蔽Ctrl+C 复制

    procedure ****.***KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState); begin ) )) and (ssCtr ...

  2. 嵌入式开发平台迅为iTOP-4412开发板-ssh常见问题以及解决方法

    一.基本网络,软件安装以及配置 ssh 软件无法登陆 Ubuntu,有可能是网络不通.SSH 软件未安装.环境变量没配置.防 火墙未关闭等. 1. 网络连接 使用 ssh 传输文件的前提是网络顺畅,即 ...

  3. Django中间件基础笔记

    django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在django项目的se ...

  4. dubbo初步认识

    dubbo中文网站:http://dubbo.apache.org/zh-cn/ dubbo英文网站:http://dubbo.apache.org/en-us/ 1.Apache Dubbo是一款高 ...

  5. python set 使用

    创建集合set python set类是在python的sets模块中,大家现在使用的python2.7.x中,不需要导入sets模块可以直接创建集合.>>>set('boy')se ...

  6. Mac 远程桌面 ubuntu16.04 unity

    待解决问题: 使用 vnc 远程桌面 ubunt16.04的自带桌面 unity 尝试方法 : 查看了各种方法, 基本都是曲线救国, 安装 gnome 或者 xfce4等其他桌面系统, 而我只想用好看 ...

  7. Nikitosh 和异或 —— 一道 trie 树的题用可持久化 trie 水 然后翻车了...

    题意简介 题目就是叫你找两个不重合的非空区间,使得这两个区间里的数异或后相加的和最大 (看到异或,没错就决定是你了可持久化trie!) 思路 水一波字典树,莫名觉得这题可持久化能过,于是水了一发挂了, ...

  8. [C]C语言中的指针和内存泄漏几种情况

    引言 原文地址:http://www.cnblogs.com/archimedes/p/c-point-memory-leak.html,转载请注明源地址. 对于任何使用C语言的人,如果问他们C语言的 ...

  9. layui 各种弹出框

    第一步:引用文件 第二步:写脚本 <script> //iframe窗 //layer.open({ // type: 2, // title: false, // closeBtn: 0 ...

  10. MYSQL连不上

    如果你想连接你的MySQL的时候发生这个错误: ERROR 1130: Host '192.168.1.3' is not allowed to connect to this MySQL serve ...