由於項目原因，網站后台需要對用戶信息進行各種操作，有時還需要進行批量操作，所以首先需要將用戶信息展示出來，查了不少資料。發現Jquery EasyUI確實是一個不錯的選擇，功能強大，文檔也比較全面，而且容易上手。今天就把自己在項目中用到的功能做了一個總結。生成數據表格如下所示:
接下來上代碼
界面html及js代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>武俠小說人物</title> 6 <!--導入相關插件--> 7 <script src="easyui/jquery.min.js"></script> 8 <script src="easyui/jquery.easyui.min.js"></script> 9 <script src="easyui/plugins/jquery.datagrid.js"></script> 10 <script src="easyui/locale/easyui-lang-zh_CN.js"></script> 11 <link rel="stylesheet" href="easyui/themes/default/easyui.css"/> 12 <link rel="stylesheet" href="easyui/themes/icon.css"/> 13 </head> 14 <body> 15 <table id="mytb" style="width:200px;height:300px"> 16 17 </table> 18 <script type="text/javascript"> 19 $('#mytb').datagrid({ 20 title: '武俠小說人物', //表格名稱 21 iconCls: 'icon-edit', //圖標 22 width:480, //表格寬度 23 height:'auto', //表格高度，可指定高度，可自動 24 border:true, //表格是否顯示邊框 25 url:'datagrid.php', //獲取表格數據時請求的地址 26 columns:[[ 27 {field:'id',title:'編號',width:100,hidden:false}, 28 {field:'name',title:'姓名',width:100}, 29 {field:'age',title:'年齡',width:100}, 30 {field:'school',title:'江湖流派',width:100} 31 ]], 32 pagination:true,//如果表格需要支持分頁，必須設置該選項為true 33 pageSize:5, //表格中每頁顯示的行數 34 pageList:[5,10,15], 35 rownumbers:true, //是否顯示行號 36 nowrap: false, 37 striped: true, //奇偶行是否使用不同的顏色 38 method:'get', //表格數據獲取方式,請求地址是上面定義的url 39 sortName: 'ID', //按照ID列的值排序 40 sortOrder: 'desc', //使用倒序排序 41 idField: 'id', 42 loadMsg:'數據正在努力加載，請稍后...', //加載數據時顯示提示信息 43 frozenColumns: [[ //固定在表格左側的欄 44 {field: 'ck', checkbox: true}, 45 ]], 46 toolbar: [{ 47 text: '添加', 48 iconCls: 'icon-add', 49 handler: function() { 50 getSelectIds('mytb','沒有選擇'); 51 } 52 }, '-', { 53 text: '刪除', 54 iconCls: 'icon-cut', 55 handler: function() { 56 getSelectIds('mytb','沒有選擇'); 57 } 58 }, '-', { 59 text: '修改', 60 iconCls: 'icon-save', 61 handler: function() { 62 getSelectIds('mytb','沒有選擇'); 63 } 64 }] 65 }); 66 </script> 67 </body> 68 </html>
后台PHP獲取數據代碼
1 <?php 2 $link=mysql_connect('localhost','root',''); //連接數據庫獲取數據 3 mysql_select_db('test'); //選擇數據庫 4 mysql_set_charset('utf8'); //設置字符集，包括result，server等字符集 5 //分頁條件 6 $page=(isset($_GET['page']))?intval($_GET['page']):1; 7 $rows=(isset($_GET['rows']))?intval($_GET['rows']):10; 8 $offset=($page-1)*$rows; 9 $sql="select * from user limit $offset,$rows"; 10 $countnum="select count(*) as total from user";//查詢數據總數 11 $res=mysql_query($sql); 12 $datanum=mysql_query($countnum); 13 $num=mysql_fetch_assoc($datanum); 14 $cdata=array(); 15 while($row=mysql_fetch_array($res)){ 16 $cdata[]=$row; 17 } 18 $data=array(); 19 foreach($cdata as $k=>$v){ 20 $data['rows'][$k]['id']=$v['id']; 21 $data['rows'][$k]['name']=$v['name']; 22 $data['rows'][$k]['age']=$v['age']; 23 $data['rows'][$k]['school']=$v['school']; 24 } 25 $data['total']=$num['total']; //總數必須要分配過去,分頁需要 26 echo json_encode($data); 27 ?>