页面生成组件-帮助文档

● sweet.pageWidget();通过丰富的参数配置项，实现页面的自动生成。

参数	是否必传	类型	默认值	作用
target	非必传	String，必须是css选择器	body	渲染的目标元素
id	非必传	string	空	pageWidget套件的id前缀标识。如传eg_pagewidget,则各组件生成的dom则分别为：页面组件：eg_pagewidget_portlet；模态框组件：eg_pagewidget_modal； formEle组件：eg_pagewidget_form；buttons组件：eg_pagewidget_buttons； datatable组件：eg_pagewidget_table；footer组件：eg_pagewidget_footer；
title	非必传	string	空	组件标题，支持html元素
tools	非必传	string	空	工具栏按钮，支持html元素
adorn	非必传	String( page/ modal/ none)	page	组件渲染方式。adorn值为 page时，组件渲染为 portlet布局页面；值为 modal时，组件渲染为模态框( modal模态框)；值为 none时，不加装饰，直接渲染页面。
attr	非必传	object	空	页面对象自定义属性,常用来自定义样式等
height	非必传	String	空	可以是 auto，或者px。
formEle	非必传	Array/String( 详见)	空	表单元素,与表单组件( formCreate)配置相同; 当formEle=="fuzzyQuery"时，组件会自动创建一个本地模糊检索的字段元素。
buttons	非必传	Array	空	操作按钮，依然是调用formcreate组件，其参数同formEle一致。
table	非必传	Object/ string	空	表格对象，与 datatable组件官方配置一致。其值为String类型时,直接解析为html字符串。
footer	非必传	Object	空	底部操作按钮，一般用于模态框中，即当adorn为modal时。其配置与formEle和buttons一致。
content	非必传	String	空	如果不需要pageWidget提供的组件布局，则可以通过content自定义传参；该参数，可以传入dom元素或其它字符串。

● 如下示例：

	  	objPageAA = sweet.pageWidget({
				"adorn": "modal",//渲染为模态框
		  		"id":"eg_pageWidget",//自定义套件id的前缀
		  		"attr:{//可以在此自定义属性
		  			//"style":"height:100%;border:none;",//可以在此自定义样式
		  			//"data-attr":"asdaf"//自定义属性
		  		},
				"title": "<i class='fa fa-th-large'></i> 基准岗位信息-添加",
				"formEle": [{
					"col": [{
						"colspan": 4,
						"eleType": "select",
						"label": "组织",
						"multi": "radio",
						"val": "e10d1ee4-0404-4a0b-85f1-a9d8f5180a6c",
						"attr": {
							"idAttr": {
								"name": "ORG_ID"
							},
							"textAttr": {
								"name": "ORG_NAME"
							}
						},
						"id": "ID", //真实值字段名
						"text": "NAME", //显示值字段名
						"item": getOrgs

					}, {
						"colspan": 4,
						"eleType": "input",
						"label": "姓名/编号",
						"attr": {
							"name": "EMP_NAME"
						}
					}, {
						"eleType": "button",
						"label": "查询",
						"icon": "fa fa-search",
						"attr": {
							"class": "wj_form_search"
						}
					}, {
						"eleType": "button",
						"label": "重置",
						"icon": "fa fa-undo",
						"attr": {
							"class": "wj_form_reset"
						}
					}]
				}],
				"footer": [{
					"eleType": "button",
					"label": "确定",
					"icon": "fa fa-save",
					"event": {
						"click": function () {
							objPageAASure();
						}
					}
				}, {
					"eleType": "button",
					"label": "取消",
					"icon": "fa fa-history",
					"attr": {
						"class": "wj_modal_close"
					}
				}],
				"table": { //datatable配置项,详见datatable帮助文档
					"searching": false,
					"ajax": ajaxRoot + "/m?xwl=hzpt/basePost/data/getEmps",
					"columns": [{ //checkbox
						"title": "<input type='checkbox' class='dt_checkbox' tabindex='-1' />",
						"data": null,
						"orderable": false,
						"className": "dt_check",
						"width": "30px",
						"render": function (data, type, row, meta) {
							return '<input type="checkbox" class="dt_checkbox" tabindex="-1" />';
						}
					}, {
						"title": "序号",
						"data": "RowNum",
						"className": "serial_number"
					}, {
						"title": "员工编号",
						"data": "EMP_CODE"

					}, {
						"title": "姓名",
						"data": "EMP_NAME"
					}]
				}
			})

● pageWidget中的adorn用于定义组件的修饰渲染方式。
● adorn值为page时，组件渲染为 portlet布局；
● 如下示例:

		sweet.pageWidget({
				"target":"#adorn_portlet_eg",
				//"adorn":"page",//默认为Page，可以省略
				"attr":{
					"style":"height:auto;"
				},
				"formEle": [{
					"col": [{
						"colspan": 4,
						"eleType": "select",
						"label": "组织",
						"multi": "radio",
						"val": "e10d1ee4-0404-4a0b-85f1-a9d8f5180a6c",
						"attr": {
							"idAttr": {
								"name": "ORG_ID"
							},
							"textAttr": {
								"name": "ORG_NAME"
							}
						},
						"item": [{"id":"baidu","text":"百度"},{"id":"tengxun","text":"腾讯"}]
					}, {
						"colspan": 4,
						"eleType": "input",
						"label": "姓名/编号",
						"attr": {
							"name": "EMP_NAME"
						}
					}, {
						"eleType": "button",
						"label": "查询",
						"icon": "fa fa-search",
						"attr": {
							"class": "wj_form_search"
						}
					}, {
						"eleType": "button",
						"label": "重置",
						"icon": "fa fa-undo",
						"attr": {
							"class": "wj_form_reset"
						}
					}]
				}]
		});

● adorn值为modal时，组件渲染为模态框( modal)；模态框的初始化渲染一般可以绑定在按钮的事件方法中哦。
● 如下示例:

  	<script>
			$("#adorn_modal_eg").click(function() {
						sweet.pageWidget({
							"adorn": "modal", //adorn值为modal时，组件渲染为模态框
							"formEle": [{
								"col": [{
									"colspan": 4,
									"eleType": "select",
									"label": "组织",
									"multi": "radio",
									"val": "e10d1ee4-0404-4a0b-85f1-a9d8f5180a6c",
									"attr": {
										"idAttr": {
											"name": "ORG_ID"
										},
										"textAttr": {
											"name": "ORG_NAME"
										}
									},
									"item": [{
										"id": "baidu",
										"text": "百度"
									}, {
										"id": "tengxun",
										"text": "腾讯"
									}]

								}, {
									"colspan": 4,
									"eleType": "input",
									"label": "姓名/编号",
									"attr": {
										"name": "EMP_NAME"
									}
								}, {
									"eleType": "button",
									"label": "查询",
									"icon": "fa fa-search",
									"attr": {
										"class": "wj_form_search"
									}
								}, {
									"eleType": "button",
									"label": "重置",
									"icon": "fa fa-undo",
									"attr": {
										"class": "wj_form_reset"
									}
								}]
							}]
						});
					});
      </script>

● adorn值为none或者false时，组件将不加修饰，直接渲染；
● 如下示例:

● pageWidget提供了自定义属性attr,可以给页面外围元素设置属性。
● attr常常用来定义页面容器的样式style。

				<script>
		sweet.pageWidget({
				"target":"#attr_portlet_eg",
				"attr":{
					"style":"height:auto;"//通过style设置高度自适应
				},
				"formEle": [{
					"col": [{
						"colspan": 4,
						"eleType": "select",
						"label": "组织",
						"multi": "radio",
						"val": "e10d1ee4-0404-4a0b-85f1-a9d8f5180a6c",
						"attr": {
							"idAttr": {
								"name": "ORG_ID"
							},
							"textAttr": {
								"name": "ORG_NAME"
							}
						},
						"item": [{"id":"baidu","text":"百度"},{"id":"tengxun","text":"腾讯"}]
					}, {
						"colspan": 4,
						"eleType": "input",
						"label": "姓名/编号",
						"attr": {
							"name": "EMP_NAME"
						}
					}, {
						"eleType": "button",
						"label": "查询",
						"icon": "fa fa-search",
						"attr": {
							"class": "wj_form_search"
						}
					}, {
						"eleType": "button",
						"label": "重置",
						"icon": "fa fa-undo",
						"attr": {
							"class": "wj_form_reset"
						}
					}]
				}]
		});
					</script>

● pageWidget提供了一个快捷设置高度的属性height。
● height其实是 attr属性的快捷写法
● height的值和css属性一致，可以是auto和px。

				<div class="wj_fl" id='height_eg' style="margin-top:10px;"></div>
				<script>
					sweet.pageWidget({
						"target": "#height_eg",
						//"attr":{"style":"height:auto"},//这两种写法等价哦
						"height":"auto" //设置高度自适应
					});
				</script>

● pageWidget组件中的表单元素formEle，实际上就是调用了formCreate表单组件。
● 因而，这里的formEle与formCreate中的formEle完全一致。点此参见详细文档哦。

参数	是否必传	类型			默认值	作用
target	必传	String类型，必须是css选择器			body	组件渲染的目标元素
formEle	非必传	Array Object	attr	object	空	行自定义属性
			overstep	Boolean	false	该行是否在更多展开显示
			col	Array Object	空	字段配置项

● 字段配置项col也完全和formCreate一致。

参数	是否必传	类型	默认值	作用
eleType	必传	String(input/select/date/eject/ checkbox/radio/textarea/button/other)	input	表单类型,input是文本类型，select是下拉类型， date是日期类型，eject是弹出表格类型, checkbox是复选框类型，radio是单选框类型， textarea是文本域类型，button是按钮类型，other是自定义元素。
colspan	非必传	Number	3	字段宽度所占网格数
icon	非必传	Boolean/String	false	值为ture，生成默认图标；值为class名，生成指定图标；值为false，无图标。
label	非必传	String	空	字段标题
placeholder	非必传	String	label	字段提示，默认为请输入label
val	非必传	String	空	字段默认值
attr	非必传	Object	空	自定义属性
visible	非必传	Boolean	true	字段是否显示
event	非必传	Object	空	为元素绑定事件，与jquery事件名完全一致

● 如下示例：

	   sweet.pageWidget({
			"formEle": [{
				"col": [{
					"eleType": "input",
					"label": "岗位编码",
					"attr": {
						"name": "POST_CODE"
					}
				}, {
					"eleType": "input",
					"label": "岗位名称",
					"attr": {
						"name": "POST_NAME"
					}
				}, {
					"eleType": "input",
					"label": "岗位描述",
					"attr": {
						"name": "POST_DESC"
					}
				}, {
					"eleType": "select",
					"label": "是否启用",
					"search": false,
					"attr": {
						"idAttr": {
							"name": "ENABLED_FLAG"
						},
						"textAttr": {
							"name": "ENABLED_FLAG_TEXT"
						}
					},
					"item": [{
						"id": "Y",
						"text": "是"
					}, {
						"id": "N",
						"text": "否"
					}]
				}]
			}, {
				"col": [{
					"eleType": "button",
					"label": "查询",
					"attr": {
						"class": "wj_form_search" //通过class名wj_form_search绑定表单查询事件
					}
				}, {
					"eleType": "button",
					"label": "重置",
					"icon": "fa fa-undo",
					"attr": {
						"class": "wj_form_reset" //通过class名wj_form_reset绑定表单重置事件
					}
				}]
			}]
		});

● pageWidget中的buttons是简化了的formEle.它只能设置一行,每个元素的eleType须设置为button.如下示例:

		sweet.pageWidget({
			"buttons": [{
				"eleType": "button",//将元素类型设置为button
				"label": "新增",//按钮标题
				"icon": "fa fa-plus"//按钮图标
			}, {
				"eleType": "button",
				"label": "修改",
				"icon": "fa fa-edit"
			}, {
				"eleType": "button",
				"label": "启用",
				"icon": "fa fa-play-circle"
			}, {
				"eleType": "button",
				"label": "停用",
				"icon": "fa fa-stop"
			}]
		});

● pageWidget中的table配置和datatable官方组件的配置一致，详见 datatable官方文档。
● table的初始化配置项中有几项我们拓展的参数，需要特别注意哦。

参数	是否必传	类型	默认值	作用
export	非必传	Boolean	true	其值为false时，表示禁用导出，否则为启用导出。
isChecked	非必传	Boolean/String(true/false/radio/multi)	true	其值默认为true，点击checkbox列多选，点击其它单元格为单选；其值为false时，禁用checkbox功能；其值为radio时，只能单选，且自动禁用全选功能；其值为multi时，点击任意单元格都是多选
editor	非必传	Boolean	false	其值为true时，启用可编辑表格。
thead	非必传	String	空	自定义表头元素(thead),必须传输html元素；多用于处理复杂表头。
tfoot	非必传	String	空	自定义表头元素(tfoot),必须传输html元素；多用于处理底部冻结合计行。

● pageWidget是对datatable表格的拓展封装，因而也可以当做是datatable单组件独调用。
● 如下示例:

				<div class="wj_fl" id="table_eg" style="margin-top:10px;"></div>
				<script>
					sweet.pageWidget({
						"target": "#table_eg",
						"adorn": "none",
						"attr": {
							"style": "height:auto;"
						},
						"table": { //datatable配置项,详见datatable帮助文档
							//"serverSide": true,//启用服务端分页和排序
							"export": false, //禁用导出
							"paging": false,
							"info": false,
							//"isChecked":"radio",//表格checkbox控制为单选
							//"editor":true,//启用可编辑表格
							"scrollX": "",
							"scrollY": "",
							"ajax": ajaxRoot + folderName + "/js/json/get-posts.asp",
							"columns": [{ //checkbox
								"title": "<input type='checkbox' class='dt_checkbox' tabindex='-1' />",
								"data": null,
								"orderable": false,
								"className": "dt_check",
								"width": "30px",
								"render": function(data, type, row, meta) {
									return '<input type="checkbox" class="dt_checkbox" tabindex="-1" />';
								}
							}, {
								"title": "序号",
								"data": "RowNum",
								"className": "serial_number"

							}, {
								"title": "岗位编码",
								"data": "POST_CODE"
							}, {
								"title": "岗位名称",
								"data": "POST_NAME"
							}, {
								"title": "岗位描述",
								"data": "POST_DESC"
							}, {
								"title": "是否启用",
								"data": "ENABLED_FLAG"
							}]
						}
					});
				</script>

● table可以为String类型，此时将直接被解析为html字符串。
● 如下示例:

				<div class="wj_fl" id="table_eg_string" style="margin-top:10px;"></div>
				<script>
					sweet.pageWidget({
						"target": "#table_eg_string",
						"adorn": "none",
						"attr": {//表格外围容器自适应高
							"style": "height:auto;"
						},
						"table": "<div class='wj_fl' style='width:200px;height:80px;background:#f23231;color:#fff;'>我是自定义元素哦</div>"
					});
				</script>

● pageWidget中的footer对象，一般用于模态底部，即当adorn为modal时。
● footer对象的配置与buttons一致。如下示例:

		sweet.pageWidget({
			"footer": [{
					"eleType": "button",
					"label": "确定",
					"icon": "fa fa-save",
					"event": {//这里可以绑定按钮的事件方法
						"click": function () {//click事件
							objPageASave();
						}
					}
				}, {
					"eleType": "button",
					"label": "取消",
					"icon": "fa fa-undo",
					"attr": {
						"class": "wj_modal_close"//通过class名wj_modal_close绑定为关闭模态框按钮
					}
				}]
		})

● pagewidget允许自定义组件元素。
● 当页面构成复杂，form和table组件已经不能满足需求时，你还可以使用content配置，自定义页面元素哦。如下示例：

				<div class="wj_fl" id="attr_eg" style="height:200px;"></div>
				<script>
					sweet.pageWidget({
						"target":"#attr_eg",
						"formEle":[{
							"col":[{
								"eleType": "input",
								"label": "岗位编码",
								"attr": {
									"name": "POST_CODE"
								}
							}, {
								"eleType": "input",
								"label": "岗位名称",
								"attr": {
									"name": "POST_NAME"
								}
							}]
						}],
						"content":"<div id='test_content' class='wj_fl' style='height:100px;background:#2ec7c9;text-align:center;color:#fff;margin-top:10px;'>我是自定义元素哦！</div>"
					});
				</script>

● sweet.pageWidget也是一个构造方法，在初始化完成以后，它会返回一些元素节点(jquery)对象。
● 在实际开发中，我们可以将组件对象打印出来，获取我们需要的信息。

		var egPageWidget = sweet.pageWidget({
			"adorn":"modal",
			"title":"",
			"formEle":...,//表单元素，此处省略代码n行
			"buttons":...,//按钮元素，此处省略代码n行
			"table":...,//datatable表格对象，此处省略代码n行
			"footer":...,//底部按钮，此处省略代码n行
		});
		egPageWidget.node;//页面外层元素节点对象
		
		egPageWidget.formEle;//表单元素对象
		egPageWidget.formEle.node;//表单元素节点
		egPageWidget.formEle.layWidth();//重置表单元素宽度
		
		egPageWidget.buttons;//按钮元素对象
		egPageWidget.buttons.node;//按钮元素节点
		
		egPageWidget.table;//datatable表格对象详见datatable官网
		egPageWidget.tableForm;//表格外围的form节点
		
		当adorn为modal时：
		egPageWidget.head;//模态框头部节点
		egPageWidget.body;//模态框主体节点
		egPageWidget.footer;模态框底部对象

● pageWidget组件也提供了一系列应用方法。
● datatable的api参见官方文档。

		var egPageWidget = sweet.pageWidget({
			"adorn":"modal",
			"title":"",
			"formEle":...,//表单元素，此处省略代码n行
			"buttons":...,//按钮元素，此处省略代码n行
			"table":...,//datatable表格对象，此处省略代码n行
			"footer":...,//底部按钮，此处省略代码n行
		});
		egPageWidget.show();//显示组件
		egPageWidget.hide();//隐藏组件
		egPageWidget.reset();//重置组件，多用于清空表单和验证信息以及操作记录等
		egPageWidget.destory();//销毁并移除组件

初始化配置项

主体配置

adorn修饰配置

attr自定义属性配置

height高度配置

formEle配置

buttons配置

table配置

footer配置

content配置

应用程序接口

应用对象

应用方法