JQuery EasyUI(32)-优快云博客

第三十二章： DataGrid（数据表格）组件[1]

学习要点：

加载方式
分页功能

一、加载方式：

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识，它是轻量级的且功能丰富。

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
    <table class="easyui-datagrid" data-options="width:400">
     <thead>
         <tr>
            <th data-options="field:'user'">账号</th>
            <th data-options="field:'email'">邮箱</th>
            <th data-options="field:'date'">注册时间</th>
         </tr>
     </thead>
     <tbody>
         <tr>
            <th>蜡笔小新</th>
            <th>xiaoxin@163.com</th>
            <th>2014-10-01</th>
         </tr>
         <tr>
            <th>樱桃小丸子</th>
            <th>xiaowanzi@163.com</th>
            <th>2014-10-02</th>
         </tr>
         <tr>
            <th>黑崎一护</th>
            <th>yihu@163.com</th>
            <th>2014-10-03</th>
         </tr>
     </tbody>
    </table>
  </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
     <table id="box"></table>
  </body>
</html>

$(function(){

     $('#box').datagrid({
        width:400,
        title:'用户列表',
        iconCls:'icon-search',
   });
});

二、分页和排序：

DataGrid属性，扩展自Panel面板
属性名	值	说明
url	string	从远程请求数据。默认值null。
columns	array	DataGrid列配置对象，详见列属性说明中更多细节。默认值undefined。
pagination	boolean	设置为true，则在DataGrid组件底部显示分页工具栏。默认值false。
pageNumber	number	设置分页时初始化页码。默认值null。
pageSize	number	设置分页时设置每页多少条。默认值10。
pageList	array	设置分页时初始化条数选择大小，默认值为[10,20,30,40,50]。
pagePosition	array	设置分页工具栏的位置。可选值为：top，buttom，both。默认值：buttom。

列属性，在columns里设置的属性
属性名	值	说明
title	string	列标题名称。默认值undefined。
field	string	列字段名称。默认值undefined。
width	number	列的宽度。没有设置则自适应。默认值undefined。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>            
</head>
  <body>
     <table id="box"></table>
  </body>
</html>

$(function(){

     $('#box').datagrid({
        width:400,
        //url:'content.json',
        url:'user.php',
        title:'用户列表',
        iconCls:'icon-search',
        columns:[[
             {
               field:'user',
               title:'账号',
             },
             {
               field:'email',
               title:'邮箱',
             },
             {
               field:'date',
               title:'注册时间',
             },
      ]],
        pagination:true,
        pageSize:5,
        pageList:[5,10,15],
        pageNumber:1,
        pagePosition:'top',
        pagePosition:'both',
        pagePosition:'bottom',
   });
});

[
  {
   "user":"蜡笔小新",
   "emial":"xiaoxin@163.com",
   "date":"2014-10-01",
  },
  {
   "user":"樱桃小丸子",
   "emial":"xiaowanzi@163.com",
   "date":"2014-10-02",
  },
  {
   "user":"黑崎一护",
   "emial":"yihu@163.com",
   "date":"2014-10-03",
  },
]

<?php
   header('Content-Type:text/html;chartset=utf-8');
   define('DB_HOST','localhost');
   define('DB_USER','root');
   define('DB_PWD','123456');
   define('DB_NAME','thinkphp');    

  $conn = @mysql_connect(DB_HOST,DB_USER,DB_PWD)or die('数据库连接失败：'.mysql_error());

  @mysql_select_db(DB_NAME)or die('数据库错误：'.mysql_error());

  @mysql_query('SET NMAES UTF8')or die('字符集错误：'.mysql_error());
?>

<?php
   require 'config.hph';

   $page = $_POST['page'];
   $pageSize = $_POST['row'];
   $first = $pageSize * ($page - 1);


   $query = mysql_query("SELECT user,email,data FROM think_user LIMIT $first,$pageSize") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }
   
   $total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user"));
   
   echo '{"total":'.$total.',"rows":['.$json.']}'; 

   $json  = substr($json,0,-1);

   mysql_close();
?>

<?php
   require 'config.hph';

   $page = $_POST['page'];
   $pageSize = $_POST['row'];
   $first = $pageSize * ($page - 1);


   $query = mysql_query("SELECT user,email,data FROM think_user LIMIT $first,$pageSize") or die('SQL 错误！');
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }
   
   $total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user"));
   
   echo '{"total":'.$total.',"rows":['.$json.']}'; 

   $json  = substr($json,0,-1);

   mysql_close();
?>

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/103088415

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载