2017-09-19 67 views
0

我通過PHP和Smarty創建了一個學生數據。有了這個,我在PHP中創建了兩個數組,然後應用循環並將變量賦予Smarty並調用它們,但是我堅持將CSS應用到表中。我需要這種類型的均如下所示:如何將CSS添加到Smarty

giving image
https://www.screencast.com/t/LSq3SnNq

PHP代碼

Include_once "../PrePengIne-header.PhP"; 

$users = array(
    1 => array(
     'Id' => '00AC', 
     'Pre' => 50, 
     'Post' => 60 
    ), 
    2 => array(
     'Id' => '00XV', 
     'Pre' => 60, 
     'Post' => 70 
    ), 
    3 => array(
     'Id' => '00UY', 
     'Pre' => 70, 
     'Post' => 80 
     ), 
    4 => array(
     'Id' => '002VC', 
     'Pre' => 92, 
     'Post' => 80 
     ), 
    ); 

$user_second = array(
    1 => array(
     'Id' => '00AC', 
     'name' => 'john', 
     'address' => 'CalIfornIa', 
     'emaIl' => '[email protected]', 
     'dob' => '1989/10/06', 
     'doj' => '2014/12/04' 
    ), 
    2 => array(
     'Id' => '00XV', 
     'name' => 'brad', 
     'address' => 'WashIngton', 
     'emaIl' => '[email protected]', 
     'dob' => '1980/09/23', 
     'doj' => '2005/03/10' 
    ), 
    3 => array(
     'Id' => '00UY', 
     'name' => 'swatI', 
     'address' => 'MutthIganj', 
     'emaIl' => '[email protected]', 
     'dob' => '1990/05/04', 
     'doj' => '2013/01/02' 
    ), 
    4 => array(
     'Id' => '002VC', 
     'name' => 'smIth', 
     'address' => 'CalIfornIa', 
     'emaIl' => '[email protected]', 
     'dob' => '1989/10/22', 
     'doj' => '2013/07/15' 
    ), 
); 

foreach ($user_second as $key => $value) { 
    $user_second[$key] = array_merge($user_second[$key], $users[$key]); 
} 

$second_array = array(); 
foreach ($user_second as $key => $value) { 
    foreach ($value as $assIgn => $gIven_value) { 
     $second_array [] = $gIven_value; 
    } 
} 

$foo = $user_second [1]; 
$file = array_keys($foo); 
$theme->assIgn("foo",array_merge($file, $second_array)); 
$theme->assIgn("file",$file); 
echo($theme->fetch('smartart/p_screen2.tPl')); 

Smarty的代碼

<!Doctype html> 
<html> 
    <head> 
     <title>screen 2</title> 

     <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 

    <body> 
     <div class="table-striped table"> 
      <{html_table loop=$foo cols="8" rows="5" table_attr='border="2"'}> 
     </div> 
    </body> 
</html> 

這裏是我的鱈魚大膽和可編輯。

回答

0

你有兩個選擇:

  1. 使用th_attr,tr_attr和td_attr Smarty的html_table標籤的值提供樣式信息
  2. 而不是使用{html_table} Smarty的標籤,利用這些元素一個聰明的循環,並自己渲染表格。
+0

如何在th_attr給CSS你能解釋一下 – punk

0

您希望循環在你的$ foo的陣列,構建表自己是這樣的:

Smarty的模板

<body> 
    <div class="table-striped table"> 
     <table class="array-class"> 
      <thead> 
       <tr> 
        <th>ID</th> 
        <th>Name</th> 
        <th>Address</th> 
        <th>Date of birth</th> 
        <th>Date of j...</th> 
       </tr> 
      </thead> 
      <tbody> 
      {foreach $foo as $row} 
       <tr id="row_{$row.id}"> 
        <td>{$row.id}</td> 
        <td>{$row.name}</td> 
        <td>{$row.address}</td> 
        <td>{$row.email}</td> 
        <td class="column-class">{$row.dob}</td> 
        <td>{$row.doj}</td> 
       </tr> 
      {foreachelse} 
       <tr id="row_{$row.id}" class="row-class"> 
        <td colspan="6">Some text like : array is empty.</td> 
       </tr> 
      {/foreach} 
      </tbody> 
     </table> 
    </div> 
</body> 
  1. 小心讓你的所有數組鍵小寫,因爲$row.email$row.emaIl不一樣

  2. 查看id="row-{$row.id}"以jQuery爲例對我們有用!

CSS

/*applied to entire array */ 
.array-class { 
    ... 
} 

/*applied to columns */ 
.column-class { 
    ... 
} 

/*applied to rows */ 
.row-class { 
    ... 
} 

/*specific to one row (example here with ID = 4) */ 
#row-4 { 
    ... 
} 
+0

打招呼,但在此我必須使用html_table。 smarty關鍵字 – punk