0

Windows ストアの JavaScript アプリケーションに取り組んでいます。アプリケーションは、Azure からのデータを使用します。Azure 接続サンプルをナビゲーション テンプレートに移植しようとすると、リスト ビューにテーブルの列全体が表示されました。サンプルと同じデータ読み取りコードを使用しました。html ページと css はサンプルと同じでした。

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<!--head segment-->
<title>QuickStart</title>

<!-- WinJS references -->    
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
<!-- QuickStart references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/pages/Advertisement/advertisement.js"></script>
<link href="/pages/Advertisement/advertisement.css" rel="stylesheet" />    
</head>
<body>
<!--body segment-->
<div style="margin: 50px 10px 10px 50px" id="overalldiv">
<div style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto 1fr;">

<div style="-ms-grid-column-span: 2; margin: 0px 0px 20px 0px;">
<div style="color: #0094ff; font-size: 8pt">WINDOWS AZURE MOBILE SERVICES</div>
<div style="color: #808080; font-size: 32pt">Sample</div>
</div>

        <div style="-ms-grid-row: 2; -ms-grid-column: 1;">
            <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                <div style="-ms-grid-column: 1;" class="tasknumber">
                    1
                </div>
                <div style="-ms-grid-column: 2">
                    <strong>Insert a TodoItem</strong><br />
                    <span style="font-size: small">Enter some text below and click Save to insert a new todo item into your database</span>
                </div>
            </div>
            <div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
                <input type="text" id="textInput" />
                <button id="buttonSave" style="margin-left: 5px">Save</button>
            </div>
        </div>

        <div style="-ms-grid-column: 2; -ms-grid-row: 2;">
            <div style="display: -ms-grid; -ms-grid-rows: auto 1fr">
                <div style="-ms-grid-row: 1">
                    <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                        <div style="-ms-grid-column: 1; float: left;" class="tasknumber">
                            2
                        </div>
                        <div style="-ms-grid-column: 2">
                            <strong>Query and Update Data</strong><br />
                            <span style="font-size: small">Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems</span>
                        </div>
                    </div>
                    <div style="margin: 5px 0px 0px 72px">
                        <button id="buttonRefresh">Refresh</button>
                    </div>
                </div>
            </div>

            <div id="TemplateItem" data-win-control="WinJS.Binding.Template">
                <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                    <input class="itemCheckbox" type="checkbox" data-win-bind="checked: complete; dataContext: this" />
                    <div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px" data-win-bind="innerText: text">
                    </div>
                </div>
            </div>

            <div id="listItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align: stretch"
                data-win-control="WinJS.UI.ListView"
                data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout} }">
            </div>

        </div>
    </div>
</div>
</body>
</html>

実際のサンプル プロジェクトでは、下の図に示すように、azure データベース テーブルのテキスト フィールドのみが表示されました。 実際のサンプル出力のスクリーンショット

しかし、私の場合、すべての列フィールドが表示されています アプリケーション出力のスクリーンショット

必要なコンテンツのみを表示する方法と、リストビューのコンテンツの書式設定を行う方法を教えてください。以下のように内容を表示したかった

1
腹筋

2
ドラッグ

3
ドラゴン

4
アーム.. .. ..

4

1 に答える 1

1

ListView のitemTemplateを設定しましたか? itemDataSource の各項目を表示する方法を ListView に伝える必要があります。

于 2013-03-28T13:35:20.657 に答える