///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define([
|
'dojo/_base/declare',
|
'dijit/_WidgetBase',
|
'dijit/_TemplatedMixin',
|
'dojo/Evented',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/_base/array',
|
'dojo/on',
|
'dojo/query',
|
'dijit/registry',
|
'jimu/utils',
|
'jimu/dijit/CheckBox',
|
'dijit/form/Select'
|
],
|
function(declare, _WidgetBase, _TemplatedMixin, Evented, lang, html, array, on, query, registry,
|
jimuUtils, CheckBox, Select) {
|
|
return declare([_WidgetBase, _TemplatedMixin, Evented], {
|
baseClass: 'jimu-simple-table',
|
declaredClass: 'jimu.dijit.SimpleTable',
|
templateString: '<div>' +
|
'<div class="head-section" data-dojo-attach-point="headDiv">' +
|
'<div class="table-div" data-dojo-attach-point="headTableDiv">' +
|
'<table class="table" cellspacing="0"' +
|
' data-dojo-attach-point="tableInHeadSection">' +
|
'<colgroup data-dojo-attach-point="headColgroup"></colgroup>' +
|
'<thead class="simple-table-thead simple-table-title" ' +
|
' data-dojo-attach-point="thead"></thead>' +
|
'</table>' +
|
'</div>' +
|
'</div>' +
|
'<div class="body-section" data-dojo-attach-point="bodyDiv">' +
|
'<div class="table-div" data-dojo-attach-point="bodyTableDiv">' +
|
'<table class="table" cellspacing="0"' +
|
'data-dojo-attach-point="tableInBodySection">' +
|
'<colgroup data-dojo-attach-point="bodyColgroup"></colgroup>' +
|
'<tbody class="simple-table-tbody" data-dojo-attach-point="tbody"></tbody>' +
|
'</table>' +
|
'</div>' +
|
'</div>' +
|
'</div>',
|
_name: null,
|
_rowIndex: 0,
|
_rowHeight: 30,
|
_headHeight: 36,
|
REPEATING_ERROR: "REPEATING_ERROR",
|
_classSimpleTableRow: 'simple-table-row',
|
_classFirstSimpleTableRow: 'first-simple-table-row',
|
_classLastSimpleTableRow: 'last-simple-table-row',
|
_classJimuStateDisabled: 'jimu-state-disabled',
|
_classRowUpDiv: 'row-up-div',
|
_classRowDownDiv: 'row-down-div',
|
_classVerticalScroll: 'vertical-scroll',
|
|
//options:
|
autoHeight: true, //if true, automatically calculate the height
|
selectable: false,
|
fields: null,
|
singleClickEdit: false,
|
/*
|
//fieldInfo's attributes:
|
//name:field name
|
//title:field title
|
//type:text radio checkbox actions empty extension
|
//class:class name of th and td
|
//width:width of the field column, auto is default.
|
//hidden:default false.If true,the field column will be hidden.
|
|
//if text
|
//editable:the text can be edited if true, default is false
|
//unique:field value is unique in the column.
|
//if checkbox
|
//available values: true, false, null (null means the CheckBox is disabled)
|
//onChange: the callback function for checkbox value change event, you can get tr and
|
//CheckBox from this function
|
//if actions
|
//actions:['up','down','edit','delete']
|
//if extension
|
//create //function
|
//setValue //function
|
//getValue //function
|
//if dropdown
|
//options: an array of objects in the format of: {label: value, name: value}
|
*/
|
|
//public methods:
|
//clear
|
//updateUI
|
//clearEmptyRows
|
//addEmptyRow
|
//addRows
|
//addRow
|
//deleteRow
|
//editRow
|
//selectRow
|
//getRows
|
//getSelectedRow
|
//getSelectedRowData
|
//getData
|
//getRowData
|
//getRowDataArrayByFieldValue
|
|
//events:
|
//row-click
|
//row-dblclick
|
//row-select
|
//rows-clear
|
//row-add
|
//row-edit
|
//row-delete
|
//row-up
|
//row-down
|
//actions-edit
|
|
//css classes:
|
//simple-table-title
|
//simple-table-row
|
//simple-table-field
|
//simple-table-cell
|
|
postMixInProperties: function(){
|
this.nls = window.jimuNls.simpleTable;
|
},
|
|
postCreate: function() {
|
this.inherited(arguments);
|
this._initSelf();
|
},
|
|
startup: function() {
|
this.inherited(arguments);
|
this.updateUI();
|
},
|
|
_initSelf: function() {
|
this.own(
|
jimuUtils.bindClickAndDblclickEvents(this.tableInBodySection,
|
lang.hitch(this, function(evt) {
|
var target = evt.target || evt.srcElement;
|
var tr = jimuUtils.getAncestorDom(target, function(dom) {
|
return html.hasClass(dom, 'simple-table-row') && html.hasClass(dom, 'not-empty');
|
}, this.tbody);
|
if(tr){
|
this.selectRow(tr);
|
this._onClickRow(tr);
|
}
|
}), lang.hitch(this, function(evt) {
|
var target = evt.target || evt.srcElement;
|
var tr = jimuUtils.getAncestorDom(target, function(dom) {
|
return html.hasClass(dom, 'simple-table-row') && html.hasClass(dom, 'not-empty');
|
}, this.tbody);
|
if(tr){
|
this.selectRow(tr);
|
this._onDblClickRow(tr);
|
}
|
}))
|
);
|
|
var num = Math.random().toString();
|
this._name = 'jimu_table_' + num.slice(2, num.length);
|
|
if (this.fields && this.fields.length > 0) {
|
var tr = html.create('tr', {}, this.thead);
|
array.forEach(this.fields, lang.hitch(this, function(item){
|
var width = 'auto';
|
if(item.type === 'actions'){
|
item.name = 'actions';
|
}
|
|
if(item.hidden){
|
width = 1;
|
}
|
else if(item.width !== undefined && item.width !== null){
|
width = item.width;
|
}
|
else if(item.type === 'actions'){
|
if(!item.name){
|
item.width = this._calculateActionsWidth(item) + 20;
|
width = item.width;
|
}
|
}
|
|
html.create('col', {width:width}, this.headColgroup);
|
html.create('col', {width:width}, this.bodyColgroup);
|
|
var th = html.create('th', {
|
innerHTML: item.title,
|
title: item.title
|
}, tr);
|
|
if(item.type === 'checkbox'){
|
th.innerHTML = "";
|
//we should not bind its onChange event, because it maybe result in unexpected result
|
var cbx = new CheckBox({
|
label: item.title
|
});
|
var iconNode = query('.checkbox', cbx.domNode)[0];
|
if(iconNode){
|
iconNode.style.marginTop = "10px";
|
}
|
this.own(on(cbx.domNode, 'click', lang.hitch(this, function() {
|
if (cbx.getValue()) {
|
this._checkAllTdCheckBoxes(item.name);
|
} else {
|
this._uncheckAllTdCheckBoxes(item.name);
|
}
|
})));
|
cbx.placeAt(th);
|
}
|
|
html.addClass(th, 'simple-table-field');
|
|
if(item.hidden){
|
html.addClass(th, 'hidden-column');
|
}
|
|
if (item['class']) {
|
html.addClass(th, item['class']);
|
}
|
html.addClass(th, item.name);
|
}));
|
|
//this.addEmptyRow();
|
} else {
|
this.fields = null;
|
}
|
},
|
|
_getThCheckBox: function(fieldName){
|
var cbx = null;
|
var selector = ".simple-table-field." + fieldName + " .jimu-checkbox";
|
var dom = query(selector, this.thead)[0];
|
cbx = registry.byNode(dom);
|
return cbx;
|
},
|
|
_getAllEnabledTdCheckBoxes: function(fieldName){
|
var selector = ".simple-table-cell." + fieldName + " .jimu-checkbox";
|
var doms = query(selector, this.tbody);
|
var cbxes = array.map(doms, function(dom){
|
return registry.byNode(dom);
|
});
|
//just return enabled checkbox
|
cbxes = array.filter(cbxes, function(cbx){
|
return cbx.getStatus();
|
});
|
return cbxes;
|
},
|
|
_checkAllTdCheckBoxes: function(fieldName){
|
var cbxes = this._getAllEnabledTdCheckBoxes(fieldName);
|
array.forEach(cbxes, function(cbx){
|
if(!cbx.getValue()){
|
cbx.setValue(true);
|
}
|
});
|
},
|
|
_uncheckAllTdCheckBoxes: function(fieldName){
|
var cbxes = this._getAllEnabledTdCheckBoxes(fieldName);
|
array.forEach(cbxes, function(cbx){
|
if(cbx.getValue()){
|
cbx.setValue(false);
|
}
|
});
|
},
|
|
_delaySyncThCheckBoxStatusWithAllTdCheckBoxes: function(fieldName){
|
setTimeout(lang.hitch(this, function(){
|
this._syncThCheckBoxStatusWithAllTdCheckBoxes(fieldName);
|
}), 100);
|
},
|
|
_syncThCheckBoxStatusWithAllTdCheckBoxes: function(fieldName){
|
var cbxes = this._getAllEnabledTdCheckBoxes(fieldName);
|
//find enabled cbxes
|
cbxes = array.filter(cbxes, lang.hitch(this, function(cbx){
|
return cbx.getStatus();
|
}));
|
if(cbxes.length === 0){
|
return;
|
}
|
var thCbx = this._getThCheckBox(fieldName);
|
var isAllChecked = array.every(cbxes, function(cbx){
|
return cbx.getValue();
|
});
|
if(isAllChecked){
|
if(!thCbx.getValue()){
|
thCbx.setValue(true);
|
}
|
}else{
|
if(thCbx.getValue()){
|
thCbx.setValue(false);
|
}
|
}
|
},
|
|
clear: function() {
|
var trs = this._getNotEmptyRows();
|
var data = array.map(trs, lang.hitch(this, function(tr){
|
return this.getRowData(tr);
|
}));
|
html.empty(this.tbody);
|
array.forEach(trs, lang.hitch(this, function(tr, index) {
|
var rowData = data[index];
|
this._onDeleteRow(tr, rowData);
|
}));
|
//this.addEmptyRow();
|
this.updateUI();
|
this._rowIndex = 0;
|
this._onClearRows(trs);
|
},
|
|
addRows: function(rowsData) {
|
var results = [];
|
if (this.fields && rowsData && rowsData.length > 0) {
|
array.forEach(rowsData, lang.hitch(this, function(item) {
|
results.push(this.addRow(item, -1, true));
|
}));
|
}
|
this.updateUI();
|
return results;
|
},
|
|
//example:{name1:value1,name2:value2...}
|
addRow: function(rowData, /* optional */ index, /* optional */ dontUpdateUI) {
|
this._rowIndex++;
|
var result = {
|
success: false,
|
tr: null,
|
errorCode: null,
|
errorMessage: null,
|
repeatFields: null
|
};
|
if (!this.fields || (typeof rowData !== 'object')) {
|
return result;
|
}
|
|
var uniqueFieldMetas = array.filter(this.fields, lang.hitch(this, function(item) {
|
return item.type === 'text' && item.unique === true;
|
}));
|
|
var repeatFieldMetas = array.filter(uniqueFieldMetas, lang.hitch(this, function(item) {
|
var sameValueRows = this.getRowDataArrayByFieldValue(item.name, rowData[item.name]);
|
return sameValueRows.length > 0;
|
}));
|
|
if (repeatFieldMetas.length > 0) {
|
result.errorCode = this.REPEATING_ERROR;
|
result.errorMessage = "repeating data";
|
result.repeatFields = repeatFieldMetas;
|
return result;
|
}
|
|
// this.clearEmptyRows();
|
var tr = html.create("tr", {
|
'class': "simple-table-row not-empty"
|
}, this.tbody);
|
var rowId = 'row' + this._rowIndex;
|
html.setAttr(tr, 'rowId', rowId);
|
|
array.forEach(this.fields, lang.hitch(this, function(fieldMeta) {
|
var fieldData = rowData[fieldMeta.name];
|
var type = fieldMeta.type;
|
var td = null;
|
if (type === 'actions') {
|
td = this._createActionsTd(tr, fieldMeta);
|
} else {
|
if (type === "text") {
|
td = this._createTextTd(tr, fieldMeta, fieldData);
|
} else if (type === "radio") {
|
td = this._createRadioTd(tr, fieldMeta, fieldData);
|
} else if (type === 'checkbox') {
|
td = this._createCheckboxTd(tr, fieldMeta, fieldData);
|
} else if (type === "empty") {
|
td = this._createEmptyTd(tr, fieldMeta);
|
} else if(type === "extension") {
|
td = this._createExtensionTd(tr, fieldMeta, fieldData);
|
} else if(type === "dropdown") {
|
td = this._createDropdownTd(tr, fieldMeta, fieldData);
|
}
|
if(fieldMeta.hidden){
|
html.addClass(td, 'hidden-column');
|
}
|
}
|
}));
|
if(!dontUpdateUI){
|
this.updateUI();
|
var trs = this.getRows();
|
if (typeof index === 'number' && index >= 0 && index < trs.length) {
|
html.place(tr, trs[index], 'before');
|
}
|
}
|
result.success = true;
|
result.tr = tr;
|
result.errorMessage = null;
|
this._onAddRow(tr);
|
return result;
|
},
|
|
deleteRow:function(tr){
|
if(tr){
|
var rowData = this.getRowData(tr);
|
html.destroy(tr);
|
this.updateUI();
|
this._onDeleteRow(tr, rowData);
|
}
|
},
|
|
selectRow:function(tr){
|
if(this.selectable){
|
var trs = query('.simple-table-row', this.tbody);
|
trs.removeClass('jimu-state-active');
|
html.addClass(tr, 'jimu-state-active');
|
this._onSelectRow(tr);
|
}
|
},
|
|
updateUI: function(){
|
this._updateRowClassName();
|
this._updateHeight();
|
|
html.removeClass(this.domNode, this._classVerticalScroll);
|
|
if(this.bodyDiv.clientHeight > 0){
|
if(this.bodyDiv.clientHeight < this.bodyDiv.scrollHeight){
|
html.addClass(this.domNode, this._classVerticalScroll);
|
}
|
}
|
|
array.forEach(this.fields, lang.hitch(this, function(fieldMeta) {
|
if (fieldMeta.type === 'checkbox') {
|
this._delaySyncThCheckBoxStatusWithAllTdCheckBoxes(fieldMeta.name);
|
}
|
}));
|
},
|
|
_updateHeadTableWidth: function(){
|
if(!this.domNode){
|
return;
|
}
|
var bodyTableBox = html.getContentBox(this.tableInBodySection);
|
var w = bodyTableBox.w;
|
var headTableWidth = "100%";
|
if(typeof w === 'number' && w > 0){
|
headTableWidth = w + 'px';
|
}
|
html.setStyle(this.tableInHeadSection, 'width', headTableWidth);
|
},
|
|
_updateHeight: function(){
|
var rows = this.getRows();
|
//main height
|
if (this.autoHeight) {
|
var trCount = rows.length > 0 ? rows.length : 1;
|
// var count = trCount + 1;
|
var height = this._headHeight + (this._rowHeight ) * trCount + 1;
|
html.setStyle(this.domNode, 'height', height + 'px');
|
// this.bodyDiv.style.overflowY = 'hidden';
|
}
|
//background row-ines height for issue #10727
|
if (rows && rows.length > 0 && this.bodyTableDiv) {
|
var size = html.getMarginSize(rows[0]);
|
if (size && size.h) {
|
html.setStyle(this.bodyTableDiv, "backgroundSize", "1px " + size.h + "px");
|
}
|
}
|
},
|
|
_updateRowClassName: function() {
|
var originalFirtTr = query('.' + this._classFirstSimpleTableRow, this.tbody)[0];
|
if(originalFirtTr){
|
var originalFirstUpDiv = query('.' + this._classRowUpDiv, originalFirtTr)[0];
|
if(originalFirstUpDiv){
|
html.removeClass(originalFirstUpDiv, this._classJimuStateDisabled);
|
}
|
}
|
|
var originalLastTr = query('.' + this._classLastSimpleTableRow, this.tbody)[0];
|
if(originalLastTr){
|
var originalLastDownDiv = query('.' + this._classRowDownDiv, originalLastTr)[0];
|
if(originalLastDownDiv){
|
html.removeClass(originalLastDownDiv, this._classJimuStateDisabled);
|
}
|
}
|
|
var trs = query('.' + this._classSimpleTableRow, this.tbody);
|
trs.removeClass('odd');
|
trs.removeClass('even');
|
trs.removeClass(this._classFirstSimpleTableRow);
|
trs.removeClass(this._classLastSimpleTableRow);
|
|
array.forEach(trs, lang.hitch(this, function(tr, index) {
|
if (index % 2 === 0) {
|
html.addClass(tr, 'odd');
|
} else {
|
html.addClass(tr, 'even');
|
}
|
}));
|
|
if(trs.length > 0){
|
var firstTr = trs[0];
|
html.addClass(firstTr, this._classFirstSimpleTableRow);
|
var firstUpDiv = query('.' + this._classRowUpDiv, firstTr)[0];
|
if(firstUpDiv){
|
html.addClass(firstUpDiv, this._classJimuStateDisabled);
|
}
|
|
var lastTr = trs[trs.length - 1];
|
html.addClass(lastTr, this._classLastSimpleTableRow);
|
var lastDownDiv = query('.' + this._classRowDownDiv, lastTr)[0];
|
if(lastDownDiv){
|
html.addClass(lastDownDiv, this._classJimuStateDisabled);
|
}
|
}
|
},
|
|
_createTextTd: function(tr, fieldMeta, fieldData) {
|
var td = null;
|
if (fieldMeta.editable) {
|
td = this._createEditableTextTd(tr, fieldMeta, fieldData);
|
} else {
|
td = this._createNormalTextTd(tr, fieldMeta, fieldData);
|
}
|
return td;
|
},
|
|
_createNormalTextTd: function(tr, fieldMeta, fieldData) {
|
var strTd = '<td class="simple-table-cell normal-text-td">' +
|
'<div class="normal-text-div"></div></td>';
|
var td = html.toDom(strTd);
|
html.addClass(td, fieldMeta.name);
|
var textDiv = query('div', td)[0];
|
textDiv.innerHTML = fieldData || "";
|
textDiv.title = fieldData || "";
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
html.place(td, tr);
|
return td;
|
},
|
|
_createEditableTextTd: function(tr, fieldMeta, fieldData) {
|
var tdStr = '<td class="editable-text-td ' + fieldMeta.name + '">' +
|
'<div class="editable-div">' +
|
'</div><input class="editable-input" type="text" style="display:none;" /></td>';
|
var td = html.toDom(tdStr);
|
html.addClass(td, 'simple-table-cell');
|
html.place(td, tr);
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
var editableDiv = query('div', td)[0];
|
var editableInput = query('input', td)[0];
|
editableDiv.innerHTML = fieldData || "";
|
if (editableDiv.innerHTML !== "") {
|
editableDiv.title = editableDiv.innerText || editableDiv.innerHTML;
|
}
|
editableInput.value = editableDiv.innerHTML;
|
var editEvent = this.singleClickEdit ? 'click' : 'dblclick'; //default event is dbl-click
|
this.own(on(editableDiv, editEvent, lang.hitch(this, function (event) {
|
if (!this.singleClickEdit) {
|
event.stopPropagation();//for row-select evevt, after click
|
}
|
editableInput.value = editableDiv.innerText || editableDiv.innerHTML;
|
html.setStyle(editableDiv, 'display', 'none');
|
html.setStyle(editableInput, 'display', 'inline');
|
editableInput.focus();
|
if (editableInput.select) {
|
editableInput.select();
|
}
|
})));
|
this.own(on(editableInput, 'blur', lang.hitch(this, function() {
|
editableInput.value = lang.trim(editableInput.value);
|
var oldValue = editableDiv.innerText || editableDiv.innerHTML;
|
var newValue = editableInput.value;
|
if (newValue !== '') {
|
if (fieldMeta.unique) {
|
var sameValueRows = this.getRowDataArrayByFieldValue(fieldMeta.name, newValue, tr);
|
if (sameValueRows.length > 0) {
|
editableInput.value = oldValue;
|
} else {
|
editableDiv.innerHTML = newValue;
|
}
|
} else {
|
editableDiv.innerHTML = newValue;
|
}
|
} else {
|
editableInput.value = oldValue;
|
}
|
|
html.setStyle(editableInput, 'display', 'none');
|
html.setStyle(editableDiv, 'display', 'block');
|
})));
|
return td;
|
},
|
|
_createRadioTd: function(tr, fieldMeta, fieldData) {
|
var tdStr = '<td class="radio-td ' + fieldMeta.name + '"><input class="jimu-radio-btn" type="radio" /></td>';
|
var td = html.toDom(tdStr);
|
html.addClass(td, 'simple-table-cell');
|
html.place(td, tr);
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
var radio = query('input', td)[0];
|
if (fieldMeta.radio && fieldMeta.radio === "row") {
|
radio.name = this._name + this._rowIndex;
|
} else {
|
radio.name = this._name + fieldMeta.name;
|
}
|
|
radio.checked = fieldData === true;
|
return td;
|
},
|
|
_createCheckboxTd: function(tr, fieldMeta, fieldData) {
|
var tdStr = '<td class="checkbox-td ' + fieldMeta.name + '"></td>';
|
var td = html.toDom(tdStr);
|
html.addClass(td, 'simple-table-cell');
|
html.place(td, tr);
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
var cbx = new CheckBox({
|
onChange: lang.hitch(this, function(){
|
this._delaySyncThCheckBoxStatusWithAllTdCheckBoxes(fieldMeta.name);
|
if(typeof fieldMeta.onChange === 'function'){
|
setTimeout(lang.hitch(this, function(){
|
fieldMeta.onChange(tr, cbx);
|
}), 200);
|
}
|
})
|
});
|
this.own(on(cbx, 'status-change', lang.hitch(this, function(){
|
this._delaySyncThCheckBoxStatusWithAllTdCheckBoxes(fieldMeta.name);
|
})));
|
// var value = fieldData === true;
|
// cbx.setValue(value);
|
this._setValueForCheckBox(cbx, fieldData);
|
cbx.placeAt(td);
|
return td;
|
},
|
|
_createActionsTd: function(tr, fieldMeta) {
|
var tdStr = '<td class="actions-td">' +
|
'<div class="action-item-parent jimu-float-leading"></div></td>';
|
var td = html.toDom(tdStr);
|
html.addClass(td, 'simple-table-cell');
|
var actionItemParent = query(".action-item-parent", td)[0];
|
html.place(td, tr);
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
|
array.forEach(fieldMeta.actions, lang.hitch(this, function(item) {
|
if (item === 'up') {
|
var moveupDiv = html.create('div', {
|
'class': 'action-item jimu-float-leading row-up-div jimu-icon jimu-icon-up'
|
}, actionItemParent);
|
moveupDiv.title = this.nls.moveUp;
|
this.own(on(moveupDiv, 'click', lang.hitch(this, function(event) {
|
event.stopPropagation();
|
|
if (!this.onBeforeRowUp(tr)){
|
return;
|
}
|
var trs = query('.simple-table-row', this.tbody);
|
var index = array.indexOf(trs, tr);
|
if (index > 0) {
|
var newIndex = index - 1;
|
var trRef = trs[newIndex];
|
if (trRef) {
|
html.place(tr, trRef, 'before');
|
this.updateUI();
|
this.emit('row-up', tr);
|
}
|
}
|
})));
|
} else if (item === 'down') {
|
var movedownDiv = html.create('div', {
|
'class': 'action-item jimu-float-leading row-down-div jimu-icon jimu-icon-down'
|
}, actionItemParent);
|
movedownDiv.title = this.nls.moveDown;
|
this.own(on(movedownDiv, 'click', lang.hitch(this, function(event) {
|
event.stopPropagation();
|
|
if (!this.onBeforeRowDown(tr)){
|
return;
|
}
|
var trs = query('.simple-table-row', this.tbody);
|
var index = array.indexOf(trs, tr);
|
if (index < trs.length - 1) {
|
var newIndex = index + 1;
|
var trRef = trs[newIndex];
|
if (trRef) {
|
html.place(tr, trRef, 'after');
|
this.updateUI();
|
this.emit('row-down', tr);
|
}
|
}
|
})));
|
} else if (item === 'edit') {
|
var editDiv = html.create('div', {
|
'class': 'action-item jimu-float-leading row-edit-div jimu-icon jimu-icon-edit'
|
}, actionItemParent);
|
editDiv.title = this.nls.edit;
|
this.own(on(editDiv, 'click', lang.hitch(this, function(event) {
|
event.stopPropagation();
|
|
if (!this.onBeforeRowEdit(tr)){
|
return;
|
}
|
this._onActionsEdit(tr);
|
})));
|
} else if (item === 'delete') {
|
var deleteDiv = html.create('div', {
|
'class': 'action-item jimu-float-leading row-delete-div jimu-icon jimu-icon-delete'
|
}, actionItemParent);
|
deleteDiv.title = this.nls.deleteRow;
|
this.own(on(deleteDiv, 'click', lang.hitch(this, function(event) {
|
event.stopPropagation();
|
|
if (!this.onBeforeRowDelete(tr)){
|
return;
|
}
|
this.deleteRow(tr);
|
})));
|
}
|
}));
|
var width = this._calculateActionsWidth(fieldMeta) + 'px';
|
html.setStyle(actionItemParent, 'width', width);
|
return td;
|
},
|
|
_calculateActionsWidth:function(fieldMeta){
|
var items = array.map(fieldMeta.actions, function(item){
|
return item === 'up' || item === 'down' || item === 'edit' || item === 'delete';
|
});
|
return items.length * 20;
|
},
|
|
_createEmptyTd: function(tr, fieldMeta) {
|
var td = html.create('td', {
|
'class': fieldMeta.name
|
}, tr);
|
html.addClass(td, 'simple-table-cell');
|
html.addClass(td, 'empty-text-td');
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
return td;
|
},
|
|
_createExtensionTd: function(tr, fieldMeta, fieldData){
|
var td = html.create('td', {
|
'class': fieldMeta.name
|
}, tr);
|
html.addClass(td, 'simple-table-cell');
|
html.addClass(td, 'extension-td');
|
if (fieldMeta['class']){
|
html.addClass(td, fieldMeta['class']);
|
}
|
if(fieldMeta.create && typeof fieldMeta.create === 'function'){
|
fieldMeta.create(td);
|
}
|
if(fieldMeta.setValue && typeof fieldMeta.setValue === 'function'){
|
fieldMeta.setValue(td, fieldData);
|
}
|
return td;
|
},
|
|
_createDropdownTd: function(tr, fieldMeta, fieldData){
|
var td = html.create('td', {
|
'class': fieldMeta.name
|
}, tr);
|
html.addClass(td, 'simple-table-cell');
|
html.addClass(td, 'dropdown-td');
|
if (fieldMeta['class']) {
|
html.addClass(td, fieldMeta['class']);
|
}
|
var dropdown = new Select({
|
options: fieldData
|
});
|
dropdown.placeAt(td);
|
|
return td;
|
},
|
|
//tr is row you want to edit
|
//rowData is like {name1:value1, name2: value2...}
|
editRow: function(tr, rowData) {
|
var result = {
|
success: false,
|
tr: null,
|
errorCode: null,
|
errorMessage: null,
|
repeatFields: null
|
};
|
if (!this.fields || (typeof rowData !== 'object')) {
|
return result;
|
}
|
if (!html.isDescendant(tr, this.tbody)) {
|
return result;
|
}
|
var allFieldMetas = lang.mixin([], this.fields);
|
var uniqueFieldMetas = array.filter(allFieldMetas, lang.hitch(this, function(item) {
|
return item.type === 'text' && item.unique === true;
|
}));
|
|
var repeatFieldMetas = array.filter(uniqueFieldMetas, lang.hitch(this, function(item) {
|
var sameValueRows = this.getRowDataArrayByFieldValue(item.name, rowData[item.name], tr);
|
return sameValueRows.length > 0;
|
}));
|
|
if (repeatFieldMetas.length > 0) {
|
result.errorCode = this.REPEATING_ERROR;
|
result.errorMessage = "repeating data";
|
result.repeatFields = repeatFieldMetas;
|
return result;
|
}
|
var tds = query('.simple-table-cell', tr);
|
array.forEach(this.fields, lang.hitch(this, function(fieldMeta, idx) {
|
if (!rowData.hasOwnProperty(fieldMeta.name)) {
|
return;
|
}
|
var td = tds[idx];
|
var fieldData = rowData[fieldMeta.name];
|
var type = fieldMeta.type;
|
if (type === 'text') {
|
if (fieldMeta.editable) {
|
this._editEditableText(td, fieldMeta, fieldData);
|
} else {
|
this._editNormalText(td, fieldMeta, fieldData);
|
}
|
} else if (type === 'radio') {
|
this._editRadio(td, fieldMeta, fieldData);
|
} else if (type === 'checkbox') {
|
this._editCheckbox(td, fieldMeta, fieldData);
|
} else if (type === 'extension') {
|
this._editExtension(td, fieldMeta, fieldData);
|
} else if (type === 'dropdown') {
|
this._editDropdown(td, fieldMeta, fieldData);
|
}
|
}));
|
result.success = true;
|
result.tr = tr;
|
result.errorMessage = null;
|
this._onEditRow(tr);
|
return result;
|
},
|
|
_editNormalText: function(td, fieldMeta, fieldData) {
|
/*jshint unused: false*/
|
var normalTextDiv = query('div', td)[0];
|
normalTextDiv.innerHTML = fieldData || "";
|
normalTextDiv.title = normalTextDiv.innerHTML;
|
},
|
|
_editEditableText: function(td, fieldMeta, fieldData) {
|
/*jshint unused: false*/
|
var editableDiv = query('div', td)[0];
|
editableDiv.innerHTML = fieldData || "";
|
var editableInput = query('input', td)[0];
|
editableInput.value = editableDiv.innerHTML;
|
},
|
|
_editRadio: function(td, fieldMeta, fieldData) {
|
/*jshint unused: false*/
|
var radio = query('input', td)[0];
|
radio.checked = fieldData === true;
|
},
|
|
_editCheckbox: function(td, fieldMeta, fieldData) {
|
/*jshint unused: false*/
|
var dom = query('.jimu-checkbox', td)[0];
|
var cbx = registry.byNode(dom);
|
// var newValue = fieldData === true;
|
// cbx.setValue(newValue);
|
this._setValueForCheckBox(cbx, fieldData);
|
},
|
|
_setValueForCheckBox: function(cbx, value){
|
if(value === null){
|
cbx.setStatus(false);
|
}else{
|
cbx.setStatus(true);
|
if(value !== cbx.getValue()){
|
cbx.setValue(value);
|
}
|
}
|
},
|
|
_editExtension: function(td, fieldMeta, fieldData){
|
if(fieldMeta.setValue && typeof fieldMeta.setValue === 'function'){
|
fieldMeta.setValue(td, fieldData);
|
}
|
},
|
|
_editDropdown: function(td, fieldMeta, fieldData) {
|
/*jshint unused: false*/
|
var dom = query('.dijitSelect', td)[0];
|
var dropdown = registry.byNode(dom);
|
dropdown.set('value', fieldData);
|
},
|
|
_getAllRows: function(){
|
return query('.simple-table-row', this.tbody);
|
},
|
|
_getNotEmptyRows: function() {
|
var trs = this._getAllRows();
|
return array.filter(trs, lang.hitch(this, function(tr) {
|
return !html.hasClass(tr, 'empty');
|
}));
|
},
|
|
_getEmptyRows: function() {
|
var trs = this._getAllRows();
|
return array.filter(trs, lang.hitch(this, function(tr) {
|
return html.hasClass(tr, 'empty');
|
}));
|
},
|
|
getRows: function() {
|
return this._getNotEmptyRows();
|
},
|
|
getSelectedRow: function() {
|
var result = null;
|
var trs = query('.simple-table-row', this.tbody);
|
var filterTrs = array.filter(trs, lang.hitch(this, function(tr) {
|
return !html.hasClass(tr, 'empty') && html.hasClass(tr, 'jimu-state-active');
|
}));
|
if (filterTrs.length > 0) {
|
result = filterTrs[0];
|
}
|
return result;
|
},
|
|
getSelectedRowData: function() {
|
var result = null;
|
var tr = this.getSelectedRow();
|
if (tr) {
|
result = this._getRowDataByTr(tr);
|
}
|
return result;
|
},
|
|
getData: function(/*optional*/ ignoredTr) {
|
var trs = this._getNotEmptyRows();
|
if(ignoredTr){
|
trs = array.filter(trs, lang.hitch(this, function(tr){
|
return tr !== ignoredTr;
|
}));
|
}
|
var result = array.map(trs, lang.hitch(this, function(tr) {
|
return this._getRowDataByTr(tr);
|
}));
|
return result;
|
},
|
|
getRowData: function(tr) {
|
return this._getRowDataByTr(tr);
|
},
|
|
_getRowDataByTr: function(tr) {
|
var rowData = null;
|
if (tr) {
|
rowData = {};
|
} else {
|
return null;
|
}
|
array.forEach(this.fields, lang.hitch(this, function(fieldMeta) {
|
var type = fieldMeta.type;
|
if (type === 'actions') {
|
return;
|
}
|
var name = fieldMeta.name;
|
rowData[name] = null;
|
var td = query('.simple-table-cell.' + name, tr)[0];
|
if (td) {
|
if (type === 'text') {
|
if (fieldMeta.editable) {
|
var editableDiv = query('div', td)[0];
|
rowData[name] = editableDiv.innerText || editableDiv.innerHTML;
|
} else {
|
var normalTextDiv = query('div', td)[0];
|
rowData[name] = normalTextDiv.innerText || normalTextDiv.innerHTML;
|
}
|
} else if (type === 'radio') {
|
var radio = query('input', td)[0];
|
rowData[name] = radio.checked;
|
} else if (type === 'checkbox') {
|
var dom = query('.jimu-checkbox', td)[0];
|
var cbx = registry.byNode(dom);
|
if(cbx.getStatus()){
|
rowData[name] = cbx.getValue();
|
}else{
|
rowData[name] = null;
|
}
|
} else if (type === 'extension') {
|
if(fieldMeta.getValue && typeof fieldMeta.getValue === 'function'){
|
rowData[name] = fieldMeta.getValue(td, fieldMeta);
|
}
|
} else if(type === 'dropdown') {
|
var dijitDom = query('.dijitSelect', td)[0];
|
var dropdown = registry.byNode(dijitDom);
|
rowData[name] = dropdown.get('value');
|
}
|
}
|
}));
|
return rowData;
|
},
|
|
getRowDataArrayByFieldValue: function(fieldName, fieldValue, /*optional*/ ignoredTr) {
|
var result = [];
|
if (!this.fields) {
|
return [];
|
}
|
var validField = array.some(this.fields, lang.hitch(this, function(item) {
|
return item.name === fieldName;
|
}));
|
if (!validField) {
|
return [];
|
}
|
var rows = this.getData(ignoredTr);
|
result = array.filter(rows, lang.hitch(this, function(row) {
|
/* jshint eqeqeq: false*/
|
return row[fieldName] == fieldValue;
|
}));
|
return result;
|
},
|
|
moveToTop: function(tr){
|
if(tr && tr.parentNode === this.tbody){
|
html.place(tr, this.tbody, 'first');
|
}
|
},
|
|
_onClickRow: function(tr){
|
this.emit('row-click', tr);
|
},
|
|
_onDblClickRow: function(tr){
|
this.emit('row-dblclick', tr);
|
},
|
|
_onSelectRow: function(tr){
|
this.emit('row-select', tr);
|
},
|
|
_onAddRow: function(tr){
|
this.emit('row-add', tr);
|
},
|
|
_onEditRow: function(tr){
|
this.emit('row-edit', tr);
|
},
|
|
_onDeleteRow: function(tr, rowData){
|
this.emit('row-delete', tr, rowData);
|
},
|
|
_onEnterRow: function(tr){
|
this.emit('row-enter', tr);
|
},
|
|
_onClearRows: function(trs){
|
this.emit('rows-clear', trs);
|
},
|
|
_onActionsEdit: function(tr){
|
this.emit('actions-edit', tr);
|
},
|
|
onBeforeRowUp: function(tr){
|
/*jshint unused : false*/
|
return true;
|
},
|
|
onBeforeRowDown: function(tr){
|
/*jshint unused : false*/
|
return true;
|
},
|
|
onBeforeRowEdit: function(tr){
|
/*jshint unused : false*/
|
return true;
|
},
|
|
onBeforeRowDelete: function(tr){
|
/*jshint unused : false*/
|
return true;
|
}
|
});
|
});
|
