open views tagsview/form
This commit is contained in:
thinkgem
2459
modules/core/src/main/resources/views/tagsview/form/iconselect.html
Normal file
2459
modules/core/src/main/resources/views/tagsview/form/iconselect.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,159 @@
|
||||
<%/* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law. */ %>
|
||||
<% layout('/layouts/default.html', {title: '图标裁剪', bodyClass: 'nobg', libs: ['']}){ %>
|
||||
<link rel="stylesheet" href="${ctxStatic}/cropper/3.1/cropper.css?${_version}">
|
||||
<div class="row cropper-wrapper ${toBoolean(circle!)?'cropper-circle':''}">
|
||||
<div class="col-xs-8">
|
||||
<div class="img-container">
|
||||
<img id="image" src="${isNotBlank(imageSrc!)?imageSrc!:imageDefaultSrc!}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-4 pl0">
|
||||
<div class="clearfix">
|
||||
<div class="img-preview preview-lg"></div>
|
||||
<div class="img-preview preview-md"></div>
|
||||
<div class="img-preview preview-sm"></div>
|
||||
<div class="img-preview preview-xs"></div>
|
||||
</div>
|
||||
<div class="clearfix mt20"></div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default" data-method="zoom" data-option="0.1" title="${text('放大')}">
|
||||
<span class="fa fa-fw fa-search-plus"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-method="zoom" data-option="-0.1" title="${text('缩小')}">
|
||||
<span class="fa fa-fw fa-search-minus"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default" data-method="move" data-option="-10" data-second-option="0" title="${text('向左移动')}">
|
||||
<span class="fa fa-fw fa-arrow-left"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-method="move" data-option="10" data-second-option="0" title="${text('向右移动')}">
|
||||
<span class="fa fa-fw fa-arrow-right"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-method="move" data-option="0" data-second-option="-10" title="${text('向上移动')}">
|
||||
<span class="fa fa-fw fa-arrow-up"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-method="move" data-option="0" data-second-option="10" title="${text('向下移动')}">
|
||||
<span class="fa fa-fw fa-arrow-down"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default" data-method="rotate" data-option="-45" title="${text('逆时针旋转')}">
|
||||
<span class="fa fa-fw fa-rotate-left"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-method="rotate" data-option="45" title="${text('顺时针旋转')}">
|
||||
<span class="fa fa-fw fa-rotate-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default" data-method="scaleX" data-option="-1" title="${text('水平反转')}">
|
||||
<span class="fa fa-fw fa-arrows-h"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" data-method="scaleY" data-option="-1" title="${text('左右反转')}">
|
||||
<span class="fa fa-fw fa-arrows-v"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<label class="btn btn-info btn-upload" for="inputImage" title="${text('选择图片')}">
|
||||
<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp">
|
||||
<span class="fa fa-fw fa-upload"></span> <b>${text('选择图片')}</b>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group hide">
|
||||
<button id="btnGetImageBase64" type="button" class="btn btn-default" data-method="getCroppedCanvas" title="Get image Base64">
|
||||
<span class="fa fa-fw fa-download"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<script src="${ctxStatic}/cropper/3.1/cropper.js?${_version}"></script>
|
||||
<script>
|
||||
var URL = window.URL || window.webkitURL,
|
||||
uploadedImageType = 'image/png', uploadedImageURL,
|
||||
aspectRatio = ${isNotBlank(ratio!)?(@StringUtils.split(ratio!,'/')[0]+'/'+@StringUtils.split(ratio!,'/')[1]):'1/1'},
|
||||
maxWidth = ${isNotBlank(maxWidth!)?toInteger(maxWidth!):'800'},
|
||||
maxHeight = ${isNotBlank(maxHeight!)?toInteger(maxHeight!):'800'},
|
||||
options = {
|
||||
dragMode: 'move',
|
||||
aspectRatio: aspectRatio,
|
||||
maxWidth: maxWidth,
|
||||
maxHeight: maxHeight,
|
||||
autoCropArea: 1,
|
||||
checkCrossOrigin: false,
|
||||
preview: ".img-preview",
|
||||
ready: function(){
|
||||
$(window).resize();
|
||||
}
|
||||
},
|
||||
$image = $("#image").cropper(options), imageBase64;
|
||||
$('.btn-group').on('click', '[data-method]', function () {
|
||||
var $this = $(this), data = $this.data(),
|
||||
cropper = $image.data('cropper'), cropped, result;
|
||||
if ($this.prop('disabled') || $this.hasClass('disabled')) {
|
||||
return;
|
||||
}
|
||||
if (cropper && data.method) {
|
||||
data = $.extend({}, data); // Clone a new one
|
||||
cropped = cropper.cropped;
|
||||
switch (data.method) {
|
||||
case 'rotate':
|
||||
if (cropped && options.viewMode > 0) {
|
||||
$image.cropper('clear');
|
||||
}
|
||||
break;
|
||||
case 'getCroppedCanvas':
|
||||
if (uploadedImageType === 'image/jpeg') {
|
||||
if (!data.option) {
|
||||
data.option = {width:800, height:800};
|
||||
}
|
||||
data.option.fillColor = '#fff';
|
||||
}
|
||||
break;
|
||||
}
|
||||
result = $image.cropper(data.method, data.option, data.secondOption);
|
||||
switch (data.method) {
|
||||
case 'rotate':
|
||||
if (cropped && options.viewMode > 0) {
|
||||
$image.cropper('crop');
|
||||
}
|
||||
break;
|
||||
case 'scaleX':
|
||||
case 'scaleY':
|
||||
$(this).data('option', -data.option);
|
||||
break;
|
||||
case 'getCroppedCanvas':
|
||||
if (result) {
|
||||
imageBase64 = result.toDataURL(uploadedImageType);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
$("#inputImage").change(function(){
|
||||
var files = this.files, file;
|
||||
if (!$image.data('cropper')) {
|
||||
return;
|
||||
}
|
||||
if (files && files.length) {
|
||||
file = files[0];
|
||||
if (/^image\/\w+$/.test(file.type)) {
|
||||
uploadedImageType = file.type;
|
||||
uploadedImageURL = URL.createObjectURL(file);
|
||||
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
|
||||
$(this).val('');// 清理下，方便下次选择
|
||||
} else {
|
||||
js.showMessage('请选择一个图片文件。');
|
||||
}
|
||||
}
|
||||
$(this).blur();
|
||||
}).focus(function(){
|
||||
js.loading();
|
||||
}).blur(function(){
|
||||
js.closeLoading();
|
||||
});
|
||||
$(window).resize(function(){
|
||||
$('.img-container').height($(window).height()-50);
|
||||
}).resize();
|
||||
</script>
|
||||
@@ -0,0 +1,177 @@
|
||||
<%/* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law. */ %>
|
||||
<% layout('/layouts/default.html', {title: '选项选择', bodyClass: 'box b0', libs: ['zTree']}){ %>
|
||||
<div class="treeShowHideButton" onclick="search();">
|
||||
<label id="btnShow" title="${text('显示搜索')}" style="display:none;">︾</label>
|
||||
<label id="btnHide" title="${text('隐藏搜索')}">︽</label>
|
||||
</div>
|
||||
<div class="treeSearchInput" id="search">
|
||||
<label for="keyword">${text('关键字')}：</label><input type="text" class="empty"
|
||||
id="keyword" maxlength="50" autocomplete="off"/>
|
||||
<button class="btn" id="btn" onclick="searchNode(true)"> ${text('搜索')} </button>
|
||||
</div>
|
||||
<div class="treeExpandCollapse" style="display:none;">
|
||||
<a href="javascript:" onclick="tree.expandAll(true);">${text('展开')}</a> /
|
||||
<a href="javascript:" onclick="tree.expandAll(false);">${text('折叠')}</a>
|
||||
</div>
|
||||
<div id="tree" class="ztree treeselect"></div>
|
||||
<% } %>
|
||||
<script>
|
||||
var selectCodes = "${selectCodes!}".split(","), setting = {
|
||||
view:{selectedMulti:false,dblClickExpand:false},
|
||||
check:{enable:"${checkbox!}"=="true",nocheckInherit:true/*<% if(isNotBlank(chkboxType!)){
|
||||
chkboxType = toJson(fromJson(chkboxType!, 'map')); // 转换一遍防止XSS注入
|
||||
if(isNotBlank(chkboxType!)){ %>*/,chkboxType:"#{chkboxType!}"/*<% } } %>*/},
|
||||
async:{enable:true,autoParam:["id=parentCode"],
|
||||
url:js.removeParam('parentCode', "${url!}")},
|
||||
data:{simpleData:{enable:true}},callback:{
|
||||
onClick:function(event, treeId, treeNode){
|
||||
tree.expandNode(treeNode);
|
||||
},
|
||||
onDblClick: function(event, treeId, treeNode){
|
||||
if (treeNode){
|
||||
js.layer.$('#' + window.name).closest('.layui-layer')
|
||||
.find(".layui-layer-btn0").trigger("click");
|
||||
}
|
||||
},
|
||||
onAsyncSuccess: function(event, treeId, treeNode, msg){
|
||||
selectCheckNode(selectCodes, treeNode);
|
||||
}
|
||||
},
|
||||
}, tree, loadTree = function(){
|
||||
js.ajaxSubmit("${url!}${@StringUtils.contains(url!,'?')?'&':'?'}t=" + new Date().getTime(), function(treeNodes){
|
||||
//# // 初始化树结构
|
||||
tree = $.fn.zTree.init($("#tree"), setting, treeNodes);
|
||||
//# // 如果所有一级都没有子节点，则隐藏（展开、折叠）按钮
|
||||
var nodes = tree.getNodesByParam("level", 0);
|
||||
for(var i=0, l=nodes.length; i<l; i++) {
|
||||
if (nodes[i].children && nodes[i].children.length > 0){
|
||||
$('.treeExpandCollapse').show();
|
||||
break;
|
||||
}
|
||||
}
|
||||
//# // 默认展开节点，（如果级别设置为-1，则：如果有1个根节点，则展开一级节点，否则不展开）
|
||||
$.fn.zTree.expandNodeByLevel(tree, "#{@ObjectUtils.toInteger(expandLevel!(-1))}");
|
||||
//# // 默认选中节点，选中回显
|
||||
if (treeNodes && treeNodes.length > 0){
|
||||
selectCheckNode(selectCodes);
|
||||
}
|
||||
}, 'json', true, js.text('loading.message'));
|
||||
};loadTree();
|
||||
//# // 默认选择节点
|
||||
function selectCheckNode(selectCodes, parentNode){
|
||||
for(var i=0; i<selectCodes.length; i++) {
|
||||
var isLoadUser = "#{@StringUtils.contains(url!,'isLoadUser=true')}";
|
||||
var node = tree.getNodeByParam('${isReturnValue!}'=='true'?'value':'id',
|
||||
(isLoadUser?"u_":"") + selectCodes[i], parentNode);
|
||||
if("${checkbox!}"=="true"){
|
||||
try{tree.checkNode(node, true, false);}catch(e){}
|
||||
tree.selectNode(node, false);
|
||||
}else{
|
||||
tree.selectNode(node, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
//# // 搜索输入框绑定
|
||||
var key = $("#keyword"), lastValue = "", nodeList = [], searchTime;
|
||||
key.bind("focus", function(){
|
||||
if (key.hasClass("empty")) {
|
||||
key.removeClass("empty");
|
||||
}
|
||||
}).bind("blur", function(){
|
||||
if (key.get(0).value === "") {
|
||||
key.addClass("empty");
|
||||
}
|
||||
searchNode();
|
||||
//# if(@Global.getConfigToBoolean('sys.treeselect.fastSearch', 'true')){
|
||||
}).bind("change cut input propertychange", function(){
|
||||
//# // window.clearTimeout(searchTime);searchTime=setTimeout(searchNode, 500); 复选的时候，搜索后不能得到搜索前选择的数据
|
||||
if ('${fastSearch!}' == 'true') {
|
||||
searchNode();
|
||||
}
|
||||
//# }
|
||||
}).bind("keydown", function (e){
|
||||
if(e.which == 13){
|
||||
searchNode();
|
||||
}
|
||||
});
|
||||
//# // 搜索节点
|
||||
function searchNode(force) {
|
||||
//# // 取得输入的关键字的值
|
||||
var value = $.trim(key.get(0).value);
|
||||
//# // 按名字查询
|
||||
var keyType = "name";
|
||||
//# // 如果和上次一次，就退出不查了。
|
||||
if (lastValue === value && force != true) {
|
||||
return;
|
||||
}
|
||||
//# // 保存最后一次
|
||||
lastValue = value;
|
||||
var nodes = tree.getNodes();
|
||||
//# // 如果要查空字串，就退出不查了。
|
||||
if (value == "") {
|
||||
showAllNode(nodes);
|
||||
return;
|
||||
}
|
||||
hideAllNode(nodes);
|
||||
nodeList = tree.getNodesByParamFuzzy(keyType, value);
|
||||
updateNodes(nodeList);
|
||||
}
|
||||
//# // 隐藏所有节点
|
||||
function hideAllNode(nodes){
|
||||
nodes = tree.transformToArray(nodes);
|
||||
for(var i=nodes.length-1; i>=0; i--) {
|
||||
tree.hideNode(nodes[i]);
|
||||
}
|
||||
}
|
||||
//# // 显示所有节点
|
||||
function showAllNode(nodes){
|
||||
nodes = tree.transformToArray(nodes);
|
||||
for(var i=nodes.length-1; i>=0; i--) {
|
||||
if(nodes[i].getParentNode()!=null){
|
||||
tree.expandNode(nodes[i],false,false,false,false);
|
||||
}else{
|
||||
tree.expandNode(nodes[i],true,true,false,false);
|
||||
}
|
||||
tree.showNode(nodes[i]);
|
||||
showAllNode(nodes[i].children);
|
||||
}
|
||||
}
|
||||
//# // 更新节点状态
|
||||
function updateNodes(nodeList) {
|
||||
tree.showNodes(nodeList);
|
||||
for(var i=0, l=nodeList.length; i<l; i++) {
|
||||
var treeNode = nodeList[i];
|
||||
//# // 显示当前节点的子节点
|
||||
showChildren(treeNode);
|
||||
//# // 显示当前节点所有的父节点
|
||||
showParent(treeNode)
|
||||
}
|
||||
}
|
||||
//# // 显示所有子节点
|
||||
function showChildren(treeNode){
|
||||
if (treeNode.isParent){
|
||||
for(var idx in treeNode.children){
|
||||
var node = treeNode.children[idx];
|
||||
tree.showNode(node);
|
||||
showChildren(node);
|
||||
}
|
||||
}
|
||||
}
|
||||
//# // 显示所有子节点
|
||||
function showParent(treeNode){
|
||||
var parentNode;
|
||||
while((parentNode = treeNode.getParentNode()) != null){
|
||||
tree.showNode(parentNode);
|
||||
tree.expandNode(parentNode, true, false, false);
|
||||
treeNode = parentNode;
|
||||
}
|
||||
}
|
||||
//# // 开始搜索
|
||||
function search($this) {
|
||||
$('#search').slideToggle(200);
|
||||
$('#btnShow').toggle();
|
||||
$('#btnHide').toggle();
|
||||
$('#keyword').focus();
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user