Mini模块构件



基于新构思和JQuery控件而开发的平台，该功能模块用于构建模板。模板不再是固定的几种，而是可以自定义模板，自己可以随心所欲的定义各种各样的模板。该功能模块就是为完成自定义各种各样的模板和功能模块而开发的。如果需要定制一个功能模块，首先从本模块构件开始。先定义一个空白模板的模块，然后再用其他定义模块定义该模块的类实例和属性，再到该模块构件中把类实例放入该模块的空白模板中，使先前定义的空白模板模块完善成一个具备所需功能的模块，从而完成一个模块的定制。

Mini模块构件界面如下：

界面上半区域显示了所有定制的模块列表，光带条表示所选中的一个定制模块，界面下半区域显示了光带条所选模块的界面预览样式（没有数据）。有新增、修改和删除功能。

点击新增或修改按钮，弹出如下界面：

数据项介绍如下：

• 添加组件：添加右面下拉框的组件html代码，选择右面的一个组件完成组件的HTML代码添加，组件的添加还不能以可视化（所见即所得）方式添加，必须把编辑界面切换到HTML代码模式，在光标所在HTML中的位置上加入组件的HTML代码。也可以点击“生成HTML”功能,把生成的HTML文本框中的HTML代码复制出来粘贴到编辑界面的HTML相应位置中。

• 模块名称：模块名称必须要录入，为功能模块的名称。

• 类型文件名：样式单文件名，只输入文件名即可，不要带路径，相关文件拷贝到SCMReport\Resource\PubStyle目录下。

• 脚本文件名：脚本文件名，只输入文件名，，不要带路径，相关文件拷贝到SCMReport\Resource\PubJavaScript目录下

• 皮肤样式：界面皮肤种类，有6种：标准、浅蓝、浅灰、淡绿、蓝色、淡蓝。

• 生成HTML:把添加组件右面的下拉框选中的组件生成标准的HTML文本，用于复制后放入界面HTML的相应位置上。

  删除按钮功能为删除该模板模块。

各种组件HTML语法介绍如下：

1.表格组件（DataGrid）:

HTML文本：

<divid="datagrid1" class="mini-datagrid"style="width:700px;height:250px;"

   url="../data/AjaxService.aspx?method=SearchEmployees"

> 

   <div property="columns">

       <divtype="indexcolumn"></div>               

       <div field="loginname"width="120" headerAlign="center"allowSort="true">员工帐号</div>   

       <div field="name" width="120"headerAlign="center" allowSort="true">姓名</div>   

       <div header="工作信息">

           <divproperty="columns">

               <divfield="dept_name" width="120">所属部门</div>

               <divfield="position_name" width="100">职位</div>

               <div field="salary"width="100" allowSort="true">薪资</div>

           </div>

       </div>

   </div>

</div>

表格常用HTML标记介绍：

 

url:数据加载地址。

idField:行数据唯一字段。

virtualScroll:是否虚拟滚动。当显示的数据超过500以上时，请设置此属性，能极大提升性能，值为true或false，默认值为false。

sortField：排序字段。

sortOrder：排序方向，值为asc或desc。

totalCoun：总记录数。

showColumns：是否显示表头，值为true或false，默认值为true。

showPager：是否显示分页，值为true或false，默认值为true

showHGridLines：是否显示横向表格线条，值为true或false，默认值为true。

showVGridLines：是否显示竖向表格线条，值为true或false，默认值为true。

showSummaryRow：是否显示汇总行，值为true或false，默认值为false。

allowCellWrap：是否允许单元格换行，值为true或false，默认值为false。

allowHeaderWrap：是否允许表头文本换行，值为true或false，默认值为false。

allowSortColumn：是否允许列排序，值为true或false，默认值为true。

allowMoveColumn：是否允许移动列，值为true或false，默认值为true。

allowResizeColumn：是否允许拖拽调节列宽度，值为：true或false，默认值为true。

enableHotTrack：是否移动到行时高亮显示，值为true或false，默认值为true。

allowCellSelect：是否允许选择单元格，值为：true或false，默认值为false。

allowCellEdit：是否允许单元格编辑，值为：true或false，默认值为false。

editNextOnEnterKey：是否按回车键进入下一个单元格编辑，值为true或false，默认值为false。

editNextRowCell：是否按回车键进入下一行同列的单元格编辑，值为true或false，默认值为false。

allowCellValid：是否自动验证，当编辑单元格时，值为true或false，默认值为false。

allowRowSelect：是否允许选择行，值为true或false，默认值为true。

onlyCheckSelection：是否只通过checkcolumn列选择，值为true或false，默认值为false。

multiSelect：是否允许多选行，值为true或false，默认值为false。

allowUnselect：是否允许反选。设置true后，点击任意单元格都会选中行，以及取消选中行，值为true或false，默认值为false。

allowAlternating：是否显示斑马纹，值为true或false，默认值为false。

frozenStartColumn：锁定开始列号，默认值为-1。

frozenEndColumn：锁定截至列，默认值为-1。

showPageIndex：是否显示页码，值为true或false，默认值为true。

showPageSize：是否显示页尺寸，值为true或false，默认值为true。

allowResize：是否允许拖拽调节表格尺寸，值为true或false，默认值为false。

selectOnLoad：加载完是否自动选中，值为true或false，默认值为false。

collapseGroupOnLoad：加载完是否折叠分组，值为true或false，默认值为false。

showEmptyText：数据为空时是否显示提示文本，值为true或false，默认值为false。

emptyText：数据为空时的提示文本。

showPageInfo：是否显示分页文本信息，值为true或false，默认值为true。

showReloadButton：是否显示"刷新"分页按钮，值为true或false，默认值为true。

showModified：是否显示修改的红色小三角，值为true或false，默认值为true。

showColumnsMenu：是否显示列菜单。实现显示、隐藏列，值为true或false，默认值为false。

 

表格字段列常用HTML标记介绍（？）

……

2.按钮组件（Button）:

HTML文本：

<aclass="mini-button"iconCls="icon-edit"onclick="onClick">Edit</a>

按钮常用HTML标记介绍：

text:按钮文本

iconCls:按钮图标样式单类，常用的有：

  icon-add(增加)、icon-edit（编辑或修改）、icon-remove（删除）、icon-addnew、icon-edit、icon-remove、icon-save、icon-close、icon-cut、icon-ok、icon-no、icon-cancel、icon-reload、icon-search、icon-print、icon-help、icon-undo、icon-redo、icon-tip、icon-zoomin、icon-zoomout、icon-goto、icon-date、icon-filter、 icon-find、icon-folder、icon-folderopen、icon-lock、icon-unlock、icon-new、icon-node、icon-nowait、icon-sort、icon-wait、icon-upgrade、 icon-downgrade、icon-download、icon-upload、icon-user、icon-split、 icon-addfolder、icon-expand、icon-collapse

iconStyle:按钮图标样式

plain:背景是否透明，值为true或false，默认值为false。

3.工具栏组件（Toolbar）:

HTML文本：

<divclass="mini-toolbar">

   <aclass="mini-button"iconCls="icon-add">增加</a>

   <aclass="mini-button"iconCls="icon-edit">修改</a>

   <aclass="mini-button"iconCls="icon-remove">删除</a>

   <spanclass="separator"></span>

   <aclass="mini-button"plain="true">增加</a>

   <aclass="mini-button"plain="true">修改</a>

   <aclass="mini-button"plain="true">删除</a>

   <spanclass="separator"></span>

   <inputclass="mini-textbox" />     

   <aclass="mini-button"plain="true">查询</a>

</div>

其中<div class="mini-toolbar"></div>为工具栏，内容包含的为一组按钮组件。

注意：以上由Mini模块构件自动生成的构件实例HTML文本标记值不要随意改动，特别是id的值不能改动。