如何将CSS添加到Smarty

时间:2017-09-19 17:39:33

标签: php smarty

我通过PHP和Smarty创建了学生数据。有了这个,我在PHP中创建了两个数组并应用循环并将变量提供给Smarty并调用它们,但我不得不将CSS应用到表中。我需要这种类型:

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' => 'JOHn@yAh00.com',
        'dob' => '1989/10/06',
        'doj' => '2014/12/04'
    ),
    2 => array(
        'Id' => '00XV',
        'name' => 'brad',
        'address' => 'WashIngton',
        'emaIl' => 'bRAd@gmaIl.com',
        'dob' => '1980/09/23',
        'doj' => '2005/03/10'
    ),
    3 => array(
        'Id' => '00UY',
        'name' => 'swatI',
        'address' => 'MutthIganj',
        'emaIl' => 'SWAtI@yah00.com',
        'dob' => '1990/05/04',
        'doj' => '2013/01/02'
    ),
    4 => array(
        'Id' => '002VC',
        'name' => 'smIth',
        'address' => 'CalIfornIa',
        'emaIl' => 'SMITH@yah00.com',
        '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>

这是我的粗体和可编辑的代码。

2 个答案:

答案 0 :(得分:0)

您有两种选择:

  1. 使用Smarty html_table标记的th_attr,tr_attr和td_attr值来提供这些元素的样式信息
  2. 不使用{html_table} smarty标记,而是使用{foreach}智能循环,并自行渲染表格。

答案 1 :(得分: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. 例如,请参阅使用jQuery对我们有用的id="row-{$row.id}"

  3. <强> 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 {  
        ...
    }