Как построить таблицу из 5 столбцов, используя шаблон JQuery Json response - PullRequest
Новая
       2

Как построить таблицу из 5 столбцов, используя шаблон JQuery Json response

2 голосов
/ 07 марта 2011

Ниже приведен мой ответ Json 

"Table" : [
        {
            "CompanyName" : "Company1",
            "Title" : "xxx",
            "URL" : "http://www.xyz.com",
            "FileNameStatus" : "active"
        },
        {
           "CompanyName" : "Company2",
            "Title" : "xxx",
            "URL" : "http://www.xyz1.com",
            "FileNameStatus" : "inactive"
        },
        ...

$("#tableTemplate").tmpl(data.Table).appendTo("#tblid");

 <script id="tableTemplate" type="text/x-jquery-tmpl">                 
     <tr>
        <td>      
            <a href="${URL}" target="_blank">
              <img src="${FileNameStatus}.jpg" title="${Title}" />
            </a>                    
        </td>
      </tr>
   </script>     

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>

Мне нужно построить таблицу из 5 столбцов и n строк (столбцы повторяются по горизонтали). 

eg:
col1  col2  col3  col4 col5
col6  col7  col8  col9 col10
col11 col12 col13
.....
....

Какпостроить такую ​​таблицу с вышеупомянутой структурой данных и шаблоном jquery?Заранее спасибо.

Ответы [ 3 ]

4 голосов
/ 07 марта 2011

Одно из решений состоит в том, чтобы не обрабатывать ваш массив напрямую с помощью шаблона (поэтому он выполняет шаблон для каждого элемента в массиве). Вместо этого вы можете передать объект, содержащий ваш массив (то есть передать данные, которые содержат data.Table).

Затем в вашем шаблоне у вас есть полный доступ к индексу, и вы просматриваете свои ячейки с помощью {{each}}. Используя модульное деление, вы можете правильно начинать и заканчивать строки, такие как: 

<script id="tableTemplate" type="text/html">
    <table>
        {{each(i, cell) Table}}
           {{if i % 5 == 0}}
           <tr>
           {{/if}}
             <td>      
                <a href="${URL}" target="_blank">
                  <img src="${FileNameStatus}.jpg" title="${Title}" />
                </a>                    
             </td>
           {{if (i % 5 == 4) || (i == Table.length-1)}}
           </tr>
           {{/if}}
        {{/each}}
    </table>
</script>

Пример здесь: http://jsfiddle.net/rniemeyer/5naAL/

1 голос
/ 07 марта 2011

Вот самое простое решение (если я что-то не так понял). jquery-tmpl автоматически зацикливает объекты / массивы, поэтому вам не нужно обрабатывать данные заранее. В моем примере только 3 столбца, но вы можете легко добавить еще 2 <td> с любыми данными, которые вы хотите в нем. 

<script>
var data = 
    {
        "Table" : 
        [ 
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }, 
            {
                 "CompanyName" : "Company2", 
                 "Title" : "xxx", 
                 "URL"    : "http://www.xyz1.com", 
                 "FileNameStatus" : "inactive" 
            },
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }
        ]
    };

$(function(){
     $("#tableTemplate").tmpl(data.Table).appendTo("#tblid");
});
</script>

<script id="tableTemplate" type="text/x-jquery-tmpl">
    <tr>    
        <td>                   
            <a href="${URL}" target="_blank">               
                <img src="${FileNameStatus}.jpg" title="${Title}" /> 
            </a>
        </td>
        <td>
            ${CompanyName}
        </td>
        <td>
            ${Title}
        </td>
    </tr>
</script>

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>

Рабочий пример: http://jsfiddle.net/qYgrZ/

0 голосов
/ 07 марта 2011

Попробуйте это:

Добавьте новую функцию processData для массажа входного массива и добавьте новый шаблон для визуализации ячейки, как показано ниже:

Рабочий пример @ http://jsfiddle.net/Cjqr9/

<script type="text/javascript">
    var data = 
    {
        "Table" : 
        [ 
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }, 
            {
                 "CompanyName" : "Company2", 
                 "Title" : "xxx", 
                 "URL"  : "http://www.xyz1.com", 
                 "FileNameStatus" : "inactive" 
                    ]
    };

    $(function(){
         processData(data.Table);
         $("#tableTemplate").tmpl(processData(data.Table)).appendTo("#tblid");
    });

    function processData(data){
        var delta = 5 - data.length%5;
        while(delta > 0){
            data.push({});
            delta--;
        }
        var arr = null;
        var retArr = [];
        $.each(data, function(i, item){
            if(i%5 == 0){
                arr = [];
                retArr.push(arr);
            }
            arr.push(item);
        });
        return retArr;
    }
    </script>

    <script id="tableTemplate" type="text/x-jquery-tmpl">                      
        <tr>         
            {{tmpl($data) "#cellTemplate"}}
        </tr>    
    </script>

    <script id="cellTemplate" type="text/x-jquery-tmpl">
        {{if URL}}
         <td>                   
                <a href="${URL}" target="_blank">               
                    <img src="${FileNameStatus}.jpg" title="${Title}" /> 
                    ${$item.parent.indexOf($item.data)}
                </a>                             
         </td>       
         {{else}}
            <td/>
         {{/if}}
    </script>
    <div id="rightWrapper">
        <table id="tblid">
        </table>
    </div>
...