p85126437
/
datagear
forked from p81075629/datagear
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

完善表格编辑功能：编辑面板和内部输入框适应大小、适应位置，添加面板关闭图标

This commit is contained in:
datagear 2018-12-15 14:32:03 +08:00
parent d851477683
commit 3a6ad72ce0
5 changed files with 93 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
datagear-web/src/main/webapp/WEB-INF/jsp/data/include/data_page_obj_edit_grid_html.jsp
View File

@ -25,7 +25,9 @@ request.setAttribute("editGridFormPageId", editGridFormPageId_html);
%>
<div id="<%=editGridFormPageId_html%>" class="page-edit-grid-form">
<div class="form-panel ui-widget ui-widget-content ui-corner-all ui-widget-shadow" tabindex="1">
<div class="form-panel-title ui-corner-all ui-widget-header"></div>
<div class="form-panel-title ui-corner-all ui-widget-header">
<span class="close-icon ui-icon ui-icon-close"></span>
</div>
<form id="<%=editGridFormPageId_html%>-form" method="POST" action="#">
</form>
</div>

74
datagear-web/src/main/webapp/WEB-INF/jsp/data/include/data_page_obj_edit_grid_js.jsp
View File

@ -145,11 +145,12 @@ WebUtils.setPageId(request, gridPageId);
};
//打开编辑面板
po.openEditCellPanel = function(table, indexes)
po.openEditCellPanel = function(dataTable, indexes)
{
var settings = table.settings();
var $table = $(dataTable.table().node());
var settings = dataTable.settings();
var $cellNodes = $(table.cells(indexes).nodes());
var $cellNodes = $(dataTable.cells(indexes).nodes());
var $editFormCell = $($cellNodes[0]);
var propertyIndexes = $.getDataTablesColumnPropertyIndexes(settings, indexes);
@ -157,6 +158,7 @@ WebUtils.setPageId(request, gridPageId);
$editFormCell.addClass("cell-edit-form");
var $formPage = po.editGridFormPage.element();
var $formPanel = po.editGridFormPage.element(".form-panel");
if(!$formPage.parent().is(po.element(".foot")))
po.editGridFormPage.form().modelform("destroy");
@ -182,24 +184,34 @@ WebUtils.setPageId(request, gridPageId);
{
console.log("save cells");
var table = po.table().DataTable();
po.closeEditCellPanel(table);
var dataTable = po.table().DataTable();
po.closeEditCellPanel(dataTable);
return false;
},
validationRequiredAsAdd: false,
labels : po.editGridFormPage.formLabels
});
//仅选中一个单元格，激活焦点
if(indexes.length == 1)
if(propertyIndexes.length == 1)
{
//仅选中一个属性，激活焦点
$(":input:not([readonly]):visible:eq(0)", form).focus();
$formPanel.css("min-width", $table.width()/3);
}
else
{
$formPanel.css("min-width", $table.width()/2);
}
$formPanel.position({ my : "left top", at : "left bottom", of : $editFormCell, within : $table});
};
//关闭编辑面板
po.closeEditCellPanel = function(table, deselectCellIndexes)
po.closeEditCellPanel = function(dataTable, deselectCellIndexes)
{
if(deselectCellIndexes)
$(table.cells(deselectCellIndexes).nodes()).removeClass("cell-edit-form");
$(dataTable.cells(deselectCellIndexes).nodes()).removeClass("cell-edit-form");
var $formPage = po.editGridFormPage.element();
@ -216,11 +228,11 @@ WebUtils.setPageId(request, gridPageId);
$formPage.appendTo($foot);
}
$(table.table().node()).focus();
$(dataTable.table().node()).focus();
};
//恢复单元格的数据
po.restoreEditCell = function(table, $cells)
po.restoreEditCell = function(dataTable, $cells)
{
};
@ -271,17 +283,17 @@ WebUtils.setPageId(request, gridPageId);
po.element(".button-restore", po.element(".edit-grid")).click(function()
{
var table = po.table().DataTable();
var selectedCells = table.cells(".selected");
var dataTable = po.table().DataTable();
var selectedCells = dataTable.cells(".selected");
po.restoreEditCell(table, selectedCells);
po.restoreEditCell(dataTable, selectedCells);
});
po.element(".button-restore-all", po.element(".edit-grid")).click(function()
{
var table = po.table().DataTable();
var dataTable = po.table().DataTable();
var modifiedCells = table.cells(".modified-cell");
var modifiedCells = dataTable.cells(".modified-cell");
var count = modifiedCells.nodes().length;
if(count > 1)
@ -290,12 +302,12 @@ WebUtils.setPageId(request, gridPageId);
{
"confirm" : function()
{
po.restoreEditCell(table, modifiedCells);
po.restoreEditCell(dataTable, modifiedCells);
}
});
}
else
po.restoreEditCell(table, modifiedCells);
po.restoreEditCell(dataTable, modifiedCells);
});
po.editGridFormPage.element()
@ -315,8 +327,8 @@ WebUtils.setPageId(request, gridPageId);
{
if(event.keyCode == $.ui.keyCode.ESCAPE)
{
var table = po.table().DataTable();
po.closeEditCellPanel(table);
var dataTable = po.table().DataTable();
po.closeEditCellPanel(dataTable);
}
//禁止冒泡，因为这些快捷键在表格上有特殊处理逻辑
@ -328,6 +340,12 @@ WebUtils.setPageId(request, gridPageId);
}
});
po.editGridFormPage.element(".close-icon").click(function()
{
var dataTable = po.table().DataTable();
po.closeEditCellPanel(dataTable);
});
po.table().DataTable()
.on("click", function(event)
{
@ -340,10 +358,10 @@ WebUtils.setPageId(request, gridPageId);
if(target.is("td"))
{
var table = $(this).DataTable();
var dataTable = $(this).DataTable();
table.rows(".selected").deselect();
$.handleCellSelectionForClick(table, event, target);
dataTable.rows(".selected").deselect();
$.handleCellSelectionForClick(dataTable, event, target);
}
}
})
@ -351,23 +369,23 @@ WebUtils.setPageId(request, gridPageId);
{
if(po.isEnableEditGrid)
{
var table = $(this).DataTable();
var dataTable = $(this).DataTable();
if(event.keyCode == $.ui.keyCode.ESCAPE)
{
po.closeEditCellPanel(table);
po.closeEditCellPanel(dataTable);
}
else if(event.keyCode == $.ui.keyCode.ENTER)
{
event.preventDefault();
var selectedIndexes = table.cells(".selected").indexes();
var selectedIndexes = dataTable.cells(".selected").indexes();
if(selectedIndexes)
po.openEditCellPanel(table, selectedIndexes);
po.openEditCellPanel(dataTable, selectedIndexes);
}
else
$.handleCellNavigationForKeydown(table, event);
$.handleCellNavigationForKeydown(dataTable, event);
}
})
.on("select", function(event, dataTable, type, indexes)

16
datagear-web/src/main/webapp/static/script/datagear-modelform.js
View File

@ -386,7 +386,9 @@
var labeldiv=$("<div class='form-item-label' />").appendTo(itemdiv);
var valuediv=$("<div class='form-item-value' />").appendTo(itemdiv);
$("<label />").html($.model.displayName(property)).attr("title", $.model.displayDesc(property)).appendTo(labeldiv);
var displayName = $.model.displayName(property);
var displayDesc = $.model.displayDesc(property);
$("<label />").html(displayName).attr("title", (displayDesc || displayName)).appendTo(labeldiv);
if($.model.hasFeatureNotReadable(property))
{
@ -516,6 +518,8 @@
*/
_renderMultiplePropertyFormElement : function(property, propValue, itemdiv, labeldiv, valuediv, propertyWidget)
{
valuediv.addClass("multiple-value");
var _this = this;
var options = this.options;
var propName = property.name;
@ -547,6 +551,8 @@
*/
_renderSinglePrimitivePropertySelectFormElement : function(property, propValue, itemdiv, labeldiv, valuediv, propertyWidget)
{
valuediv.addClass("select-value");
var options = this.options;
var propName = property.name;
@ -580,6 +586,8 @@
*/
_renderSinglePrimitivePropertyFileFormElement : function(property, propValue, itemdiv, labeldiv, valuediv, propertyWidget)
{
valuediv.addClass("file-value");
var _this = this;
var options = this.options;
var propName = property.name;
@ -770,11 +778,15 @@
if(maxLength && maxLength > options.asTextareaLength)
{
valuediv.addClass("textarea-value");
textinput = $("<textarea class='ui-widget ui-widget-content' />").attr("name", propName)
.text((propValue == undefined || propValue == null) ? "" : propValue);
}
else
{
valuediv.addClass("text-value");
textinput = $("<input type='text' class='ui-widget ui-widget-content' />").attr("name", propName)
.attr("value", ((propValue == undefined || propValue == null) ? "" : propValue));
}
@ -818,6 +830,8 @@
*/
_renderSingleCompositePropertyFormElement : function(property, propValue, itemdiv, labeldiv, valuediv, propertyWidget)
{
valuediv.addClass("single-value");
var _this = this;
var options = this.options;
var model = options.model;

4
datagear-web/src/main/webapp/static/script/datagear-util.js
View File

@ -1158,12 +1158,12 @@
var fileName = data.files[0].name;
var prettySize = $.prettySize(data.files[0].size);
$("<div class='upload-percent' />").text("0%").appendTo($fileUploadInfo);
$("<div class='file-name' />").html((fileName.length > 13 ? fileName.substr(0, 10)+"..." : fileName))
.attr("title", fileName)
.appendTo($fileUploadInfo);
$("<div class='file-size' />").html("("+prettySize+")").appendTo($fileUploadInfo);
$("<div class='upload-percent' />").text("0%").appendTo($fileUploadInfo);
},
/**

36
datagear-web/src/main/webapp/static/theme/common.css
View File

@ -56,6 +56,12 @@ form .form-content .form-item .form-item-value{
-webkit-box-sizing: border-box;
vertical-align: middle;
}
form .form-content .form-item .form-item-value.text-value{}
form .form-content .form-item .form-item-value.textarea-value{}
form .form-content .form-item .form-item-value.select-value{}
form .form-content .form-item .form-item-value.file-value{}
form .form-content .form-item .form-item-value.single-value{}
form .form-content .form-item .form-item-value.multiple-value{}
form .form-content .form-item .form-item-value input[type=text],
form .form-content .form-item .form-item-value input[type=password],
form .form-content .form-item .form-item-value textarea,
@ -78,6 +84,10 @@ form .form-content .form-item .form-item-value .file-info{/*展示上传文件
display: inline-block;
margin-left: 0.5em;
}
form .form-content .form-item .form-item-value .file-info .upload-percent{
display: inline-block;
margin-right: 0.5em;
}
form .form-content .form-item .form-item-value .file-info .file-name{
display: inline-block;
}
@ -85,10 +95,6 @@ form .form-content .form-item .form-item-value .file-info .file-size{
display: inline-block;
margin-left: 0.3em;
}
form .form-content .form-item .form-item-value .file-info .upload-percent{
display: inline-block;
margin-left: 0.5em;
}
form .form-content .form-item .form-item-value .file-info .file-delete{
margin-left: 0.5em;
cursor: pointer;
@ -362,8 +368,6 @@ table.dataTable tr td.cell-edit-form .page-edit-grid-form.focus{
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel{
position: absolute;
left: -0.5em;
top: 0.75em;
display: inline-block;
z-index: 1;
padding: 1px 1px;
@ -372,16 +376,30 @@ table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel .form-pane
height: 10px;
cursor: move;
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel .form-panel-title .close-icon{
float: right;
cursor: pointer;
opacity: 0.5;
filter: Alpha(Opacity=50);
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form{
width: 40em;
padding: 0.41em 0.41em;
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form.hide-form-label{
width: 30em;
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form .form-operation input[type='reset']{
display: none;
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form.hide-form-label .form-content .form-item .form-item-label{
display: none;
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form.hide-form-label .form-content .form-item .form-item-value{
width: 99%;
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form.hide-form-label .form-content .form-item .form-item-value.text-value input[type='text']{
width: 60%;
}
table.dataTable tr td.cell-edit-form .page-edit-grid-form .form-panel form.hide-form-label .form-content .form-item .form-item-value.textarea-value textarea{
width: 70%;
}
table.dataTable tbody tr td.cell-modified{
position: relative;
}