<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<meta name="viewport" charset="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>视图列配置</title>
|
|
<link rel="stylesheet" href="static/plugins/jquery-steps/css/main.css" type="text/css">
|
<link rel="stylesheet" href="static/plugins/jquery-steps/css/jquery.steps.css" type="text/css">
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
|
<link rel="stylesheet" href="static/styles/initialize.css" type="text/css">
|
<link rel="stylesheet" href="static/styles/common.css" type="text/css">
|
<link rel="stylesheet" href="static/plugins/layer/skin/default/layer.css" type="text/css">
|
|
<script type="text/javascript" src="static/plugins/jquery/jquery.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/jquery.easyui.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
|
<script type="text/javascript" src="static/scripts/easyuiExtend.js"></script>
|
<script type="text/javascript" src="static/scripts/jquery-extend.js"></script>
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
|
<script type="text/javascript" src="static/scripts/ResizeScroll.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui-edatagrid/jquery.edatagrid.js"></script>
|
<script type="text/javascript" src="static/plugins/ace/src-noconflict/ace.js"></script>
|
|
<!-- 弹窗加载组件 -->
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/spin.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/jquery.spin.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery.blockUI.js"></script>
|
<!-- wcp组件 -->
|
<script type="text/javascript" src="static/wcp/scripts/wcp.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.layer.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.blockUI.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.spin.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.jquery.js"></script>
|
|
<!--[if lt IE 9]>
|
<script type="text/javascript" src="static/plugins/json2.js"></script>
|
<![endif]-->
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.infoPicker.js"></script>
|
|
</head>
|
<style>
|
html, body {height: 100%;}
|
|
body {overflow: hidden;}
|
.formula_select {position: absolute; width: 22px; height: 22px; color: #3a7fa6; background: #fff; z-index: 5; right: -22px; border: 1px solid #aaa; top: 0px; text-align: center; cursor: pointer;line-height: 22px;}
|
</style>
|
<body>
|
<div class="pt-form">
|
<form id="formViewColumn" method="post">
|
<table style="width: 100%;">
|
<tr>
|
<td class="tbtitle">字段类型：</td>
|
<td>
|
<div>
|
<input class="easyui-radiobutton" name="contentType" data-options="checked:true,onChange:contentTypeChange" value="0" label="表字段">
|
<input class="easyui-radiobutton" name="contentType" data-options="onChange:contentTypeChange" value="1" label="公式字段">
|
</div>
|
</td>
|
</tr>
|
<tr id="tr_formula" class="hide">
|
<td class="tbtitle">公式字段：</td>
|
<td>
|
<div style="position: relative;">
|
<span class="formula_select">选</span>
|
<textarea rows="2" cols="20" id="hid_columnFormula" style="display: none;">${viewColumn.expression} </textarea>
|
<pre id="columnFormula" style="height:200px;width:610px">
|
</pre>
|
<div id="columnFormulaDefaultHtml" style="display:none">
|
/*
|
注释：获取当前行某列数据方式为 row.字段名；公式必须有返回值。
|
实例：return row.user_name;
|
*/
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle"> <em class="pt-color-danger">*</em>字段名称：</td>
|
<td>
|
<input id="fieldName" name="fieldName" class="easyui-textbox" type="text" style="width:610px;" data-options="required:true,buttonText:'选字段',prompt:'请选择字段...',onClickButton:selectColumn" value="${viewColumn.fieldName}"/>
|
<input type="hidden" class="easyui-textbox" id="columnId" name="columnId" value="${viewColumn.columnId}" />
|
<input type="hidden" class="easyui-textbox" id="viewId" name="viewId" value="${viewColumn.viewId}" />
|
<input type="hidden" class="easyui-textbox" id="tableName" name="tableName" value="${viewColumn.tableName}" />
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">
|
<em class="pt-color-danger">*</em> 显示名称：</td>
|
<td>
|
<input id="columnTitle" name="columnTitle" class="easyui-textbox" type="text" data-options="required:true" style="width:610px;" value="${viewColumn.columnTitle}"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">固定字段：</td>
|
<td>
|
<input type="hidden" id="enableFrozen" name="enableFrozen" value="${viewColumn.enableFrozen}"/>
|
<input id="enableFrozenText" class="easyui-switchbutton" data-options="onText:'是',offText:'否',onChange:setEnableValue"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">启用排序：</td>
|
<td>
|
<input type="hidden" id="enableOrder" name="enableOrder" value="${viewColumn.enableOrder}"/>
|
<input id="enableOrderText" class="easyui-switchbutton" data-options="onText:'是',offText:'否',onChange:setEnableValue"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">字段显示宽度：</td>
|
<td>
|
<input id="displayWidth" name="displayWidth" class="easyui-numberspinner" type="text" style="width:610px;" value="${viewColumn.displayWidth}"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">字段输出类型 ：
|
</td>
|
<td>
|
<input class="easyui-radiobutton" name="dataType" value="0" label="默认">
|
<input class="easyui-radiobutton" name="dataType" value="1" label="数字">
|
<input class="easyui-radiobutton" name="dataType" value="2" label="日期">
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">字段输出格式<a title="1. C 货币 2. F 固定小数点位数 （F2:代表两位小数位）" rel="popover"><i class="fa fa-exclamation-circle"></i></a>：</td>
|
<td>
|
<input id="outputFormat" name="outputFormat" class="easyui-textbox" type="text" style="width:610px;" value="${viewColumn.outputFormat}"/>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">字段数据对齐：</td>
|
<td>
|
<select id="columnPosition" name="columnPosition" class="easyui-combobox" style="width:200px;" data-options="panelHeight:'auto',editable:false">
|
<option value="left" selected="true">左对齐</option>
|
<option value="right">右对齐</option>
|
<option value="center">居中</option>
|
</select>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">字段标题对齐：</td>
|
<td>
|
<select id="titlePosition" name="titlePosition" class="easyui-combobox" style="width:200px;" data-options="panelHeight:'auto',editable:false">
|
<option value="left" selected="true">左对齐</option>
|
<option value="right">右对齐</option>
|
<option value="center">居中</option>
|
</select>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">列格式函数：</td>
|
<td>
|
<input type="hidden" id="enableCustomFormatter" name="enableCustomFormatter" value="${viewColumn.enableCustomFormatter}"/>
|
<input id="enableCustomFormatterText" class="easyui-switchbutton"
|
data-options="onText:'是',offText:'否',onChange:setEnableValue"/>
|
|
<div id="div_columnFormatter" style="display:none;">
|
<pre id="columnFormatter" style="height:200px; width:610px;"></pre>
|
<textarea rows="2" cols="20" id="hid_columnFormatter" style="display: none;">${viewColumn.customFormatterJs}</textarea>
|
<div id="columnFormatterDefaultHtml" style="display:none;">
|
/*
|
formatter: function(value,row,index){
|
if (row.user){
|
return row.user.name;
|
} else {
|
return value;
|
}
|
}
|
*/
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle">列样式：</td>
|
<td>
|
<input type="hidden" id="enableCustomStyle" name="enableCustomStyle" value="${viewColumn.enableCustomStyle}"/>
|
<input id="enableCustomStyleText" class="easyui-switchbutton"
|
data-options="onText:'是',offText:'否',onChange:setEnableValue"/>
|
<div id="div_columnStyle" style="display:none;">
|
<textarea rows="2" cols="20" id="hid_columnStyle" style="display: none;">${viewColumn.customStyleJs} </textarea>
|
<pre id="columnStyle" style="height:200px; width:610px;">
|
</pre>
|
<div id="columnStyleDefaultHtml" style="display:none;">
|
/*
|
styler:function(value,row,index){
|
if (value<2000){
|
return 'background-color:#ffee00;color:red;';
|
}
|
}
|
*/
|
</div>
|
</div>
|
|
</td>
|
</tr>
|
|
|
</table>
|
</form>
|
</div>
|
|
<div class="pt-form-btn" style="bottom:0px;">
|
<div class="form-group">
|
<button type="button" class="pt-btn pt-btn-primary" onclick="doSave();">确定</button>
|
<button type="reset" class="pt-btn pt-btn-default" onclick="doClose();">关闭</button>
|
</div>
|
</div>
|
|
</body>
|
<script>
|
//窗口参数，用于弹窗传递
|
var params = {
|
callBack : null
|
};
|
var editor_columnFormula=null;
|
var editor_customStyle=null;
|
var editor_customFormatter=null;
|
$(function () {
|
|
var columnStyle = $("#hid_columnStyle").val();
|
editor_customStyle = ace.edit("columnStyle");
|
editor_customStyle.setTheme("ace/theme/monokai");
|
editor_customStyle.session.setMode("ace/mode/javascript");
|
editor_customStyle.setFontSize(16);
|
editor_customStyle.session.setValue(columnStyle);
|
var columnStyleDefaultHtml=$('#columnStyleDefaultHtml').html();
|
if(editor_customStyle.getValue().replace(/(^\s*)|(\s*$)/g, "")=="")
|
{
|
editor_customStyle.session.setValue(columnStyleDefaultHtml);
|
}
|
|
var columnStyle = $("#hid_columnFormula").val();
|
editor_columnFormula = ace.edit("columnFormula");
|
editor_columnFormula.setTheme("ace/theme/monokai");
|
editor_columnFormula.session.setMode("ace/mode/java");
|
editor_columnFormula.setFontSize(16);
|
editor_columnFormula.session.setValue(columnStyle);
|
var columnFormulaDefaultHtml=$('#columnFormulaDefaultHtml').html();
|
if(editor_columnFormula.getValue().replace(/(^\s*)|(\s*$)/g, "")=="")
|
{
|
editor_columnFormula.session.setValue(columnFormulaDefaultHtml);
|
}
|
|
var columnFormatter = $("#hid_columnFormatter").val();
|
editor_customFormatter = ace.edit("columnFormatter");
|
editor_customFormatter.setTheme("ace/theme/monokai");
|
editor_customFormatter.session.setMode("ace/mode/javascript");
|
editor_customFormatter.setFontSize(16);
|
editor_customFormatter.session.setValue(columnFormatter);
|
var columnFormatterDefaultHtml=$('#columnFormatterDefaultHtml').html();
|
if(editor_customFormatter.getValue().replace(/(^\s*)|(\s*$)/g, "")=="")
|
{
|
editor_customFormatter.session.setValue(columnFormatterDefaultHtml);
|
}
|
|
initEnableCheck();
|
new ResizeScroll({ "id": ".pt-form", "height": "506" });
|
})
|
|
//初始化选择项
|
function initEnableCheck()
|
{
|
$('#columnPosition').combobox('setValue', '${viewColumn.columnPosition}');
|
$('#titlePosition').combobox('setValue', '${viewColumn.titlePosition}');
|
$("input[radiobuttonName='contentType'][value='${viewColumn.contentType}']").radiobutton('check');
|
$("input[radiobuttonName='dataType'][value='${viewColumn.dataType}']").radiobutton('check');
|
if("${viewColumn.enableFrozen}"=="true")
|
{
|
$('#enableFrozenText').switchbutton("check");
|
}else{
|
$('#enableFrozenText').switchbutton("uncheck")
|
}
|
if("${viewColumn.enableOrder}"=="true")
|
{
|
$('#enableOrderText').switchbutton("check");
|
}else{
|
$('#enableOrderText').switchbutton("uncheck")
|
}
|
|
if("${viewColumn.enableCustomStyle}"=="true")
|
{
|
$('#enableCustomStyleText').switchbutton("check");
|
$("#div_columnStyle").show();
|
}else{
|
$('#enableCustomStyleText').switchbutton("uncheck");
|
$("#div_columnStyle").hide();
|
}
|
|
if("${viewColumn.enableCustomFormatter}"=="true")
|
{
|
$('#enableCustomFormatterText').switchbutton("check");
|
$("#div_columnFormatter").show();
|
}else{
|
$('#enableCustomFormatterText').switchbutton("uncheck");
|
$("#div_columnFormatter").hide();
|
}
|
}
|
function contentTypeChange(checked) { //字段类型改变事件
|
if (checked) {
|
var value = $(this).val();
|
if (value == 1) {
|
$("#tr_formula").removeClass("hide");
|
$('#fieldName').textbox({
|
editable:true,
|
})
|
} else {
|
$("#tr_formula").addClass("hide");
|
$('#fieldName').textbox({
|
editable:false,
|
})
|
}
|
}
|
}
|
|
function selectColumn() {
|
var tableNames=$('#tableName').val().replace(';',',');
|
wcp.picker.selectTableColumn({
|
title : "请选择字段",
|
tableName :tableNames,
|
multiSelect : true,
|
layerOpener : window
|
},function(rows){
|
var selectedColumn="";
|
var selectedColumnTitle="";
|
$.each(rows, function(index, value) {
|
selectedColumn=value.columnName;
|
selectedColumnTitle=value.displayName;
|
});
|
$('#fieldName').textbox("setValue", selectedColumn);
|
$('#columnTitle').textbox("setValue", selectedColumnTitle);
|
});
|
}
|
|
//设置隐藏域值
|
function setEnableValue(checked)
|
{
|
$('#'+this.id.replace("Text","")).val(checked);
|
if(checked)
|
{
|
if(this.id=="enableCustomFormatterText")
|
{
|
$("#div_columnFormatter").show();
|
}
|
if(this.id=="enableCustomStyleText")
|
{
|
$("#div_columnStyle").show();
|
}
|
}else{
|
if(this.id=="enableCustomFormatterText")
|
{
|
$("#div_columnFormatter").hide();
|
}
|
if(this.id=="enableCustomStyleText")
|
{
|
$("#div_columnStyle").hide();
|
}
|
}
|
}
|
function doSave() { //确定按钮事件
|
//验证表单信息
|
var isValid = $('#formViewColumn').form('validate');
|
if (!isValid) {
|
wcp.notify.warn('表单验证有误，请检查表单输入项！');
|
return false;
|
}
|
|
var obj1 = $("#formViewColumn").serializeObject();
|
var customStyleJs={'customStyleJs': editor_customStyle.getValue().replace(/(^\s*)|(\s*$)/g, "")};
|
var customFormatterJs={'customFormatterJs': editor_customFormatter.getValue().replace(/(^\s*)|(\s*$)/g, "")};
|
var expression={'expression': editor_columnFormula.getValue()};
|
var obj = $.extend({}, obj1,customStyleJs,customFormatterJs,expression);
|
wcp.ui.setBusy("body", wcp.ajax({
|
url : "config/viewColumn/saveViewColumn",
|
data : JSON.stringify(obj),
|
}).done(function(result) {
|
//判断是否需要执行回调函数
|
if (params.callBack) {
|
params.callBack();
|
}
|
//关闭窗口
|
doClose();
|
top.wcp.notify.success("保存成功！");
|
}));
|
}
|
|
function doClose() { //关闭按钮事件
|
var index = top.layer.getFrameIndex(window.name); //获取窗口索引
|
top.layer.close(index);
|
}
|
</script>
|
|
</html>
|
