自定义表单中计算控件的插件代码

最新推荐文章于 2022-03-23 20:59:49 发布

tonysz126

最新推荐文章于 2022-03-23 20:59:49 发布

阅读量2.9k

点赞数

分类专栏： js 文章标签： html Html HTML

本文链接：https://blog.youkuaiyun.com/tonysz126/article/details/8493931

版权

js 专栏收录该内容

3 篇文章

订阅专栏

现公布自定义表单控件的部分代码，这个纯属个人利用空闲时间所做，欢迎大家交流。

ckeditor插件代码

插件配置文件plugin.js，该文件放在ckeditor下的plugins目录下

/**
 * 自定义表单设计器   计算控件
 * author tony 2012-08-14
 */

CKEDITOR.plugins.add('xd_calcu',{
	init : function(editor){
		var pluginName = 'xd_calcu';
		
		editor.addCommand(pluginName,new CKEDITOR.dialogCommand(pluginName));
		editor.ui.addButton(pluginName,{
											label:'计算控件',
											command:pluginName,
											icon : CKEDITOR.plugins.getPath(pluginName) + 'calc.gif'
										});
		
		CKEDITOR.dialog.add(pluginName,this.path + 'dialogs/xd_calcu.js');
		
		if ( editor.addMenuItems )
		{
			editor.addMenuItems(
				{
					xd_calcu :
					{
						label : '日历控件',
						command : 'xd_calcu',
						group : 'textfield',
						icon : CKEDITOR.plugins.getPath('xd_calcu') + 'calc.gif'
					}
				});
		}
		
		if ( editor.contextMenu )
		{
			editor.contextMenu.addListener( function( element )
				{
					if ( element && !element.isReadOnly() )
					{
						var name = element.getName();
						var input_type = element.getAttribute('input_type');
						
						if ( name == 'input' && input_type === 'calc'){
							return { xd_calcu : CKEDITOR.TRISTATE_ON };
						}
					}
				});
		}

		editor.on( 'doubleclick', function( evt )
			{
				var element = evt.data.element;

				if ( element.is( 'input' ) )
					evt.data.dialog = 'xd_calcu';
			});
	}
});

对话框文件xd_calcu.js

/**
 * 智能表单  计算控件
 * @author tony 2012-08-14
 */

//显示公式说明
function displayRemark(){
	var displayDom = document.getElementById('displayRemark');
	if(displayDom){
		if(displayDom.style.display === 'none'){
			displayDom.style.display = 'block';
		} else {
			displayDom.style.display = 'none';
		}
	}
}
 
CKEDITOR.dialog.add('xd_calcu',function(editor){
	
	var elements = [
					{
						id : 'calcName',
						type : 'text',
						widths : ['100px','150px'],
						label : '控件名称：',
						labelLayout : 'horizontal',
						labelStyle : 'font-weight:bold',
						style : 'width:150px;margin-left:25px;'
					},
					{
						id : 'calcValue',
						type : 'textarea',
						widths : ['100px','150px'],
						rows : '3',
						cols : '45',
						label : '计算公式：',
						labelLayout : 'horizontal',
						labelStyle : 'font-weight:bold',
						style : 'width:150px;margin-left:25px;'
					},
					{
						type : 'html',
						widths : ['10%','80%'],
						html : '<div style="text-align:center;width:300px;">    <a href="javascript:void(0);" style="color:blue;" οnclick="displayRemark()">查看计算公式填写说明</a></div>'
					},
					{
						type : 'html',
						widths : ['10px','300px'],
						html : '<div id="displayRemark" style="width:340px;height:150px;overflow-x:scroll;float:right;font-size: 10pt;font-family:宋体;color:blue;display:none;text-align:left;">' +
								'计算公式支持+ - * / ^和英文括号以及特定计算<br>函数，例如:(数值1+数值2)*数值3-ABS(数值4)<br>' +
								'其中数值1、数值2等为表单控件名称。<br>' +
								'<b>当前版本所支持的计算函数：</b><br>' +
								'1、MAX(数值1,数值2,数值3...) 输出最大值,<br>    英文逗号分割;<br>' +
								'2、MIN(数值1,数值2,数值3...) 输出最小值,<br>    英文逗号分割;<br>' +
								'3、ABS(数值1) 输出绝对值;<br>' +
								'4、MOD(数值1,数值2) 计算数值1和数值2的余数;<br>' +
								'5、AVG(数值1,数值2,数值3) 输出平均值;<br>' +
								'6、RMB(数值1) 输出人民币大写形式，<br>    数值范围0～9999999999.99;<br>' +
								'7、DAY(日期1-日期2) 输出时间差的整数天数;<br>' +
								'8、HOUR(日期1-日期2) 输出时间差的小时数;<br>' +
								'9、DATE(日期1-日期2) 输出时间差，<br>    形如：xx天xx小时xx分xx秒;<br>' +
								'10、LIST(列表控件名,第几列) 计算列表控件<br>指定列的和;<br>' +
								'<b>注意：参与日期计算的控件必须为日期类型<br>或者日期+时间类型。</b><br>' +
								'</div>'
					},
					{
						id : 'calcPrec',
						type : 'text',
						'default' : '4',
						widths : ['100px','150px'],
						label : '计算结果精度：',
						labelLayout : 'horizontal',
						labelStyle : 'font-weight:bold',
						style : 'width:150px'
					},
					{
						id : 'calcFontSize',
						type : 'text',
						widths : ['100px','150px'],
						label : '字体大小：',
						labelLayout : 'horizontal',
						labelStyle : 'font-weight:bold',
						style : 'width:150px;margin-left:25px'
					},
					{
						id : 'calcWidth',
						type : 'text',
						widths : ['100px','150px'],
						label : '控件宽度：',
						labelLayout : 'horizontal',
						labelStyle : 'font-weight:bold',
						style : 'width:150px;margin-left:25px'
					},
					{
						id : 'calcHeight',
						type : 'text',
						widths : ['100px','150px'],
						label : '控件高度：',
						labelLayout : 'horizontal',
						labelStyle : 'font-weight:bold',
						style : 'width:150px;margin-left:25px'
					}
				];
	var dataSelect = [['---选择数据源---','0']];
	if(typeof(MODULE_CONFIG) !== 'undefined'){
		for(var key in MODULE_CONFIG){
			var item = MODULE_CONFIG[key];
			dataSelect.push([item,key]);
		}
		elements.push({
					id : 'module_field',
					type : 'select',
					widths : ['5%','100px'],
					label : '业务表单字段：',
					labelLayout : 'horizontal',
					labelStyle : 'font-weight:bold',
					style : 'width:150px',
					'default' : '0',
					items : dataSelect
				});
	}
	
	return {
		title : '计算控件属性',
		width : 350,
		height : 300,
		resizable : false,
		style : 'overflow:scroll',
		onShow : function(){
			delete this.xd_calcu;

			var element = this.getParentEditor().getSelection().getSelectedElement();

			if ( element )
			{
				this.xd_calcu = element;
				this.setupContent( element );
				
				this.getContentElement('xd_calcu','calcName').setValue(element.getAttribute('title'));
				this.getContentElement('xd_calcu','calcValue').setValue(element.getAttribute('value'));
				this.getContentElement('xd_calcu','calcPrec').setValue(element.getAttribute('prec'));
				
				var styleString = element.getAttribute('style');
				var styleArray = styleString.split(';');
				for(var i = 0; i < styleArray.length; i++){
					var itemArray = styleArray[i].split(':');
					if(itemArray[0] === 'font-size'){
						this.getContentElement('xd_calcu','calcFontSize').setValue(itemArray[1].substr(0,(itemArray[1].length - 2)));
					}
					if(itemArray[0] === 'width'){
						this.getContentElement('xd_calcu','calcWidth').setValue(itemArray[1].substr(0,(itemArray[1].length - 2)));
					}
					if(itemArray[0] === 'height'){
						this.getContentElement('xd_calcu','calcHeight').setValue(itemArray[1].substr(0,(itemArray[1].length - 2)));
					}
				}
				
				if(typeof(MODULE_CONFIG) !== 'undefined'){
					this.getContentElement('xd_calcu','module_field').setValue(element.getAttribute('module_field'));
				}
			}
		},
		onOk : function(){
			var editor,
				element = this.xd_calcu,
				isInsertMode = !element;

			if ( isInsertMode )
			{
				editor = this.getParentEditor();
				element = editor.document.createElement( 'input' );
				element.setAttribute( 'class', 'CALCU' );
				element.setAttribute('align','absMiddle');

				element.setAttribute('input_type','calc');
				
				var element_index = XD_FORM_ELEMENT_INDEX();
				
				element.setAttribute('name','DATA_' + element_index);
				element.setAttribute('id','DATA_' + element_index);
			
				
				editor.insertElement( element );
			}
			
			element.setAttribute('title',this.getContentElement('xd_calcu','calcName').getValue());
			element.setAttribute('value',this.getContentElement('xd_calcu','calcValue').getValue());
			element.setAttribute('prec',this.getContentElement('xd_calcu','calcPrec').getValue());
			
			var styleString = '';
			var calcuFontSize = this.getContentElement('xd_calcu','calcFontSize').getValue();
			var calcuWidth = this.getContentElement('xd_calcu','calcWidth').getValue();
			var calcuHeight = this.getContentElement('xd_calcu','calcHeight').getValue();
			if(calcuFontSize){
				styleString += ('font-size:' + calcuFontSize + 'px;');
			}
			if(calcuWidth){
				styleString += ('width:' + calcuWidth + 'px;');
			}
			if(calcuHeight){
				styleString += ('height:' + calcuHeight + 'px;');
			}
			element.setAttribute('style',styleString);
			
			element.setAttribute('element_type','xd_calcu');
			
			if(typeof(MODULE_CONFIG) !== 'undefined'){
				element.setAttribute('module_field',this.getContentElement('xd_calcu','module_field').getValue());
			}
			
			this.commitContent( { element : element } );
		},
		contents : 
		[
			{
				id : 'xd_calcu',
				label : '计算控件属性',
				title : '计算控件属性',
				elements : elements
			}
		]
	};
	
});

控件的php解析代码

<?php
/**
 * 表单智能设计器
 *     计算控件
 * @author tony 2012-08-31
 * @copyright www.sunairs.com
 */
require_once('Control.php');
class Sunairs_Calcu_Control extends Sunairs_Control{

	public function parseControl($html,$opType="w",$formData=array()){
		$calcus = $html->find('input[element_type="xd_calcu"]');
		
		if(!empty($calcus)){
			foreach($calcus as $e){
				if($opType === 'w'){
					$name = $e->name;
					$index = explode('_',$name);
					$value = $e->value;
					$elementValue = $value;
					if(isset($formData[$name]) && $formData[$name]){
						$elementValue = $formData[$name];
					}
					
					$htmlText = '<input value="'.$elementValue.'" name="'.$name.'" title="'.($e->title).'" type="text" class="CALC" classname="CALC" prec="'.($e->prec).'">';
						
					//获取计算项
					$elementArray = array();
					$calcuElement = $html->find('input');
					foreach($calcuElement as $calcuE){
						if(strpos($value,$calcuE->title) >= 0){
							$elementArray[] = $calcuE;
						}
					}
					
					$calcuString = $this->calculate($value,$elementArray);
					$htmlText .= '<script type="text/javascript">function calc_'.$index[1].'(){var myvalue=eval("'.$calcuString.'");if(myvalue==Infinity) document.form1.DATA_'.$index[1].'.value="无效结果";else if(!isNaN(myvalue)) {var prec=document.form1.DATA_'.$index[1].'.getAttribute(\'prec\');var vPrec;if(!prec) vPrec=10000;else vPrec=Math.pow(10,prec);var result = new Number(parseFloat(Math.round(myvalue*vPrec)/vPrec));document.form1.DATA_'.$index[1].'.value=result.toFixed(prec);}else document.form1.DATA_'.$index[1].'.value=myvalue;setTimeout(calc_'.$index[1].',1000);}setTimeout(calc_'.$index[1].',3000);</script>';
					
					$e->outertext = $htmlText;
				} else {
					$name = $e->name;
					$outertext = isset($formData[$name]) ? $formData[$name] : '';
					$e->outertext = $outertext;
				}
			}
		}
		
		return $html;
	}
	
	public function calculate( $VALUE, $ELEMENT_QUERY ){
		if ( $VALUE == "" )
		{
			return;
		}
		$VALUE = str_replace( array( "ABS(", "RMB(", "MAX(", "MIN(", "MOD(", "DAY(", "HOUR(", "AVG(", "DATE(", "LIST(" ), array( "calc_abs(", "calc_rmb(", "calc_max(", "calc_min(", "calc_mod(", "calc_day(", "calc_hour(", "calc_avg(", "calc_date(", "calc_list(" ), $VALUE );
		$flag = FALSE;
		if ( preg_match( "/[\\+|\\-|\\*|\\/|,]+/i", $VALUE ) == 0 )
		{
			$flag = TRUE;
		}
		foreach ( $ELEMENT_QUERY as $ELEMENT )
		{
			$ETITLE1 = $ELEMENT->title;
			$nameArray = explode('_',$ELEMENT->name);
			$ITEM_ID1 = $nameArray[1];
			if ( $flag && $ETITLE1 == $VALUE )
			{
				$VALUE = "calc_getval('DATA_".$ITEM_ID1."')";
			}
			else
			{
				if ( strstr( $ETITLE1, "/" ) )
				{
					$ETITLE1 = str_replace( array( "/", "+", "-" ), array( "\\/", "\\+", "\\-" ), $ETITLE1 );
				}
				$pattern = "/([\\+|\\-|\\*|\\/|\\(|,]+)".$ETITLE1."([\\+|\\-|\\*|\\/|\\)|,]+)/i";
				$VALUE = preg_replace( $pattern, "\$1calc_getval('DATA_".$ITEM_ID1."')\$2", $VALUE );
				$pattern = "/([\\+|\\-|\\*|\\/|,]+)".$ETITLE1."\$/i";
				$VALUE = preg_replace( $pattern, "\$1calc_getval('DATA_".$ITEM_ID1."')", $VALUE );
				$pattern = "/^".$ETITLE1."([\\+|\\-|\\*|\\/|,]+)/i";
				$VALUE = preg_replace( $pattern, "calc_getval('DATA_".$ITEM_ID1."')\$1", $VALUE );
			}
		}
		return $VALUE;
	}
}

?>