JQuery EasyUI(33)

最新推荐文章于 2022-07-07 14:50:01 发布

Roger_CoderLife

最新推荐文章于 2022-07-07 14:50:01 发布

阅读量195

点赞数

分类专栏： WEB - jQuery EasyUI

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

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

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

学习要点：

排序功能

一、排序功能

DataGrid属性，扩展自Panel面板
属性名	值	说明
sortName	string	设置哪些列可以进行排序。默认值null。
sortOrder	string	设置列排序的顺序，ASC和DESC，默认值是ASC。
multiSort	boolean	设置是否运行多列排序，默认为false。
remoteSort	boolean	设置服务器对数据进行排序。默认为true。
method	string	设置请求远程数据类型。默认为post。
queryParams	object	设置请求远程数据发送的额外数据。默认为null。

列属性，在columns里设置的属性
属性名	值	说明
sortable	boolean	设置为true，则可以点击排序，默认undefined。
order	string	点击排序的默认，ASC或DESC。默认undefined。
sorter	Function	自定义排序，接受a,b两个值。

<!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:'账号',
               sortable:true,
             },
             {
               field:'email',
               title:'邮箱',
               sortable:true,
               //sorter:function(a,b){
                //console.log('a' +'|'+ 'b');
               //},
             },
             {
               field:'date',
               title:'注册时间',
               sortable:true,
             },
      ]],
        pagination:true,
        pageSize:5,
        pageList:[5,10,15],
        pageNumber:1,
        pagePosition:'top',
        pagePosition:'both',
        pagePosition:'bottom',
        sortName:'date',
        sortOrder:'DESC',
        remoteSort:false,
        //multiSort:true,
        //method:'get',
        queryParam:{
          id:1,
         },
   });
});

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

   $query = mysql_query("SELECT user,email,data FROM think_user ORDER BY $order $sort 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.csdn.net/Roger_CoderLife/article/details/103121255

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