从 Kendo UI 命令按钮传递数据

Question

我有一个剑道网格，每行有 6 个命令按钮，结构如下，但调用不同的函数。我正在寻找一种将数据传递给函数的方法，基于按下哪个按钮。现在，我在 java 端有 6 个函数，在 aspx 端有 6 个弹出窗口。我什至不确定它是否可以完成，但这只是很多重复的代码。下面是每个按钮的命令结构：

command: [{
        name: "Edit",
        title: "Alert Email",
        width: "180px",
        click: onDataBound75
    }],

这是 6 个功能之一：

function onDataBound75(e) {
        e.preventDefault();
        $("#txtAlert").kendoEditor({
            resizable: {
                content: true,
                toolbar: true,
                encoded: false
            }
        });
        var window = $("#emailAlert_popup").kendoWindow({
            width: "600px",
            visible: false,
            modal: true,
            actions: [
                "Maximize",
                "Close"
            ],
        });
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var viewModelAlert75 = kendo.observable({
            Alert75EmailSubject: dataItem.Alert75EmailSubject,
            Alert75EmailBody: dataItem.Alert75EmailBody,
            Alert75FromAddress: dataItem.Alert75FromAddress,
        });
        kendo.bind($("#emailAlert_popup"), viewModelAlert75);
        window.data("kendoWindow").center().open();
    };

这是 aspx 端的 6 个弹出窗口之一：

<div id="emailAlert_popup" class="TT_PopupWindow">
        <div class="SearchParam">
            <label class="control-label" for="txtAlert75EmailSubject" style="width:200px">Email Subject</label>
            <input name="txtEmailSubject" id="txtAlert75EmailSubject" class="k-textbox" style="width:430px"
                data-bind="value: Alert75EmailSubject" />                    
        </div>
        <div class="SearchParam">
            <label class="control-label" for="txtAlert75EmailBody" style="width:200px">Email Body</label>
            <textarea id="txtAlert" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: Alert75EmailBody"></textarea>
        </div>
        <div class="SearchParam">
            <label class="control-label" for="txtAlert75FromAddress" style="width:200px">From Address</label>
            <input name="txtFromAddress" id="txtAlert75FromAddress" class="k-textbox" style="width:430px"
                data-bind="value: Alert75FromAddress"
            />
        </div>
        <div class="k-edit-buttons k-state-default">
            <button type="button" id="btnAlert75EmailUpdate" data-role="button" class="k-button k-button-icontext k-primary k-grid-update" role="button" aria-disabled="false" tabindex="0" style="float:right"><span class="k-icon k-i-check"></span>Update</button>
            <button type="button" id="btnAlert75Cancel" data-role="button" class="k-button k-button-icontext k-grid-cancel" role="button" aria-disabled="false" tabindex="1" style="float:right"><span class="k-icon k-i-cancel"></span>Cancel</button>
        </div>
    </div>

有没有办法让只有 1 个 javascript 函数将数据传递到 aspx 端，并且在 aspx 页面上只有 1 个弹出窗口？

Answer 1

我想出了如何做到这一点，以供其他寻找相同场景的人使用。这就是我用 1 个函数和 1 个 kendowindow 实现它的方法：

command: [{
        name: "Alert75Edit",
        title: "Alert Email",
        width: "180px",
        click: AlertEmails
    }],

数据源：

DataSources = {
    EditorWindow:{
        EmailSubject:null,
        EmailBody:null,
        EmailFromAddress:null
    }
};

单一功能：

function (e) {
    e.preventDefault();
    var AlertType = e.data.commandName.replace("Edit", "");
    if (!$("#txtAlertEmailBody").data("kendoEditor")) {
        $("#txtAlertEmailBody").kendoEditor({
            resizable: {
                content: true,
                toolbar: true,
                encoded: false
            }
        });
    }
    var window = $("#emailAlert_popup").kendoWindow({
        width: "600px",
        visible: false,
        modal: true,
        actions: [
            "Maximize",
            "Close"
        ],
    });
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    EditorWindow.EmailSubject = dataItem[AlertType + "EmailSubject"];
    EditorWindow.EmailBody = dataItem[AlertType + "EmailBody"];
    EditorWindow.EmailFromAddress = dataItem[AlertType + "FromAddress"];

    var viewModelAlert = kendo.observable({
        AlertEmailSubject: EditorWindow.EmailSubject,
        AlertEmailBody: EditorWindow.EmailBody,
        AlertFromAddress: EditorWindow.EmailFromAddress,
    });
    kendo.bind($("#emailAlert_popup"), viewModelAlert);
    window.data("kendoWindow").center().open();
};

aspx 文件中的单个 kendoWindow 弹出窗口：

<div id="emailAlert_popup" class="TT_PopupWindow">
    <div class="SearchParam">
        <label class="control-label" for="txtAlertEmailSubject" style="width:200px">Email Subject</label>
        <input name="txtEmailSubject" id="txtAlertEmailSubject" class="k-textbox" style="width:430px"
            data-bind="value: AlertEmailSubject" />                    
    </div>
    <div class="SearchParam">
        <label class="control-label" for="txtAlertEmailBody" style="width:200px">Email Body</label>
        <textarea id="txtAlertEmailBody" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: AlertEmailBody"></textarea>
    </div>
    <div class="SearchParam">
        <label class="control-label" for="txtAlertFromAddress" style="width:100px">From Address</label>
        <input name="txtFromAddress" id="txtAlertFromAddress" class="k-textbox" style="width:430px"
            data-bind="value: AlertFromAddress"
        />
    </div>
    <div class="k-edit-buttons k-state-default">
        <button type="button" id="btnAlertCancel" data-role="button" class="k-button k-button-icontext k-grid-cancel" role="button" aria-disabled="false" tabindex="1" style="float:right; margin:5px"><span class="k-icon k-i-cancel"></span>Cancel</button>
        <button type="button" id="btnAlertEmailUpdate" data-role="button" class="k-button k-button-icontext k-primary k-grid-update" role="button" aria-disabled="false" tabindex="0" style="float:right; margin:5px"><span class="k-icon k-i-check"></span>Update</button>
    </div>
</div>