13

中に形のある剣道窓があります。フォームには、レコードのデータが入力された入力要素があります。ユーザーはウィンドウを閉じて、表示する別のレコードを選択できます。ユーザーがこれを行うとき、同じフォームで異なるレコードデータを使用して剣道ウィンドウを再度表示する必要があります。これが私が現在していることです

    if (!$("#winContainer").data("kendoWindow")) {
        $("#winContainer").kendoWindow({
            modal: true,
            width: "969px",
            height: "646px",
            title: "View Record",
            content: "record.jsp"
        });
    } else {
        $("#winContainer").data("kendoWindow").refresh({url: 'record.jsp'});
    }

    $("#winContainer").data("kendoWindow").center().open();

フォームはrecord.jsp内に含まれており、以前にサーバーから（record.jspで参照されているJavaScriptを介して）受信したJSONデータをフォームに入力します。新しいレコードデータがフォームに入力されるまで、ウィンドウが表示されないようにする必要があります。これはこれを行う正しい方法ですか、それとももっと良い方法がありますか？

4

1 に答える 1

25

毎回新しいウィンドウを作成したり、コンテンツを更新したりする代わりに、次のことをお勧めします。

  1. ウィンドウを作成し、
  2. 各ユーザーは新しいレコードを選択し、新しいデータをウィンドウにバインドしてから開きます。

この方法では、ページを1回だけロードする必要があります。

record.jspまた、元のページでページをKendoUIテンプレートとして定義することを検討することもできます。

例：

次のユーザーが選択可能なレコードがあるとします。

var data = [
    { text1: "text1.1", text2: "text1.2" },
    { text1: "text2.1", text2: "text2.2" },
    { text1: "text3.1", text2: "text3.2" },
    { text1: "text4.1", text2: "text4.2" }
];

そして、次のHTMLでテンプレートとして定義されたフォーム：

<script id="record-jsp" type="text/x-kendo-template">
    <div>
        <p>This is your form with some sample data</p>
        <label>text1: <input type="text" data-bind="value: text1"></label>
        <label>text2: <input type="text" data-bind="value: text2"></label>
    </div>
</script>

JavaScriptは次のようになります。

// Window initialization
var kendoWindow = $("<div id='window'/>").kendoWindow({
    title    : "Record",
    resizable: false,
    modal    : true,
    viewable : false,
    content  : {
        template: $("#record-jsp").html()
    }
}).data("kendoWindow");

データをウィンドウにバインドして開きます。

function openForm(record) {
    kendo.bind(kendoWindow.element, record);
    kendoWindow.open().center();
}

そして最後に、データを使用して関数を呼び出します。

openForm(data[0]);

このJSFiddleで実行されているのを見ることができます

注：それでも外部ページを使用したい場合は、次の方法で変更template: $("#record-jsp").html()する必要があります。url: "record.jsp"

于 2013-01-24T15:50:40.453 に答える