初始化配置项

主体配置

adorn修饰配置

attr自定义属性配置

height高度配置

formEle配置

buttons配置

table配置

footer配置

content配置

应用程序接口

应用对象

应用方法

区别于传统的dom元素编写页面,Sweet Ui提供了一个js页面生成组件( pagewidget)。我们结合项目开发实践,把页面中的最常用的组件和布局抽象成为一个通用的对象。它集成了表单(formCreate)表格(DataTable)模态框(modalCreate)以及布局(portlet)等组件,配置项与这些组件一致。在项目综合页面的开发中,使用pageWidget可以极大的提升开发效率和规范。
初始化配置项
主体配置

● 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元素或其它字符串。

● 如下示例:

adorn配置

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

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

attr自定义属性配置

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

height高度配置

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

formEle配置

● 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事件名完全一致

● 如下示例:

buttons配置

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

table配置

● 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单组件独调用。
● 如下示例:

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

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

content配置

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

应用程序方法
应用对象

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

应用方法

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