简体   繁体   English

如何将CSS添加到Smarty

[英]How can add CSS to Smarty

I created a student data through PHP and Smarty. 我通过PHP和Smarty创建了一个学生数据。 With this I created two arrays in PHP and applying loop and and giving the variable to Smarty and call them, but I was stuck in applying CSS to the table. 这样,我在PHP中创建了两个数组并应用循环,并将变量提供给Smarty并调用它们,但是我被困于将CSS应用于表。 I need this type of which were shown here: 我需要这种类型的显示在这里:

给形象
https://www.screencast.com/t/LSq3SnNq https://www.screencast.com/t/LSq3SnNq

PHP code 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 code 聪明代码

<!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>

Here is my code for boldness and editable. 这是我的粗体和可编辑代码。

You have two options: 您有两种选择:

  1. Use the th_attr, tr_attr, and td_attr values of the Smarty html_table tag to supply style information for those elements 使用Smarty html_table标记的th_attr,tr_attr和td_attr值来提供这些元素的样式信息
  2. Instead of using the {html_table} smarty tag, use a { foreach } smarty loop, and render the table yourself. 代替使用{html_table} smarty标记,而使用{ foreach } smarty循环,并自行呈现表。

You would prefer to loop in your $foo array and construct table by yourself like this : 您宁愿像这样循环遍历$ foo数组并自己构造表:

Smarty template 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. Be careful to have all your array keys in lowercase, because $row.email is not the same as $row.emaIl 请注意,所有数组键都必须小写,因为$row.email$row.emaIl

  2. See the id="row-{$row.id}" useful for us with jQuery for example ! 例如,请参阅对jQuery有用的id="row-{$row.id}"

CSS 的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 {  
    ...
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM