jquery-ui

Form表单组件库，使用文档

克隆代码到本地

#clone
git clone https://github.com/moshang-xc/Reasy-UI.git
cd Reasy-UI

#安装依赖
npm install

#run debug server
npm run server

#生产环境
npm run build

目录结构

Reasy-UI
├── src
│   ├── demo
│   │   ├── data
│   │   │   └── data.json
│   │   ├── index.html
│   │   ├── main.scss
│   │   └── main.js
│   ├── lib
│   │   ├── css
│   │   │   ├── icon-font
│   │   │   └── components..scss
│   │   ├── BaseComponent.js
│   │   ├── reasy-ui.js
│   │   ├── FormCalendar.js
│   │   ├── FormCheckbox.js
│   │   ├── FormChecklist.js
│   │   ├── FormDropDownList.js
│   │   ├── FormInput.js
│   │   ├── FormMultiInput.js
│   │   ├── FormPercent.js
│   │   ├── FormRadioList.js
│   │   ├── FormSelect.js
│   │   ├── FormTab.js
│   │   ├── FormTable.js
│   │   ├── FormUpload.js
│   │   ├── ComponentManage.js
│   │   └── ModalDialog.js
├── gulpfile.js
└── package.json

项目中直接引用src/lib下的文件即可

组件使用说明书

---

原子组件：文本框，下拉框，开关，checkBoxList，radioList，日历 功能组件：自定义下拉框，消息提示框，弹出框，纯文本信息展示，table

注：所有组件兼容到IE8，jQuery版本使用1.X兼容IE8的版本

BaseComponent

所有的原子组件都继承自该基类，拥有该基类的所有属性和方法。支持自定义事件的绑定，解绑，实现自身的业务逻辑。以下为所有原子组件都拥有的属性和方法。

1. 公共配置参数

属性名称既可以通过标签属性配置也可以通过参数传递。当以标签属性形式配置时，需要用驼峰法配置属性名称（例如：dataKey 对应属性名称 data-key），同时在标签和参数里面配置相同属性时，标签属性的优先级较低

属性名称	描述	值类型	默认值
dataKey	组件类型(必填)	string	--
dataField	组件对应的数据字段	string	--
dataTitle	组件左侧显示标题(为空则表示不显示标题)	string	--
editable	是否可编辑，为false则自动加上disabled属性	bool	true
visible	是否可见	bool	true
ignore	是否忽略组件，true时则不进行该组件取值操作	bool	null
sync	setVisible()中是否需要将visible的值与ignore同步	bool	true
css	自定义样式皮肤	string	--
desClass	描述信息css类	string	--
needWrap	组件最外层是否需要容器包裹	bool	true
required	是否必填	bool	true
autoValidate	数据修改后是否自动调用数据校验	bool	true
autoChange	componentManager在setValue时，是否自动执行change事件	bool	true
defaultValue	默认值/初始值	取决于组件	""
dataValueType	组件的值类型	基础数据类型	--
description	组件尾部描述信息	string	--
changeCallBack	组件数据改变回调	function	--
validateCallBack	组件数据校验回调	function	--
validateCustom	自定义错误信息显示方式	function	--
renderedCallBack	组件渲染完成后回调	function	--
afterChangeCallBack	值改变回调	function	--

强调说明

1. dataValueType: 设置组件返回值类型，比如设置为num则返回整型数据，可选值有bool,float,num，默认不进行任何值类型的转换
2. visible：控制组件的显示和隐藏，设置为false，则该控件不会进行数据校验等操作，但是在componentManage中进行getValue()操作不会被忽略
3. ignore：组件是否被忽略，不控制组件的显示和隐藏状态，设置为false，则在componentManage中进行getValue()操作时会忽略该组件，不会进行取值数据提交操作，不设置该值的情况下默认与visible的值进行对应
4. sync: 为true时代表，将组建隐藏设置visible为false时，同步设置ignore为true，即组建隐藏就不进行数据校验，且不进行getValue()操作，该参数的设定只在setVisible()中生效，对其它地方的设置如setIgnore(),不会产生任何影响，
5. changeCallBack:组件值改变回调函数，只有数据校验成功的情况下才执行该回调，函数内部this指向当前组件实例
6. validateCallBack:数据校验回调函数,有错则返回出错语句，否则为校验成功，函数内部this指向当前组件实例
7. renderedCallBack:组件渲染完成后的回调函数，函数内部this指向当前组件实例
8. dataKey:以组件名称显示调用的情况下可不填
9. validateCustom(text):自定义错误信息提示方式，定义了该参数则不会显示默认的错误提示样式，参数为需要显示的错误信息，当text为空时不显示任何错误信息或者移除已显示的错误信息。

2. 公共方法

方法名称	描述	参数	返回值
getValue()	取值	--	--
setValue(v)	赋值	组件的值	--
setEditable(v)	编辑只读状态切换	true:可写，false：只读
setVisible(v)	可见切换	true:可见，false：隐藏	--
setIgnore(v)	忽略切换	true:忽略，false：不忽略	--
reset()	重置组件的值	--	--
show()	显示该组件	--	--
hide()	隐藏组件	--	--
toggle()	显示/隐藏	--	--
changeTitle()	显示/隐藏	--	--
valChange()	触发组件的数据校验onValidate，当校验成功后触发handleChangeEvents
--	--
onValidate	执行自定义数据校验逻辑和基础数据校验	--	--
handleChangeEvents	执行组件数据改变后的自定义逻辑	--	--
addValidateText(text)	显示错误信息	string	--
removeValidateText()	移除错误提示信息	--	--
bindValidateEvent(fc)	绑定自定义校验	function	--
bindChangeEvent(fc)	绑定自定义change事件	function	--
unBindEvent(key)	解绑事件	事件对应的key	--
其它方法	--	--

强调说明：

1. show，hide，toggle只做组件的显示隐藏处理，对组件的其它功能属性没有任何影响
2. bindValidateEvent,bindChangeEvent参数的返回值同上面属性的介绍

流程图

<<<<<<< HEAD

• 组件主逻辑

• 数据校验逻辑

=======

• 组件主逻辑

• 数据校验逻辑

f45badd3c52e7582e62bcafc24ebc37f4e5b8103

3. 调用形式（以FormInput为例）

• Rcomponent调用时传递参数

<div id="demo1" data-key="FormInput"></div>
...
$("#demo1").Rcomponent({
    dataTitle:'传递参数形式',
    dataField:'demo',
    ......
});

属性写在调用参数里面,推荐使用这种形式

• Rcomponent 标签属性传递参数

<div id="demo1" data-key="FormInput" data-field="name"  type="email"></div>
......
$("#demo1").Rcomponent();

属性全部写在标签属性里面，框架去解析所有的配置属性

• 组件名称显示调用

<div id="demo1" ></div>
...
$("#demo1").FormInput({
	dataKey:'FormInput',
	dataField:'input',
	placeholder:'XXXXX',
	......
});

通过组件名称形式条用，配置参数同第一种形式 以上三种调用形式为常用的调用形式，其它调用形式暂不列出，仅供框架内部调用

4. 公共属性方法使用demo

<!-- html模板 -->
<div id="tk" data-key="FormInput"></div>

• 无标题

$("#tk").Rcomponent({
	dataField:'username',
	placeholder:"普通文本测试"
});

• 有标题

$("#tk").Rcomponent({
	dataField:'username',
	dataTitle:"普通文本",
	placeholder:"普通文本测试"
});

• 有description描述信息

$("#tk").Rcomponent({
	dataField:'username',
	dataTitle:"普通文本",
	description:'介个是描述信息',
	placeholder:"普通文本测试"
});

• 自定义数据校验逻辑

$("#tk").Rcomponent({
	dataField:'username',
	dataTitle:"普通文本",
	placeholder:"请输入大于100的数字",
	type:"number",
	validateCallBack:function(){
		var value = this.getValue();
		if(value < 100){
			alert("请输入大于100的数字");
		}
	}
});

• 自定义change逻辑

$("#tk").Rcomponent({
	dataField:'username',
	dataTitle:"普通文本",
	placeholder:"随意",
	type:"text",
	changeCallBack:function(){
		var value = this.getValue();
		alert(value);
	}
});

• add自定义校验逻辑，change逻辑

var $tk = $("#tk").Rcomponent({
	dataField:'username',
	dataTitle:"普通文本",
	placeholder:"大于100",
	type:"number"
});

$tk.bindValidateEvent("change",function(){
	var value = this.getValue();
	if(value < 100){
		alert("请输入大于100的数字");
	}
}).bindChangeEvent("change",function(){
	alert("change啦！");
})

---

文本框组件

支持普通文本，密码文本，指定的文本校验格式，只读状态与编辑状态切换

<!-- html模板 -->
<input id="forminput" data-key="FormInput">

特有的属性，方法

属性名称	描述	值类型/范围	默认值
type	文本框类型	string	text
maxLength	输入框可输入长度限制	number	--
placeholder	提示语句	string	--
displayMode	显示类型	readonly，edit，readEdit	edit
removeSpace	getValue时是否移除首尾空格	bool	false
hasEyes	是否有眼睛图标显示，只有在type为password的情况下才有效	bool	false
defaultText	displayMode:readEidt时值为空显示的默认文本	string	--
dataOptions	数据校验格式例如：[{type:"num",args:[1,32]}]	object	--
switchCallBack	displayMode:readEidt时,切换显示模式回调函数,this指向当前组件实例	function	--
focusCallBack	文本框获取焦点回调,this指向当前组件实例	function	--

使用

1. 普通文本

$("#formInput1").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"普通文本",
	placeholder:"普通文本测试"
});

2. 密码输入框

$("#formInput2").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"密码文本",
	placeholder:"密码文本测试",
	type:"password"
});

3. 密码输入框 - hasEyes:true

$("#formInput3").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"密码文本",
	placeholder:"密码文本测试",
	type:"password",
	hasEyes:true
});

4. 只读模式

$("#formInput4").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"只读模式",
	displayMode:"readonly",
	defaultValue:"只读"
});

5. 切换模式, defaultText，switchCallBack

$("#formInput5").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"切换模式",
	placeholder:"切换模式测试",
	displayMode:"readEdit",
	required:false,
	defaultText:"未知数据",
	switchCallBack:function(){
	    console.log("切换显示模式为：" + this.displayMode);
	}
});

6. 数据校验模式

$("#formInput6").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"普通文本",
	placeholder:"请输入1-6位整数",
	dataOptions:[{type:"num",args:[1,6]}]
});

7. removeSpace，focusCallBack

$("#formInput7").Rcomponent({
	dataKey:"FormInput",
	dataField:'username',
	dataTitle:"去除首尾空格",
	placeholder:"removeSpace",
	removeSpace: true,
	focusCallBack:function(){
	    console.log("focus");
	    console.log(this.value);
	}
});

其它API遵循BaseComponent的API进行使用

---

下拉框组件(FormSelect)

支持下拉框选项的添加，删除，修改等操作

<!-- html模板 -->
<select id="formselect" data-key="FormSelect"></select>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
selectArray	下拉可选项	array或object	[]
hasNullItem	是否包含空选择项	bool	false
nullText	空选择项显示文本	string	--

方法名称	描述	参数说明
removeItem(key)	移除下拉项	string或array
addItem(key)	增加下拉选项	string,array或object

使用

1. 基础使用-selectArray为array

var $ts = $("#formselect1").Rcomponent({
	dataTitle:"selectArray为数组",
	dataField:"formselect1",
	defaultValue:"test2",
	selectArray:['test1', 'test2', 'test3', 'test4'],
	changeCallBack:function(){
		console.log(this.value);
	}
});

2. selectArray为object

$("#formselect2").Rcomponent({
	dataTitle:"selectArray为对象",
	dataField:"formselect2",
	defaultValue:3,
	selectArray:{1:'test1', 2:'test2', 3:'test3', 4:'test4'},
	changeCallBack:function(){
		console.log(this.value);
	}
});

3. removeItem

$ts.removeItem("test2");
$ts.removeItem(["test3","test4"]);

4. addIem

$ts.addItem("test5");
$ts.addItem("test6","test哈哈");
$ts.addItem({a:1,b:2});

其它API遵循BaseComponent的API进行使用

---

多文本输入框组件(FormMiltiInput)

根据不同的需求配置不同个数的文本输入框

<!-- html模板 -->
<div id="formMiltiInput" data-key="FormMiltiInput"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
text	文本输入框前的可写信息	array或object	[]
inputCount	文本输入框的个数	Number	0
inputCfg	各文本输入框的配置信息	Array	[]
joiner	各文本框之间的连接符	String	.

若配置inputCfg则inputCount的值会被inputCfg的length覆盖，无需再对inputCount的值进行配置，两个字段至少有一个是必填项，若只配置inputCount则显示默认的普通文本

使用

1. 基础使用

$("#formMultiInpit").Rcomponent({
    dataKey: "FormMultiInput",
    inputCount:4
});

2. text

$("#formMultiInpit1").Rcomponent({
    dataKey: "FormMultiInput",
    inputCount:2,
    text: "192.168.",
    validateCallBack:function(){
        console.log(1);
    },
    changeCallBack:function(){
        console.log(this.value);
    }
});

3. inputCount,joiner

$("#formMultiInpit2").Rcomponent({
    dataKey: "FormMultiInput",
    inputCount:4,
    defaultValue:"8545-2345-3445-5676",
    joiner:"-"
});

4. inputCfg

$("#formMultiInpit3").Rcomponent({
    dataKey: "FormMultiInput",
    inputCfg:[
        {dataValueType:'num', dataOptions: {type:"num",args:[192,255]}},
        {dataValueType:'num', dataOptions: {type:"num",args:[1,255]}},
        {dataValueType:'num', dataOptions: {type:"num",args:[1,255]}},
        {dataValueType:'num', dataOptions: {type:"num",args:[1,255]}}
    ]
});

其它API遵循BaseComponent的API进行使用

---

百分比组件(FormPercent)

拖拽进行百分值的设定

<!-- html模板 -->
<div id="formPercent" data-key="FormPercent"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
start	起始值	Number	0
end	结束值	Number	100
fixed	结果保留几位有效数字	Number	0

使用

1. 基础使用

 $("#formPercent").Rcomponent({
    dataKey: "FormPercent",
    start:100,
    end:220,
    fixed: 0
});

2. 设定默认值

$("#formPercent1").Rcomponent({
    dataKey: "FormPercent",
    end:220,
    fixed: 1,
    defaultValue: 200
});

3. 起始值大于结束值

$("#formPercent2").Rcomponent({
    dataKey: "FormPercent",
    start:160,
    end:0,
    fixed: 0
});

其它API遵循BaseComponent的API进行使用

---

上传组件(FormUpload)

文件上传组件

<!-- html模板 -->
<select id="formselect" data-key="FormSelect"></select>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
submitUrl	提交地址	String	--
showFileText	是否显示上传文件名框	bool	true
browseText	文件浏览按钮文本	String	浏览...
uploadText	上传按钮文本	String	上传
beforeUpload	上传文件前的操作	Function	--
success	上传文件返回成功的回调	Function	--

beforeUpload: 可进行格式检查之类的操作，若取消上传，返回false。通过this.value可取到上传文件的文件名,若有相应的数据需要提交，则返回对应的数据对象{}

使用

1. 基础使用

$("#formUpload").Rcomponent({
    dataKey: "FormUpload",
    submitUrl:"xxx",
    success: function(){
        alert("success");
    }
});

2. showFileText

$("#formUpload").Rcomponent({
    dataKey: "FormUpload",
    submitUrl:"xxx",
    showFileText: false
});

3. beforeUpload

$("#formUpload1").Rcomponent({
    dataKey: "FormUpload",
    submitUrl:"xxx",
    showFileText: false,
    uploadText: _("Upload File"),
    beforeUpload:function(){ return false;},
    success: function(){
        alert("success");
    }
});

其它API遵循BaseComponent的API进行使用

---

checkboxlist组件（FormCheckList）

多个checkbox排列显示，支持添加和删除项

<!-- html模板 -->
<div id="formchecklist" data-key="FormCheckList"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
selectArray	check列表	array或object	[]

方法名称	描述	参数说明
removeItem	移除可选项	string或array
addItem	增加可选项	string，array或object

使用

1. 基础使用-selectArray为array

var $tc = $("#formchecklist").Rcomponent({
	dataTitle:"formchecklist",
	dataField:"formchecklist",
	defaultValue:"test1",
	selectArray:['test1', 'test2', 'test3', 'test4'],
	changeCallBack:function(){
		console.log(this.value);
	}
});

2. selectArray为object

var $tc = $("#formchecklist").Rcomponent({
	dataTitle:"formchecklist",
	dataField:"formchecklist",
	defaultValue:"test1",
	selectArray:{test1:"test1", test2:"test2", test3:"test3", test4:"test4"},
	changeCallBack:function(){
		console.log(this.value);
	}
});

3. removeItem(key)

$tc.removeItem("test2");
$tc.removeItem(["test3","test4"]);

4. addItem(key)

$tc.addItem("test5");
$tc.addItem("test6","test哈哈");

其它API遵循BaseComponent的API进行使用

---

radiolist组件(FormRadioList)

支持下拉框选项的添加，删除，修改等操作

<!-- html模板 -->
<div id="formradiolist" data-key="FormRadioList"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
selectArray	check列表	array/object	[]

方法名称	描述	参数说明
removeItem	移除可选项	string或array
addItem	增加可选项	string，array或object

使用

1. 基础使用-selectArray为array

var $tr = $("#formradiolist").Rcomponent({
	dataTitle:"FormRadioList",
	dataField:"FormRadioList",
	defaultValue:"test1",
	selectArray:['test1', 'test2', 'test3', 'test4'],
	changeCallBack:function(){
		console.log(this.value);
	}
});

2. selectArray为object

var $tr = $("#formradiolist").Rcomponent({
	dataTitle:"FormRadioList",
	dataField:"FormRadioList",
	defaultValue:"test1",
	selectArray:{test1:"test1", test2:"test2", test3:"test3", test4:"test4"}
});

3. removeItem(key)

$tc.removeItem("test2");
$tc.removeItem(["test3","test4"]);

4. addItem(key, value)

$tc.addItem("test5");
$tc.addItem("test6","test哈哈");

其它API遵循BaseComponent的API进行使用

---

开关组件（FormCheckbox）

支持on，off两种状态

<!-- html模板 -->
<div id="formcheckbox" data-key="FormCheckbox"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
text	显示文本	string	null

使用

1. 基础使用--无文本

var $tcb = $("#formcheckbox").Rcomponent({
	dataTitle:"FormCheckbox",
	dataField:"formcheckbox",
	changeCallBack:function(){
		// $("#getvalue").toggle();
	}
});

2. 基础使用--有文本

var $tcb = $("#formcheckbox").Rcomponent({
	dataTitle:"FormCheckbox",
	dataField:"formcheckbox",
	text:"this is text",
	changeCallBack:function(){
		// $("#getvalue").toggle();
	}
});

其它API遵循BaseComponent的API进行使用

---

---

自定义下拉组件（FormDropDownList）

<!-- html模板 -->
<div id="formDropDownList" data-key="FormDropDownList"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
selectArray	可选配置项	array或object	null
dataOptions	数据校验配置项(customText不为空时才有效)	array或object	null
clickCallBack	下拉框展开收起回调	function	null
showSelfText	显示自定义的文本，与selectArray值无关，只做显示用	string	null
customText	自定义选项文本，若该字段不为空，则表示有自定义选项	string	null
focusCallBack	自定义情况下文本框获取焦点回调函数(customText不为空时才有效)	function	null

使用

1. selectArray

var $tcb = $("#formDropDownList").Rcomponent({
    dataValueType:"num",
    showSelfText:QOSTEXT[qosPolicy],
    customText:_("Manual (Unit: KB/s)"),
    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"},
    clickCallBack:function(){
        //移除定时器
        switchQosTimeout(false);
    },
    focusCallBack:function(){
        switchQosTimeout(false);
    },
    changeCallBack:function(){
    },
    renderedCallBack:function(){
    }
});

2. dataOptions

var $tcb = $("#formDropDownList").Rcomponent({
    dataValueType:"num",
    customText:_("Manual (Unit: KB/s)"),
    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"}
});

3. clickCallBack

var $tcb = $("#formDropDownList").Rcomponent({
    dataValueType:"num",
    customText:_("Manual (Unit: KB/s)"),
    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"},
    clickCallBack:function(){
        //移除定时器
        switchQosTimeout(false);
    },
    focusCallBack:function(){
        switchQosTimeout(false);
    }
});

4. showSelfText

var $tcb = $("#formDropDownList").Rcomponent({
    dataValueType:"num",
    showSelfText:QOSTEXT[qosPolicy],
    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"}
});

5. customText

var $tcb = $("#formDropDownList").Rcomponent({
    customText:_("Manual (Unit: KB/s)"),
    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"},
    clickCallBack:function(){
        //移除定时器
        switchQosTimeout(false);
    }
});

6. focusCallBack

var $tcb = $("#formDropDownList").Rcomponent({
    dataValueType:"num",
    customText:_("Manual (Unit: KB/s)"),
    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"},
    focusCallBack:function(){
        switchQosTimeout(false);
    }
});

其它API遵循BaseComponent的API进行使用

---

---

日历组件（FormCalendar）

<!-- html模板 -->
<input type="text" id="formCalendar" data-key="FormCalendar">

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
hasWeekday	是否显示星期	bool	false
startYear	日历开始时间	num	1970
endYear	日历结束时间	num	2037
scanAble	是否可输入	bool	true

使用

1. 基础使用

var $tcb = $("#formCalendar").Rcomponent({
	dataTitle:"日历组件",
	dataField:"formCalendar",
	hasWeekday:true
	}
});

其它API遵循BaseComponent的API进行使用

---

---

选项卡组件（FormTab）

<!-- html模板 -->
<div id="formTab" data-key="FormTab"></div>

特有配置属性，方法

属性名称	描述	值类型/范围	默认值
selectArray	按钮配置项	object或array	false

使用

1. 基础使用

var$("#formtab").Rcomponent({
    selectArray:{1:_("Online Devices"), 2:_("Blacklist")},
    dataValueType:"num",
    defaultValue:1, //默认选中的按钮项
    changeCallBack:function(){
        switch(this.value){
            case 1:{
                //xxx
            }break;
            case 2:{
                //xxx
            }break;
        }
    }
});

其它API遵循BaseComponent的API进行使用

---

功能组件

---

消息提示框组件 ($.FormMessage)

消息提示框，几秒钟后自动消失

配置属性参数

属性名称	描述	值类型/范围	默认值
message	消息内容	string	--
hideTime	消失淡出时间，毫秒	number	300
displayTime	展示时间，毫秒，为0表示不关闭	number	1000
opacity	消息框透明度	0~1	0.8
callback	消息框显示回调	function	--

可使用方法

方法名称	描述	参数
setMess(mess)	设置消息内容	mess:字符串
hide	隐藏消息提示框,隐藏后对应的node节点会在整个文档流中移除	--

使用

1. 基础使用

$.FormMessage({
    message:"消息",
    callback：function(){
    }
})

---

弹出框组件（$.modalDialog）

支持弹出框标题，内容，操作按钮，皮肤主题自定义

配置属性，方法

属性名称	描述	值类型/范围	默认值
title	消息框标题（必填）	string	--
content	消息体内容/iframe（必填）	string/$对象	--
isIframe	当content为iframe时，值必为true	bool	false
skin	皮肤样式，添加到最外层容器	string	--
height	高度	number	--
width	宽	number	--
autoClose	是否自动关闭	bool	false
timeout	autoClose为true时多少秒后自动关闭	num	--
closeCallBack	关闭弹出框回调	funciton	--
buttons	操作按钮	array([{}])	[]
	按钮参数
text	按钮文本值	string	--
theme	按钮主题	按钮主题	--
autoHide	点击按钮后是否关闭弹出窗	bool	true
callback	点击按钮的回调	t	edit

使用

1. 基础使用

$.modalDialog({
	title:'test',
	content:'<div style="height:200px;width:200px;"></div>',
	buttons:[
		{
			text:'ok'
		},
		{
			text:'cancel'
		}
	]
});

---

table组件（FormTable）

<!-- html模板 -->
<table id="FormTable"></table>

配置属性

属性名称	描述	值类型/范围	默认值
data	表格数据	array	--
requestUrl	数据请求地址	string	""
requestOpt	请求参数	object	{}
requestType	请求类型	get/post	get
dataTarget	数据项的子项,请求或给定数据对象的某个子属性	string	""
perArray	每页显示条数数组	array	[10, 20, 30, 50]
perNum	每页显示的数据数	number	10
pageIndex	当前起始页	number	0
showStyle	数据显示类型	1:分页，2：不分页	1
limit	最多显示的数据条数	Number	0(不限制)
filterProperty	过滤字段	array	[]
showIndex	显示序号	bool	false
key	主键字段，数据的唯一标识在启用CheckBox的时候需要用到，当调用getSelected()获取选中数据时，返回的就是主键值的数组	string	ID
sortFields	已排序字段规则优先级顺序	array	[]
sortOpt	排序字段对应的排序规则 1：升序，2：降序,例如{Age:1, Name:1}	object	{}
autoHighLight	高亮与查询字段匹配的字符	bool	false
sortFunction	自定义排序函数，若设置自定义函数则配置的排序字段排序失效	function
showCheckbox	显示checkbox	bool	false
showPageLeftBar	显示底部左侧显示页数切换栏	bool	true
showPageRightBar	显示分页按钮	bool	true
maxIndex	分页栏最多显示按钮数	number	7
updateCallback	数据更新回调，this指向当前组件实例对象	function	--
changePageNumCallBack	改变每页显示条数回调，this指向当前组件实例对象	function	--
beforeUpdate	数据更新前操作，可进行数据的二次处理，若有返回值，则返回新的数据，this指向当前组件实例对象	funciton	--
columns	配置列信息	array	--
columns配置属性
field	单元格对应的字段	string	--
title	列显示标题	string	--
width	列宽	number、百分比字符串	--
sortable	设置字段是否可以排序	bool	false
sortCallBack	自定义排序逻辑函数，默认在升序和降序间切换	function	null
format	格式化单元格数据，必须有返回值	function(data)	--
rendered	渲染完成后的回调（待更新）	function	--
actionColumn	按钮操作列	object	--
actionColumn配置属性
columnName	列名称	string	操作
actions	按钮数组	array	--
actions配置属性
type	按钮类型	edit,delete,other	--
text	按钮文本	string	--
icon	按钮图标	string	--
callback	点击回调	function	--

方法

方法名称	描述	参数说明
show()	显示组建	--
hide()	隐藏组件	--
getSelected()	获取选中的数据key对应的数组	--
goPage(index)	跳到制定的页	index从1开始
reLoad(data)	刷新表格数据	data可为空，为空时会根据填写的请求地址进行重新获取数据
getValue()	获取当前table过滤和排序后用于显示数据	--

使用

1. 基础使用

<!--html-->
<table id="formTablenormal">
	<thead>
		<tr>
			<th data-field="A">A</th>
			<th data-field="G">B</th>
			<th data-field="G2">C</th>
			<th data-field="D">D</th>
			<th data-field="G0">E</th>
		</tr>
	</thead>
</table>
<!--js-->
var tableData = [
	{A:'1', D:"D1",G:"G1", G2:"G21", G0:"GO1"},
	······
];

$("#formTablenormal").TablePage({
	data:tableData
});

2. 配置使用-配置信息加载 自定义列头显示,列宽设置

<!--html-->
<table id="formTable"></table>

$("#formTable").TablePage({
	data:tableData,
	columns:[
		{field:'G2',title:"G2--2"},
		{field:'G',width:"100px"},
		{field:'D'},
		{field:'A'}
	],
	perNum:10,
	pageIndex:0
});

3. 重写列数据值

$("#formTable").TablePage({
	data:tableData,
	columns:[
		{field:'G2',title:"G2 + cute", format:function(val){
			return val + "--cute";
		}},
		{field:'G'},
		{field:'D'},
		{field:'A'}
	],
	perNum:10,
	pageIndex:0
});

4. 显示复选框

$("#formTable").TablePage({
	data:tableData,
	showCheckbox:true,
	columns:[
		{field:'G2',title:"G2--2"},
		{field:'G'},
		{field:'D'},
		{field:'A'}
	],
	perNum:8,
	maxIndex:5,
	pageIndex:0
});

5. 显示操作按钮

$("#formTable").TablePage({
	data:tableData,
    showCheckbox:true,
	columns:[
		{field:'G2', title:"G2 + 哈哈", format:function(val){return "哈哈" + val;}},
		{field:'G'},
		{field:'D'},
		{field:'*_*', title:"", format:function(val){return "@_@";}}
	],
	actionColumn:{
	    columnName:"操作",
	    actions:[
	        {
	            type:"edit",//delete,other
	            text:"修改",
	            icon:"",
	            callback:function(index){
	                console.log(index);
	                tableData[index]["D"] = "修改后的值"
	            }
	        },
	        {
	            type:"delete",//delete,other
	            text:"删除",
	            icon:"",
	            callback:function(index){
	                console.log(index);
	            }
	        }
	    ]
	},
	perNum:10,
	pageIndex:3
});

6. FormTable排序

$("#formTable").FormTable({
    data:tableData,
    sortFields:["sysLogTime","ID"],// 定义属性
    sortOpt:{sysLogTime:2, ID:2}, // 按时间降序排列
    columns:[
        {field:"sysLogTime", title:_("Time"), width:170},
        {   
            field:"sysLogType", title:_("Type") , width:140,
            format:function(data){
                switch(data){
                	case 1:
                		return _("System Log");
                	case 2:
                		return _("Attack Log");
                	case 3:
                		return _("Error Log");
                }
            }
        },
        {field:"sysLogMsg", title:_("Log Content")}
    ],
    showIndex:true,
    updateCallback:function(){
        top.ResetHeight.resetHeight();
    },
    changePageNumCallBack:function () {
        top.ResetHeight.resetHeight();
    }
});

7. FormTable与其他组件混合使用

$("#customTable").FormTable({
    requestUrl:"/goform/module", //请求地址
    requestOpt:{getQosUserList:{type:1}, getQosPolicy:""}, //请求参数
    dataTarget:"getQosUserList", //table的data为请求到的数据的的getQosUserList属性值
    showStyle:2, //显示全部数据不分页
    filterProperty:["hostRemark#hostName", "hostIP", "hostMAC"],//数据过滤字段
    columns:[
        {   
            field:"hostRemark", 
            sortable:true, 
            title:_("Host Name"),
            format: function(data, field, rowData){
                var nodes = '<div class="hostNameWrap"><input data-id="' + rowData.ID + '" class="hostName" data-key="FormInput" default-value="' + data + '" data-hostname="' + rowData["hostName"] + '" type="text"/></div>' +
                            '</div>';
                return nodes;
            },
            sortCallBack:function(){
                var opt = {
                    field: sortList[curSortIndex%3],
                    sort:1
                };
                curSortIndex ++;
                return opt;
            },
            rendered:function(field){
                var _this = this;
                _this.$element.find(".hostName").each(function(){
                    var hostname = $(this).attr("data-hostname");
                    $(this).Rcomponent({
                        displayMode:"readEdit",
                        dataField:field,
                        defaultText: hostname || _("Unknown"),
                        required:false,
                        dataOptions:[{type:"hostName"},{type:"byteLen",args:[1, 63]}],
                        changeCallBack:function(){
                            //xxxx
                        },
                        afterChangeCallBack:function(){
                           //xxx
                        },
                        renderedCallBack:function () {
                            //xxx
                        }
                    });
                });
            }
        },
        {   field:"hostUploadSpeed", sortable:true, title:_("Upload Bandwidth"),
            format:function(data){
                return formatSpeed(data) + "/s";
            }
        },
        {   field:"hostDownloadSpeed", sortable:true, title:_("Download Bandwidth"),
            format:function(data){
                return formatSpeed(data) + "/s";
            }
        },
        {   field:"hostUploadLimit", title:_("Upload Limit"), format:function(data, field, rowData){
                return '<div class="UploadLimit" data-down="' + rowData["hostDownloadLimit"] + '" data-id="' + rowData.ID + '" data-field="'+field+'" default-value="'+data+'" data-key="FormDropDownList"></div>';
            },
            rendered:function(){
                this.$element.find(".UploadLimit").Rcomponent({
                    dataValueType:"num",
                    customText:_("Manual (Unit: KB/s)"),
                    showSelfText:QOSTEXT[qosPolicy],
                    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
                    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"},
                    clickCallBack:function(){
                        $("#allSettingModal").hide();
                    },
                    changeCallBack:function(){
                        //xxx
                    },
                    renderedCallBack:function(){
                        //xxx
                    }
                });
            }
        },
        {   
            field:"hostDownloadLimit", title:_("Download Limit"),
            format:function(data, field, rowData){
                return '<div class="DownloadLimit" data-up="' + rowData["hostUploadLimit"] + '" data-id="' + rowData.ID + '" data-field="'+field+'" default-value="'+data+'" data-key="FormDropDownList"></div>';
            },
            rendered:function(){
                this.$element.find(".DownloadLimit").Rcomponent({
                    dataValueType:"num",
                    customText:_("Manual (Unit: KB/s)"),
                    showSelfText:QOSTEXT[qosPolicy],
                    dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
                    selectArray:{0:_("No limit"), 32:"32 KB/s", 64:"64 KB/s", 128:"128 KB/s"},
                    clickCallBack:function(){
                        $("#allSettingModal").hide();
                    },
                    changeCallBack:function(){
                        //添加定时器
                    },
                    renderedCallBack:function(){
                        //xxx
                    }
                });
            }
        },
        {   
            field:"forbiden", title:_("Blacklist"),
            format:function(data, field, rowData){
                return '<button type="button" data-id="' + rowData["ID"] + '" class="forbidden btn btn-default" >' + _("Blacklist ") + '</button>';
            },
            rendered:function(){
                this.$element.off("click.sysInfo").on("click.sysInfo", ".forbidden", function(){
                //xxxxx
                });
            }
        }
    ],
    showPageLeftBar: false,
    updateCallback:function(){
        //重置高度
        top.resetIframeHeight();
    },
    beforeUpdate:function(){
        qosPolicy = qosUserSettingTable.returnData["getQosPolicy"]["qosPolicy"];
    }
});

其它API自行验证

---

ComponentManager

多个组件操作类，提供便捷的组件组群操作

配置参数

属性名称	描述	值类型/范围	默认值
requestUrl	数据请求地址	string	--
requestData	请求数据	object	--
submitUrl	数据提交地址	string	--
formCfg	组件配置项{key:value}	object，key为组件的dataField,value为组件对应的配置信息	--
container	组件群容器的选择器（必填）	string
beforeUpdate	数据更新前操作，this指向当前ComponentManager实例对象	function	true
afterUpdate	数据更新后的回调，this指向当前ComponentManager实例对象	function	--
beforeSubmit	提交数据前，进行一些列自定义数据校验操作，当然基础的数据校验会在这之前进行调用，失败返回false, 成功返回true或者二次处理后需要提交的数据，this指向当前ComponentManager实例对象	function	--
afterSubmit	数据提交后的回调，this指向当前ComponentManager实例对象	function	--
renderedCallBack	模块组件加载完成后的回调，可用于实现组件加载完后的自定义逻辑，this指向当前ComponentManager实例对象	function	--

方法

| 名称 | 描述 | 参数说明 | 返回值| | :-------- | :-----: | :----: | | getComponent(dataField) | 根据组件字段获取对应的组件实例对象 | dataField:组件字段名 | 组件实例化对象 | | reset() | 重置每个组件的值为默认值 | -- | -- | | submit(type) | 提交或者校验数据 | type: 1(提交数据),2(数据校验，只做数据校验)| 校验失败返回false，否则返回true | | updateComponents(data) | 更新组件的值-重置为上一次的值或者给定的值 | 组件群的值Object |-- | | getComponentByNode(node) | 根据标签节点获取对应的组件实例对象 | html标签节点 | 组件实例化对象 | | setValue(val, dataField) | 设置组件的值 |val:值， dataFiled:字段| -- | | getValue(dataField) | 获取组件的值 |dataField: 组件字段, 为空则返回所有组件的值| 根据组件的类型返回对应的值，若参数为空返回字段和值组成的对象 |

流程图

数据校验逻辑

使用

1. 基础使用

<!--html-->
<div id="text"></div>
    <div id="authUserModal" class="form-wrap">
        <input type="text" data-key="FormInput" data-field="ID" data-value-type="num" visible="false">
        <input type="text" data-key="FormInput" data-field="index" data-value-type="num" visible="false">
        <input type="text" data-key="FormInput" data-field="type" visible="false">
        <input type="text" data-key="FormInput" data-field="authUserID">
        <input type="text" data-key="FormInput" data-field="authUserPwd">
        <input type="text" data-key="FormInput" data-field="authUserRemark"> 
        <input type="text" data-key="FormInput" maxlength="3" data-field="authUserMaxCount">
        <input type="text" data-key="FormInput" maxlength="4" data-field="authUserConnectCount">
        <div data-key="FormDropDownList" data-field="uploadSpeed"></div>
        <div data-key="FormDropDownList" data-field="downLoadSpeed"></div>
    </div>
    
<!--js-->s
 authUserManage = $.componentManager({
    submitUrl:"/goform/module",
    container:"#authUserModal",
    formCfg:{
        authUserID:{dataTitle:_("Account:"), dataOptions:[{type:"pwd"},{type:"byteLen", args:[1,32]}]},
        authUserPwd:{dataTitle:_("Password:"), dataOptions:[{type:"pwd"},{type:"byteLen", args:[1,32]}]},
        authUserRemark:{dataTitle:_("Remark:"), placeholder:_("Optional"), removeSpace:true, required:false, dataOptions:[{type:"remarkTxt"},{type:"byteLen", args:[1,16]}]},
        authUserMaxCount:{dataTitle:_("Login User Number:"), dataValueType:"num", defaultValue:1, dataOptions:[{type:"num", args:[1,300]}]},
        authUserConnectCount:{dataTitle:_("Connection Number:"), dataValueType:"num",  defaultValue:600, dataOptions:[{type:"num", args:[1,9999]}]},
        uploadSpeed:{
            dataTitle:_("Upload Rate:"), dataValueType:"num", description:"KB/s",  
            defaultValue:0, customText:_("Manual"),
            dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
            selectArray:{0:_("No limit"), 32:"32", 64:"64", 128:"128"}
        },
        downLoadSpeed:{
            dataTitle:_("Download Rate:"),dataValueType:"num", description:"KB/s",
            defaultValue:0, customText:_("Manual"),
            dataOptions:[{type:"num", args:[0, MAX_SPEED]}],
            selectArray:{0:_("No limit"), 32:"32", 64:"64", 128:"128"}
        }
    },
    updateCallback:function(){
    },
    beforeSubmit:function(data){
        //增加数据校验
    },
    afterSubmit:function(data){
    }
});

---