0

HTML/JavaScriptのデザインに問題があります。

Webアプリケーションに並べ替え可能なjqueryUIを追加しました：並べ替え可能なデモを次に示します（今すぐアプリケーションを表示できません）：http： //jqueryui.com/demos/sortable/default.html

ここで、JavaScriptのドラッグアンドドロップリストにajax呼び出しからのデータを入力します。リストはユーザーによって常に変更されます。

私はこのようなことをしようとします：

Var htmlData = '<div id=wrapper>'
             +'<div>'
             +data.title
             +'</div>'
             +'<div>'
             +data.description
             +'</div>';

${"#sortable-list"}.html(htmlData);

等々。'id="' + data.id + '"' 一部のdivには、この文字列htmldataをsortable-listに収めようとするように、変数に属性が設定されています。しかし、それはかなり急速に乱雑になっています。私はそれにフィットしようとしまし<tables>た、そしてsを入れました。しかし、私が望むデザインを得るのはまだ難しいです。<p><span>

評判が悪いために画像を投稿できませんが、これが私が望むデザインです（これは1つだけです<li>）<ul>：

http://img546.imageshack.us/img546/9179/48361880.gif http://img546.imageshack.us/img546/9179/48361880.gif

では、これをどのように行いますか？私は口ひげのようなテンプレートについて読んでいますが、それは私を助けていないようです。そして、文字列を使用してテーブルを作成する方法は、最善の方法ではありません。

これを行う方法に関する例や情報は大歓迎です

4

2 に答える 2

0

このようなことができます。

var items[]

items.push($('<div />', { html: data.title }));
items.push($('<div />', { html: data.description}));

$("#sortable-list").html($('<div />', {
     'id' : 'wrapper',
     'class' : 'yourclass',
     html: items.join('')
  })
);

これitems.pushをループで使用して、すべてのデータを循環させ、アイテムを配列にプッシュできます。後で配列アイテムをhtmlに結合します

于 2012-07-06T07:33:50.440 に答える
0

クライアント側の魅力には多くの利点がありますが、主な利点は、JavaScript で HTML をつなぎ合わせる必要がないことです。そうすることは、エラーが発生しやすいだけでなく、すぐにメンテナンスの悪夢にもなります。

たとえば、Underscore.js tempting を使用して要件に取り組む方法を次に示します。

ご覧のとおり、HTML は明確にレイアウトされており、要件の変更に応じて簡単に変更できます。

<script type="text/template" id="sortable-entry">
    <% _.each(items, function(item) { %>
        <div>Title: <%= item.title %></div>
        <div>Description: <%= item.description %></div>
        <hr />
    <% }); %>
</script>

<ul id="sortable-list"></ul>​

<script>
    var data = {
        items: [
        { title: 'title1', description: 'description1' },
        { title: 'title2', description: 'description2' },
        { title: 'title3', description: 'description3' },
        { title: 'title4', description: 'description4' },
        { title: 'title5', description: 'description5' }
        ]
    };

    var event_html = _.template($('#sortable-entry').html());
    $(event_html(data)).appendTo($('#sortable-list'));
</script>

これの実際の例を次に示します - http://jsfiddle.net/tj_vantoll/kmXUr/。

于 2012-07-06T12:37:05.480 に答える