zoukankan      html  css  js  c++  java
  • easyUI-datagrid带有工具栏和分页器的数据网格

    <!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; 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="80px">
    To: <input class="easyui-datebox" style="80px">
    Attribute:
    <input class="easyui-combobox" style="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="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>
    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    lvs持久连接及防火墙标记实现多端口绑定服务
    LVS负载均衡器DR模型的实现
    CentOS 6.5结合busybox完成自制Linux系统及远程登录和nginx安装测试
    CentOS 6.5下的lamp环境rsyslog+MySQL+loganalyzer实现日志集中分析管理
    centos中selinux功能及常用服务配置
    网站遭遇CC及DDOS攻击紧急处理方案
    centos6.5下系统编译定制iptables防火墙扩展layer7应用层访问控制功能及应用限制QQ2016上网
    centos 6.5内核编译步骤及配置详解
    centos系统初始化流程及实现系统裁剪
    iptables实现网络防火墙及地址转换
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/9224852.html
Copyright © 2011-2022 走看看