easyui的datagrid实例练习

html文件datagrid3.html负责让用户浏览数据，js文件datagrid3.js内嵌到html文件中，实现datagrid的创建，并调用php文件datagrid3.php（读取mysql并返回json数据）。

一、html文件代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Basic DataGrid - jQuery EasyUI Demo</title>
 6     <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
 7     <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
 8     <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
 9     <script type="text/javascript" src="easyui/jquery.min.js"></script>
10     <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
11     <script type="text/javascript" src="datagrid3.js"></script>
12 </head>
13 <body>
14     初中英语单词与短语大全
15     <table id="dgbox"></table>
16 </body>
17 </html>
View Code

二、js文件代码

 1 $(function () {
 2     $('#dgbox').datagrid({
 3         width : 500,
 4         //url : 'content.json',
 5         url : 'datagrid3.php',
 6         title : '用户列表',
 7         iconCls : 'icon-search',
 8         columns : [[
 9             {
10                 field : 'ch',
11                 title : '汉语',
12             },
13             {
14                 field : 'en',
15                 title : '英语',
16             },
17             {
18                 field : 'fenlei2',
19                 title : '分类',
20             },
21         ]],
22         pagination : true,
23         pageSize : 15,
24         pageList : [5, 10, 15],
25         pageNumber : 1,
26         pagePosition : 'bottom',
27     });
28     
29 });
View Code

三、php文件代码

1 111111111111111
2 222222222222222222222222
3 333333333333333333333333333
4 4444444444444444444444444444444
View Code111

 

 1 <?php
 2     //sleep(1);
 3     header('Content-Type:text/html; charset=utf-8');
 4     require 'config.php';
 5     $page = $_POST['page'];
 6     $pageSize = $_POST['rows'];
 7     $first = $pageSize * ($page - 1);
 8     $biaoname="testeasyui_users";
 9     $biaoname="english";
10     $query = mysql_query("SELECT * FROM ".$biaoname." LIMIT $first,$pageSize") or die('SQL 错误！');
11     $json = '';
12     while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
13         $json .= json_encode($row).',';
14     }
15     $total = mysql_num_rows(mysql_query("SELECT * FROM ".$biaoname));
16     $json = substr($json, 0, -1);
17     echo '{"total" : '.$total.', "rows" : ['.$json.']}';
18     mysql_close();
19 ?>

 

posted @ 2015-04-22 21:15  wmfz  Views(232)  Comments(0)    收藏  举报