JQuery EasyUI(35)

最新推荐文章于 2025-07-10 06:07:18 发布

翻译最新推荐文章于 2025-07-10 06:07:18 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了使用JQuery EasyUI的DataGrid组件实现查询功能的方法。包括如何设置DataGrid的属性，如toolbar和load方法，以及如何通过输入框和日期选择器收集查询参数，最后通过调用load方法执行查询并更新DataGrid显示。

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

学习要点：

查询功能

一、查询功能

DataGrid属性，扩展自Panel面板
属性名	值	说明
toolbar	Array，selector	顶部工具栏的DataGrid面板，可能的值：1.一个数组，每个工具属性都和linkbutton一样。2.选择器指定的工具栏。

DataGrid方法
方法名	参数	说明
load	param	加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。

<!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"/>
    <style>
       .textbox{
          height:200px;
          margin:0;
          padding:0 2px;
          box-sizing:content-box;
       }
    </style>              
  </head>
  <body>
     <table id="box"></table>
     <div id="tb" style="padding:5px;">
        <div style="margin-buttom:5px;">
          <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-deit" plain="true">修改</a>
          <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        </div>
        <div style="padding:0 0 0 7px;color='#ccc'">
           查询账号：<input type="text" name="user" class="textbox" style="width:100px">
           创建时间从：<input type="text" name="date_from" class="easyui-datebox" style="width:100px"> 到：<input type="text" name="date_to" class="easyui-datebox" style="width:100px"><a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search();">查询</a>
        </div>
     </div>
  </body>
</html>

$(function(){

      obj = {
       search:function(){
            $('#box').datagrid('load',{
            user:$.trim($('input[name="user"]').val()),
            date_from:$('input[name="date_from"]').val(),
            date_to:$('input[name="date_to"]').val();
       });
      },
   };

     $('#box').datagrid({
        width:600,
        //url:'content.json',
        url:'user.php',
        title:'用户列表',
        iconCls:'icon-search',
        striped:true,
        nowrap:true,
        rownumbers:true,
        singleSelect:true, 
        fitColumns:true,     
        columns:[[
             {
               field:'user',
               title:'账号',
               sortable:true,
               width：100,               
             },
             {
               field:'email',
               title:'邮箱',
               sortable:true, 
               width：100,               
             },
             {
               field:'date',
               title:'注册时间',
               sortable:true,
               width：100,  
             },
      ]],
        toolbar:'#tb',        
        pagination:true,
        pageSize:10,
        pageList:[10,20,30],
        pageNumber:1,
        pagePosition:'top',
        pagePosition:'both',
        pagePosition:'bottom',
        sortName:'date',
        sortOrder:'DESC',
});

[
  {
   "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);

   $order = $_POST['order'];
   $sort = $_POST['sort'];
   
   $sql = '';
   $user = '';

   $datefrom = '';
   $dateto = '';

   if(isset($_POST['user']) && !empty($_POST['user'])){
    $user = "user LINK '%{$_POST['user']}%' AND ";
    $sql .= $user;
  }

   if(isset($_POST['$datefrom']) && !empty($_POST['$datefrom'])){
    $datefrom = "date >='{$_POST['$datefrom']}' AND ";
    $sql .= $datefrom;
  }


   if(isset($_POST['$dateto']) && !empty($_POST['$dateto'])){
    $dateto = "date <='{$_POST['$dateto']}' AND ";
    $sql .= $dateto;
  }


   if(!empty($sql)){
     sql = 'WHERE '.substr($sql,0,-4);
   }


   $query = mysql_query("SELECT user,email,data FROM think_user $sql ORDER BY $order $sort LIMIT $first,$pageSize") or die('SQL 错误！');
   $total = mysql_num_rows(mysql_query("SELECT user,email,data FROM think_user $sql"));
   
   $json ='';

   while (!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      $json .= json_encode($row).',';
    }
     
   
   echo '{"total":'.$total.',"rows":['.$json.'],"footer":[{"user":"统计","email":"统计","date":"统计"}]}'; 

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


   mysql_close();
?>

作者：Roger_CoderLife

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

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