我在特定页面中有3个网格（国家，办公室和楼层），其中国家网格加载了数据库中的值，国家/地区网格中的每一行都有一个Office Grid获取的点击按钮激活并获得国家的相应办公室，办公室网格行在每一行上都显示楼层按钮，其中所有楼层都填入特定办公室。 JS的代码如下：
define(function (require) {
"use strict";
var locationMasterTemplate = require("tpl!../template/LocationMasterTemplate"),
nlsBundle = require("i18n!./../../nls/LocationNLS"),
LocationMasterConstants=require("../constants/LocationMasterConstants");
var LocationMasterView = Marionette.View.extend({
template: locationMasterTemplate,
initialize: function (options) {
this.el = options.el;
this.urlParams = options.params;
this.selectedCountryId = null;
this.selectedOfficeId = null;
},
render: function () {
this.$el.html(this.template({nlsBundle: nlsBundle}));
this._showCountryGrid();
this._showOfficeGrid();
this._showFloorGrid();
this._disableGridButtons(LocationMasterConstants.ITAUTO_OFFICE_GRID_ID);
this._disableGridButtons(LocationMasterConstants.ITAUTO_FLOOR_GRID_ID);
},
/**
* Creates the Country grid
* @private
*/
_showCountryGrid: function () {
var dataSource = this._createCountryDataSource();
var self = this;
this.countryGrid = uilayer.grid({
elem: this.$el.find("#itauto_country_grid"),
toolbar: [{ name: "create", text: nlsBundle["addCountry"]},"save","cancel"],
columns: [
{
field: "countryName",
title: nlsBundle["country"],
width: "30%"
},
{
//TO-DO need to decide whether to use the existing k-i-align-justify class as the button class
command: [{
name: "details",
iconClass: "k-i-align-justify",
text :nlsBundle["showOffices"],
click: function(e) {
var data=self._getSelectedRowData(e,this);
self.selectedCountryId= data.countryId;
self.selectedCountryName=data.countryName;
var ds = self._createOfficeDataSource();
self.officeGrid.setDataSource(ds);
self.officeGrid.widget.dataSource.read();
if((self.selectedCountryId != null )){
self._disableGridButtons(LocationMasterConstants.ITAUTO_FLOOR_GRID_ID);
self._enableGridButtons(LocationMasterConstants.ITAUTO_OFFICE_GRID_ID);
self.floorGrid.widget.dataSource.data([]);
}
},
}]
},
],
height:"13rem",
editable: true,
selectable:"row",
persistSelection:true,
scrollable: true,
sortable: true,
resizable: true,
dataSource: dataSource,
});
},
/**
* Creates the Office Grid
* @private
*/
_showOfficeGrid: function () {
var self=this;
this.officeGrid = uilayer.grid({
elem: this.$("#itauto_office_grid"),
toolbar: [{ name: "create", text: nlsBundle["addOffice"]},"save","cancel"],
columns: [
{
field: "officeName",
title: nlsBundle["office"],
width: "30%"
},
{
//TO-DO need to decide whether to use the existing k-i-align-justify class as the button class
command: [{
name: "details",
iconClass: "k-i-align-justify",
text : nlsBundle["showFloors"],
click: function(e) {
var data=self._getSelectedRowData(e,this);
self.selectedOfficeId = data.officeId;
var ds = self._createFloorDataSource();
self.floorGrid.setDataSource(ds);
self.floorGrid.widget.dataSource.read();
self._enableGridButtons(LocationMasterConstants.ITAUTO_FLOOR_GRID_ID);
}
}],
},
],
height:"15rem",
editable: true,
scrollable: true,
sortable: true,
resizable: true,
autoBind:false,
});
this._addITAutoClasses(LocationMasterConstants.ITAUTO_OFFICE_GRID_ID);
},
/**
* Creates the Floor Grid
* @private
*/
_showFloorGrid: function () {
var dataSource = this._createFloorDataSource();
this.floorGrid = uilayer.grid({
elem: this.$("#itauto_floor_grid"),
toolbar: [{ name: "create", text: nlsBundle["addFloor"]},"save","cancel"],
columns: [{
field: "floorName",
title: nlsBundle["floor"],
width: "30%"
}],
height:"17rem",
editable: true,
scrollable: true,
sortable: true,
resizable: true,
dataSource: dataSource,
autoBind:false,
});
this._addITAutoClasses(LocationMasterConstants.ITAUTO_FLOOR_GRID_ID);
},
_getSelectedRowData:function(e,context){
// get the current table row (tr)
var tr = $(e.target).closest("tr");
// get the data bound to the current table row
var data = context.dataItem(tr);
return data;
},
/* _setCountryDetails:function(countryName){
$(LocationMasterConstants.ITAUTO_OFFICE_DETAILS_ID).attr( "Office Details", countryName);
},*/
/**
* element
* @param elementId
* @private
*/
_addITAutoClasses : function(elementId){
this.$el.find("#" + elementId).find(".k-grid-add").addClass("itauto-add-button");
this.$el.find("#" + elementId).find(".k-grid-save-changes").addClass("itauto-save-button");
this.$el.find("#" + elementId).find(".k-grid-cancel-changes").addClass("itauto-cancel-button");
},
_enableGridButtons : function(elementId) {
this.$el.find("#" +elementId).find(".itauto-add-button").removeClass("k-state-disabled").addClass("k-grid-add");
this.$el.find("#" +elementId).find(".itauto-save-button").removeClass("k-state-disabled").addClass("k-grid-save-changes");
this.$el.find("#" +elementId).find(".itauto-cancel-button").removeClass("k-state-disabled").addClass("k-grid-cancel-changes");
},
_disableGridButtons : function(elementId) {
this.$el.find("#" +elementId).find(".itauto-add-button").addClass("k-state-disabled").removeClass("k-grid-add");
this.$el.find("#" +elementId).find(".itauto-save-button").addClass("k-state-disabled").removeClass("k-grid-save-changes");
this.$el.find("#" +elementId).find(".itauto-cancel-button").addClass("k-state-disabled").removeClass("k-grid-cancel-changes");
},
/**
* Creates the Country datasource
* @private
*/
_createCountryDataSource : function () {
var self = this,
url="./services/countries/";
var dataSource = new uilayer.data.DataSource({
transport: {
read: {
url: url,
dataType: "json",
type: "get"
},
create: {
url:url,
dataType: "json",
type: "post",
contentType: "application/json",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success" , nlsBundle["country"] +nlsBundle["saveCountry"]);
}
}
},
update: {
url: url,
dataType: "json",
type: "put",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success" , nlsBundle["country"] +nlsBundle["updateCountry"]);
}
}
},
destroy: {
url: url,
type: "delete",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success" , nlsBundle["country"] +nlsBundle["deleteCountry"]);
}
}
},
autoSync: true,
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var model=options.model;
// model.country.countryName=self.selectedCountryName;
return JSON.stringify(options.models);
}
}
},
batch: true,
schema: {
model: {
id: "countryId",
fields: {
countryId: {type: "number", editable: false, nullable: false},
countryName: {
type: "string",
nullable: false,
validation: {required: true, validationMessage: nlsBundle["countryNameRequired"]}
}
}
}
},
change: function (e) {
if (e.action == "sync") {
self.countryGrid.widget.dataSource.read();
}
}
});
return dataSource;
},
/**
Creates the Office DataSource
*/
_createOfficeDataSource : function () {
var self = this,
url="./services/offices/";
var dataSource = new uilayer.data.DataSource({
transport: {
read: {
url: url + "/country/" + self.selectedCountryId,
dataType: "json",
type: "get"
},
create: {
url:url,
dataType: "json",
type: "post",
contentType: "application/json",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success" , nlsBundle["office"] + nlsBundle["saveOffice"]);
}
}
},
update: {
url: url,
dataType: "json",
type: "put",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success" , nlsBundle["office" ] + nlsBundle["updateOffice"]);
}
}
},
destroy: {
url: url,
type: "delete",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success" , nlsBundle["office" ] + nlsBundle["deleteOffice"]);
}
}
},
autoSync: true,
parameterMap: function (options, operation) {
if(operation=="create" && options.models){
for(var i=0;i<options.models.length;i++){
var model = options.models[i];
model.country.countryId=self.selectedCountryId;
model.country.countryName=self.selectedCountryName;
}
}
if (operation !== "read" && options.models) {
return JSON.stringify(options.models);
}
}
},
batch: true,
schema: {
model: {
id: "officeId",
fields: {
officeId: {type: "number", editable: false, nullable: false},
officeName: {
type: "string",
nullable: false,
validation: {required: true, validationMessage: nlsBundle["officeNameRequired"]}
},
}
}
},
change: function (e) {
if (e.action == "sync") {
$(LocationMasterConstants.ITAUTO_OFFICE_DETAILS_ID).attr( nlsBundle["officeDetails"], self.selectedCountryName);
self.officeGrid.widget.dataSource.read();
}
}
});
return dataSource;
},
/*
Creates the Floor DataSource
*/
_createFloorDataSource : function () {
var self = this,
url="./services/floors/";
var dataSource = new uilayer.data.DataSource({
transport: {
read: {
url: url + "office/" + this.selectedOfficeId,
dataType: "json",
type: "get"
},
create: {
url: url,
dataType: "json",
type: "post",
contentType: "application/json",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success", nlsBundle["floor"] + nlsBundle["saveFloor"]);
}
}
},
update: {
url: url,
dataType: "json",
type: "put",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success", nlsBundle["floor"] + nlsBundle["updateFloor"]);
}
}
},
destroy: {
url: url,
type: "delete",
complete: function (jqXhr, textStatus) {
if (textStatus == 'success') {
uilayer.notifier("success", nlsBundle["floor"] + nlsBundle["deleteFloor"]);
}
}
},
autoSync: true,
parameterMap: function (options, operation) {
if (operation == "create" || operation == "update" && options.models) {
for (var i = 0; i < options.models.length; i++) {
var model = options.models[i];
model.office.officeId = self.selectedOfficeId;
}
}
if (operation !== "read" && options.models) {
return JSON.stringify(options.models);
}
}
},
batch: true,
schema: {
model: {
id: "floorId",
fields: {
floorId: {type: "number", editable: false, nullable: false},
floorName: {
type: "string",
nullable: false,
validation: {required: true, validationMessage: nlsBundle["floorNameRequired"]}
},
}
}
},
change: function (e) {
if (e.action == "sync") {
$(".k-add-button").addClass("k-state-disabled").removeClass("k-grid-add");
$(".k-add-button").removeClass("k-state-disabled").addClass("k-grid-add");
self.floorGrid.widget.dataSource.read();
}
}
});
return dataSource;
},
onDestroy: function () {
if(this.countryGrid)
this.countryGrid.destroy();
this.countryGrid = null;
if(this.officeGrid)
this.officeGrid.destroy();
this.officeGrid = null;
if(this.floorGrid)
this.floorGrid.destroy();
this.floorGrid = null;
this.selectedCountryId = null;
this.selectedOfficeId = null;
}
});
return LocationMasterView;
});
HTML的代码如下：
<div class = "col-md-offset-0">
<div id="itauto_location_master_container" class="location_container" >
<h1><%- nlsBundle["locationMasterTitle"] %></h1>
<div class = "col-md-offset-2 col-md-6">
<div class="row">
<h3 class="itauto-h3"><%- nlsBundle["countryDetails"] %></h3>
</div>
<div class="row">
<div class="dirty-flag-grid itauto-grid" id="itauto_country_grid" ></div>
</div>
<div class="row" id="itauto_office_details">
<h3 class="itauto-h3 padding-label" ><%- nlsBundle["officeDetails"] %></h3>
</div>
<div class="row">
<div class="dirty-flag-grid itauto-grid" id="itauto_office_grid"></div>
</div>
<div class="row">
<h3 class="itauto-h3 padding-label"><%- nlsBundle["floorDetails"] %></h3>
</div>
<div class="row">
<div class="dirty-flag-grid itauto-grid" id="itauto_floor_grid" ></div>
</div>
</div>
</div>
我想通过点击任意国家/地区的“显示办公室”按钮来代替办公室详细信息来呈现国家/地区的名称。