Как правильно сохранить скрытые данные в таблице? - PullRequest
Новая
       14

Как правильно сохранить скрытые данные в таблице?

0 голосов
/ 21 сентября 2010

Я использую плагин jTemplates для загрузки данных в мои таблицы. Поскольку есть некоторые свойства, которые я не отображаю, но я хочу, чтобы они были доступны для дальнейшего использования, я сохраняю их в скрытых полях, а затем извлекаю их по имени класса CSS и методу siblings jQuery.

Это правильный способ выполнения такой операции, или это будет считаться ужасным кодом? 

<script type="text/javascript">
$(function() {
    $("#edit").click(function(e) {
        e.preventDefault();
        var $this = $(this);

        var date = {
            Id:        $this.siblings(".tid").val(),
            StartDate: $this.siblings(".tdate1").val(),
            EndDate:   $this.siblings(".tdate2").val(),
            ClientId:  $this.siblings(".tclient").val(),
            UserId:    $this.siblings(".tuser").val()
        };

        processDate(date);
    });
});
</script>

<textarea id="template" class="ui-helper-hidden">
<table id="dates">
    <thead>
        <tr>
            <th>Id</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Client</th>
            <th></th>
       </tr>
    </thead>
    <tbody>
        {#foreach $T as record}
            <tr>
                <td>{ $T.record.Id }</td>
                <td>{ formatDate($T.record.StartDate) }</td>
                <td>{ formatDate($T.record.EndDate) }</td>
                <td>{ $T.record.Client.Name }</td>
                <td>
                    <button id="edit">Edit</button>
                    <input type="hidden" class="tid"        value='{ $T.record.Id }' />
                    <input type="hidden" class="tdate1"     value='{ $T.record.StartDate }' />
                    <input type="hidden" class="tdate2"     value='{ $T.record.EndDate }' />
                    <input type="hidden" class="tclient"    value='{ $T.record.Client.Id }' />
                    <input type="hidden" class="tuser"    value='{ $T.record.User.Id }' />
                </td>
            </tr>
        {#/for}
    </tbody>
</table>
</textarea>

Предложения будут с радостью приняты. :)

Ответы [ 3 ]

2 голосов
/ 21 сентября 2010

То, что у вас работает, хотя вы также можете использовать атрибуты данных , например: 

    {#foreach $T as record}
        <tr data-tid="{ $T.record.Id }" data-tdate1="{ $T.record.StartDate }" data-tdate2="{ $T.record.EndDate }" data-tclient="{ $T.record.Client.Id }" data-tuser="{ $T.record.User.Id }">
            <td>{ $T.record.Id }</td>
            <td>{ formatDate($T.record.StartDate) }</td>
            <td>{ formatDate($T.record.EndDate) }</td>
            <td>{ $T.record.Client.Name }</td>
            <td>
                <button class="edit">Edit</button>
            </td>
        </tr>
    {#/for}

Затем, чтобы получить атрибут, например, при нажатии кнопки редактирования: 

$(".edit").click(function() {
  var user = $(this).closest("tr").attr("data-tuser");
  //do something...
});

Обратите внимание на изменение кнопки редактирования ... вы должны использовать класс вместо идентификатора здесь, так как он повторяется.

В качестве примечания: из-за недавнего изменения в основной ветке в jQuery 1.5 вы сможете сделать .data("tuser") вместо .attr("data-tuser").

0 голосов
/ 21 сентября 2010

Как я понимаю, если это работает, для функциональности так же тривиально, как то, что вы описываете, это нормально.Что касается сохранения ваших значений в скрытых полях - это можно сделать более оптимально.Вместо этого вы можете попробовать сохранить значения в переменных.Тогда их будет проще найти, и вам не придется проходить через DOM, чтобы получить их.

0 голосов
/ 21 сентября 2010

ИМХО, это вполне приемлемый способ хранения данных, когда вы генерируете их с сервера. Другой вариант - генерировать атрибуты data- в строке таблицы. Оба являются допустимыми методами хранения данных, последний может быть немного лучше.

...