我在单击按钮时显示引导模式对话框(用户权限),其中我显示 jqxTreeGrid 显示用户列表。每个用户都有一些权限设置。
所以我有以下资源来设置引导模式对话框:
我有一个名为 UserPermissionModel.js 的主干模型
定义(['应用程序','下划线','主干'],
function(app, _, Backbone) { "use strict"; var UserPermissionModel = Backbone.Model.extend({ defaults: { userList:[], permissions:[] } }); return UserPermissionModel;
});
我有一个View UserPermissionView,有以下方法
initialize: function () { var self = this; self.model = new UserPermissionModel(); }
在渲染后,我正在调用一个 Web 服务,它为我提供了用户列表,我将其保存在模型内的 userList 数组中。由于这是我第一次设置权限,所以我将 Permission 数组设置为默认值。
afterRender: function () { var self = this;
self.model.set("userList", []); self.model.set("permissions", []); // Get all the users save them in model AllUsers.fetch(function (Users) { Users.each(function (user) { // create the permission object reference var permission = new PermissionInfo(); // set defaults permission.createJSON({ userId: user.attributes.id, read: "", write: "" }); // Save the group in model self.model.get("userList").push(user); // Save the permission in model self.model.get("permissions").push(permission); }); // Show the groups in jqxTreeGrid self.loadListGrid(); }, function (error) { // error handling });
},
一旦我得到 userList,我就会使用 loadListGrid 方法在 jqxTreeGrid 上显示它们。
在 jqxTreeGrid 就绪方法中,我正在初始化弹出框。下面是我放在 Backbone 视图的 loadListGrid 方法中的 jqxTreeGrid 代码
$("#jqxListGrid").jqxTreeGrid({
width: '100%',
source: dataAdapter,
theme: 'iltreegrid',
columnsHeight: 35,
ready: function() {
// initialize the Permission Setting Popover
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]',
content: $('#ad_permissionSettingPopover').html()
}
// bind the popover on body
$("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function () {
//that.setDocumentPermissions();
app.pubSub.trigger("permissionPopover:onOk");
$("[rel=popover]").popover("destroy");
$(".popover").remove();
}).on("show.bs.popover", function (e) {
// hide all other popovers before showing the current popover
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
}).on("shown.bs.popover", function (e) {
// set the z-index of the popover as it is going behid the jqxTreeGrid Column
$('.popover').css('z-index', '999999');
// add the style class
$('.popover').addClass('jqxtreegridCell-popover');
// get the current value of permission settings and
// mark the radio button checked
app.pubSub.trigger("permissionPopover:onShow");
});
// click on cancel button removes the popover
$("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function () {
$("[rel=popover]").popover("destroy");
$(".popover").remove();
});
},
columns: [
{
text: '<span class="ilicon ilicon-user"></span>' + app.i18n.t("doc_permission_userName", " User Name"),
datafield: 'userName',
cellsrenderer: userIconRenderer,
width:'40%'
},
{
text: '',
datafield: 'id',
width: '0%',
hidden: true
},
{
text: '<span>' + app.i18n.t("doc_permission_userType", "User Type") + '</span>',
datafield: 'userType',
width: '18%'
},
{
text: '<span>' + app.i18n.t("doc_permission_email", "Email") + '</span>',
datafield: 'userEmail',
width: '18%'
},
{
text: '<span>' + app.i18n.t("doc_permission_permissionSetting", "Permission Setting") + '</span>',
width: '24%',
cellsrenderer: permissionSettingRenderer,
sortable: false
}
]
});
网格中的每个用户都有一个按钮,该按钮显示带有一些单选按钮的弹出框。检查该用户的默认权限(我从存储在模型中的权限数组中读取)。我可以为该用户选择不同的权限,并为该特定用户更新模型中的权限数组。
希望我能够解释该功能。
现在,当我第一次打开模式时。一切都很完美。但是当我关闭模式并再次打开它时,这就是问题发生的地方。当我在“shown.bs.popover”方法中读取权限时,主干模型在权限数组中有我从未设置过的值。它给了我错误的价值观。但在任何其他方法中,它都有正确的值
我尽力复制这里的场景。如果有人有任何想法,请发表评论。
谢谢亚明