外观

本节将重点介绍外观设置的实例，包括：改变单元格字体颜色、背景色等，有修改的时候改变单元格颜色，修改增强控件风格，修改esayui插件的主题。

改变单元格字体颜色、背景色等

function _setAttribute(){

//注意,修改后,必须移开鼠标才会看到效果

  var cell = report1.currCell;//取得当前选中的单元格

  cell.style.backgroundColor="#FF0000";//修改选中单元格的背景色

  cell.style.color="#0000FF";//修改字体颜色

}

 

function _setAttributeByID(){

  var cell = document.getElementById("report1_C2");

  cell.style.backgroundColor="#FF0000";//修改选中单元格的背景色

  cell.style.color="#0000FF";//修改字体颜色

}

有修改的时候改变单元格颜色

function _bindingEditor( cell ) {

  cell.bgColor="#FF0000";

  var oldvalue="";

  if(report1.currCell)

    oldvalue=report1.currCell.value;

  var table = _lookupTable( cell );

  if( ! _submitEditor( table ) ) return;

  if(report1.currCell)

    if(report1.currCell&&report1.currCell.value!=oldvalue) {

      report1.currCell.style.backgroundColor="#FF0000";//这里是修改背景色

  }

  var editor = _lookupEditor( table, cell );

  table.currEditor = editor;

  _setRowColBackColor( cell );

  _setEditorStyle( editor, cell );

}

 

修改增强控件风格

如果编辑风格选择为“下拉列表框”，“下拉数据集”的同时，勾选了“增强控件”选项，那么对应控件的编辑风格即为增强控件的风格。增强控件可以采取在JSP文件中报表标签之前，设置如下JavaScript变量对该控件的下拉按钮和边框的样式进行修改，取值采用HTML中的边框及颜色取值：

<script language=javascript>
var _ddboxBackColor = "#B0D3F7"; //按钮背景色，缺省银灰色
var _ddboxLightBorder = "#6EB0F5 1px solid"; //按钮亮边框样式
var _ddboxDarkBorder = "#6EB0F5 1px solid"; //按钮暗边框样式
var _ddboxButtonMargin = 1; //按钮与外边框之间的间隙，缺省为0
var _editorBorderLeft = "#6EB0F5 1px solid"; //左外边框的样式
var _editorBorderTop = "#6EB0F5 1px solid"; //上外边框的样式
var _editorBorderRight = "#6EB0F5 1px solid"; //右外边框的样式
var _editorBorderBottom = "#6EB0F5 1px solid"; //下外边框的样式

var _ddboxSelectedItemColor = "red"; //选中下拉项的前景色
var _ddboxSelectedItemBackColor = "yellow"; //选中下拉项的背景色

</script>

   对于外边框变量的定义：

在参数报表中，如果未定义外边框变量，外边框样式缺省与html的文本输入框外边框相同；

修改 easyui 插件的主题

目前产品是通过使用嵌入easyui插件来实现对报表展现页面的美化。easyui包含的主题有：black、bootstrap、default、gray、material和metro，缺省使用主题default。

如果想要更换easyui插件主题，需要修改相对应的JSP文件。

例如，修改预览填报表页面的easyui主题样式。需先打开previewInput.jsp文件，如下图所示在JSP文件中默认是default，然后可以将其修改为要更换的主题类型。