-1

私のページ「cbxShowNotifications」にチェックボックスがあります。ページ読み込み時にチェックするなら「ツリービュー」を表示したい。

.aspx ページ:

<html> 
      <body>
        <form>
           <asp:CheckBox ID="cbxShowNotifications" runat="server"/>Show Notifications
           <div id="treeview"></div>
        </form>
        <script src="../Scripts/jquery.min.js" type="text/javascript"> </script>
        <script src="../Scripts/kendo.web.min.js" type="text/javascript"> </script>
        <script src="../Scripts/NotificationsTreeView.js" type="text/javascript"> </script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                showOrHide();
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                CreateNotificationTree(<%= UserId.ToString(CultureInfo.InvariantCulture) %>);
            });
        </script>
    </body>
</html>

JavaScript ファイル:

function CreateNotificationTree(userId)
{
    var data = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "../api/notifications/byuserid/" + userId,
                contentType: "application/json"
            }
        },
        schema: {
            model: {
                children: "notifications"
            }
        }
    });

    $("#treeview").kendoTreeView({
        dataSource: data,
        loadOnDemand: true,
        dataUrlField: "LinksTo",
        checkboxes: {
            checkChildren: true
        },
        dataTextField: ["notificationType", "NotificationDesc"],
        select: treeviewSelect
    });

    function treeviewSelect(e)
    {
        var node = this.dataItem(e.node);
        window.open(node.NotificationLink, "_self");
    }
}

$('#cbxShowNotifications').on('change', function()
{
    debugger;
    var tview = $('#treeview');

    if ($(this).prop('checked'))
    {
        tview.show();
    }
    else
    {
        tview.hide();
    }
});

function showOrHide()
{
    debugger;
    var tview = $('#cbxShowNotifications');

    if ($(this).prop('checked'))
    {
        tview.show();
    }
    else
    {
        tview.hide();
    }
}

問題は、ページが読み込まれ、チェックボックスがオンになっている場合、ツリービューが表示されないことです。私は何を間違っていますか？

ちなみに、ページが読み込まれた後、チェックボックスをオフにするとツリーが消え、オンにするとツリーが表示されます。

したがって、これはページの読み込み時にのみ発生するため、いつ実行されるかの問題だと思います。

4

2 に答える 2

2

チェックボックスcbxShowNotificationsは .net サーバー コントロールです。そのため、ID は同じままではありません。ID の前にページと制御情報が追加される DOM の変更を確認します。つまり、「master_ctrl_cbxShowNotifications」のようなものです。

クラスを追加して、クラスをセレクターとして使用することをお勧めします。

<asp:CheckBox ID="cbxShowNotifications" CssClass="chkBoxNotif" runat="server"/>

$('.chkBoxNotif').on('change', function(event) {
    //Do something
});
于 2013-08-20T20:54:51.320 に答える
1

機能中showOrHide

変化する：

if ($(this).prop('checked'))

に

if ($('#cbxShowNotifications').prop('checked'))

this値はチェックボックスではありません。

于 2013-08-20T20:57:36.227 に答える