基本思想是建立一个网格,用户双击该行并打开一个模态窗口(Bootstrap面板),其中panel-body
部分用于编辑数据,而panel-footer
带有btn-group
以“保存”,“取消”或“关闭”内置一些逻辑来相应处理按钮的状态和onclick
事件。
由于整个项目中会有很多网格和许多模态窗口,虽然panel-body
部分对于每个部分都会有所不同,但panel-footer
对于他们所有人来说可能都是相同的。我想只使用一个panel-footer
作为模板,但我不知道如何使用。
目前,这是它的工作原理:
frmCustomer
和frmUnit
。 frmCustomer
panel-footer
有按钮#btnSaveCust
,#btnCancelCust
和#btnCloseCust
。
jQuery脚本具有连接到每个ID的事件,并按预期工作$(document).on("click", "#btnSaveCust", function () { SaveCust(); });
frmUnit
的工作方式相同,但名称已更改为#btnSaveUnit
且事件已更改为#btnSaveUnit
和SaveUnti()
。
现在,如果我执行模板,按钮的ID将更改为#btnSave
,#btnCancel
和#btnClose
。
我如何知道如何致电SaveCust()
或SaveUnit()
?
更新1:我刚刚意识到这不会起作用,因为我们不能有重复的id,共享视图中的btns(模板?)必须在每次以另一种形式使用时重命名
答案 0 :(得分:2)
Here's something that should help
Updated fiddle, this one tells you which form the button is in
对于更新的小提琴,单击按钮,打开模式。当您单击按钮时,我有一个动态添加到模态的表单。然后在模态内部,单击提交按钮,它将提醒您处于哪个表单。关闭模式并尝试另一个按钮,您将看到更新表单的警报,然后单击提交按钮会告诉您单击了哪个表单
这个想法是,你有class
而不是id
的一个按钮事件处理程序。这将使具有特定类的任何按钮的行为方式相同。现在下一步是按钮逻辑。
如果你看一下我处理.open-button
逻辑的小提琴,我会点击被点击的按钮的id
,将字符串-modal
附加到它,然后它打开匹配模式。我相信你可以用一个表单来复制它,并使用某种匹配相同的名称。
此外,查看关闭模式时显示的消息,您可以使用此类逻辑来定位form
并执行form.submit
或类似的操作。这应该使您的所有按钮只有一个单击事件处理程序并应用于多个表单/模态
这比使用click事件处理程序更好,并且拥有一堆if (something) else if (something) else etc...
,您只需快速简单的字符串操作并获取所需的元素并提交该表单。
如果有帮助,请告诉我