第三十二章： DataGrid（數據表格）組件[3]
學習要點：
- 樣式設置
一、樣式設置
| DataGrid屬性，擴展自Panel面板 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| striped | boolean | 是否顯示斑馬線效果，默認值爲false。 |
| nowrap | boolean | 是否在一行顯示所有數據。默認爲true。 |
| fitColumns | boolean | 是否自動展開或收縮，已達到自適應。默認爲false。 |
| data | array,object | 手工數據加載。默認爲null。 |
| loadMsg | string | 從遠程加載數據顯示的提示信息。 |
| rownumbers | boolean | 設置true，顯示一個行號。默認爲false。 |
| singleSelect | boolean | 設置true，只能選定一行。默認爲false。 |
| showHeader | boolean | 是否顯示行頭，默認爲true。 |
| showFoot | boolean | 是否顯示行尾，默認爲true。 |
| scrollbarsize | number | 滾動條所佔的高度或寬度。默認爲18。 |
| rowstyler | function | 帶兩個參數，index索引，row對象，可以通過return返回選定行的樣式。 |
| 列屬性，在columns裏設置的屬性 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| align | string | 對齊列數據。有left，center，right三種。默認爲null。 |
| halign | string | 對齊標題。有left，center，right三種。默認爲null。 |
| resizable | boolean | 設置true，則允許改變大小。 |
| fixed | boolean | 設置true，則阻止自適應。 |
| hidden | boolean | 設置true，則隱藏列。 |
| formatter | function | 單元格格式化函數，接受三個參數：value值，row對象，index索引。 |
| styler | function | 單元格樣式設定，接受三個參數：value值，row對象，index索引。 |
<!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,
height：250,
//url:'content.json',
//url:'user.php',
title:'用戶列表',
iconCls:'icon-search',
striped:true,
nowrap:true,
fitColumns:true,
loadMsg:'努力展開中……',
rownumbers:true,
singleSelect:true,
showHeader:true,
showFooter:true,
scrollbarSize：30,
rowStyler:function(index,row){
if(row.user == '李炎恢'){
//這裏返回的也可以是CSS的class名稱。
return 'background-color:orange',
}
},
columns:[[
{
field:'user',
title:'賬號',
sortable:true,
//width:100,
//fixed:true,
//algin:'center',
//halgin:'center',
resizable:false,
//hidden:true,
formatter:function(value,row,index){
//return value,
return '[' + value + ']';
console.log(value);
},
styler:function(value,row,index){
if(value == '李炎恢'){
return 'background-color:orange';
};
},
},
{
field:'email',
title:'郵箱',
sortable:true,
//sorter:function(a,b){
//console.log('a' +'|'+ 'b');
//},
},
{
field:'date',
title:'註冊時間',
sortable:true,
},
]],
data:[
{
user:'手工用戶',
email:'手工郵箱',
date:'2014-10-11',
},
],
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":"[email protected]",
"date":"2014-10-01",
},
{
"user":"櫻桃小丸子",
"emial":"[email protected]",
"date":"2014-10-02",
},
{
"user":"黑崎一護",
"emial":"[email protected]",
"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.'],"footer":[{"user":"統計","email":"統計","date":"統計"}]}';
$json = substr($json,0,-1);
mysql_close();
?>
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103088415
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載