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
所有的原子组件都继承自该基类,拥有该基类的所有属性和方法。支持自定义事件的绑定,解绑,实现自身的业务逻辑。以下为所有原子组件都拥有的属性和方法。
属性名称既可以通过标签属性配置也可以通过参数传递。当以标签属性形式配置时,需要用驼峰法配置属性名称(例如:
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 | -- |
强调说明
dataValueType
: 设置组件返回值类型,比如设置为num
则返回整型数据,可选值有bool
,float
,num
,默认不进行任何值类型的转换visible
:控制组件的显示和隐藏,设置为false
,则该控件不会进行数据校验等操作,但是在componentManage
中进行getValue()
操作不会被忽略ignore
:组件是否被忽略,不控制组件的显示和隐藏状态,设置为false
,则在componentManage
中进行getValue()
操作时会忽略该组件,不会进行取值数据提交操作,不设置该值的情况下默认与visible
的值进行对应sync
: 为true时代表,将组建隐藏设置visible
为false
时,同步设置ignore
为true
,即组建隐藏就不进行数据校验,且不进行getValue()
操作,该参数的设定只在setVisible()
中生效,对其它地方的设置如setIgnore()
,不会产生任何影响,changeCallBack
:组件值改变回调函数,只有数据校验成功的情况下才执行该回调,函数内部this指向当前组件实例validateCallBack
:数据校验回调函数,有错则返回出错语句,否则为校验成功,函数内部this指向当前组件实例renderedCallBack
:组件渲染完成后的回调函数,函数内部this指向当前组件实例dataKey
:以组件名称显示调用的情况下可不填validateCustom(text)
:自定义错误信息提示方式,定义了该参数则不会显示默认的错误提示样式,参数为需要显示的错误信息,当text
为空时不显示任何错误信息或者移除已显示的错误信息。
方法名称 | 描述 | 参数 | 返回值 |
---|---|---|---|
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 | -- |
其它方法 | -- | -- |
强调说明:
- show,hide,toggle只做组件的显示隐藏处理,对组件的其它功能属性没有任何影响
- bindValidateEvent,bindChangeEvent参数的返回值同上面属性的介绍
<<<<<<< HEAD
- 组件主逻辑
- 数据校验逻辑
=======
- 组件主逻辑
- 数据校验逻辑
- 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',
......
});
通过组件名称形式条用,配置参数同第一种形式 以上三种调用形式为常用的调用形式,其它调用形式暂不列出,仅供框架内部调用
<!-- 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 | -- |
$("#formInput1").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"普通文本",
placeholder:"普通文本测试"
});
$("#formInput2").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"密码文本",
placeholder:"密码文本测试",
type:"password"
});
$("#formInput3").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"密码文本",
placeholder:"密码文本测试",
type:"password",
hasEyes:true
});
$("#formInput4").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"只读模式",
displayMode:"readonly",
defaultValue:"只读"
});
$("#formInput5").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"切换模式",
placeholder:"切换模式测试",
displayMode:"readEdit",
required:false,
defaultText:"未知数据",
switchCallBack:function(){
console.log("切换显示模式为:" + this.displayMode);
}
});
$("#formInput6").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"普通文本",
placeholder:"请输入1-6位整数",
dataOptions:[{type:"num",args:[1,6]}]
});
$("#formInput7").Rcomponent({
dataKey:"FormInput",
dataField:'username',
dataTitle:"去除首尾空格",
placeholder:"removeSpace",
removeSpace: true,
focusCallBack:function(){
console.log("focus");
console.log(this.value);
}
});
其它API遵循BaseComponent的API进行使用
支持下拉框选项的添加,删除,修改等操作
<!-- 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 |
var $ts = $("#formselect1").Rcomponent({
dataTitle:"selectArray为数组",
dataField:"formselect1",
defaultValue:"test2",
selectArray:['test1', 'test2', 'test3', 'test4'],
changeCallBack:function(){
console.log(this.value);
}
});
$("#formselect2").Rcomponent({
dataTitle:"selectArray为对象",
dataField:"formselect2",
defaultValue:3,
selectArray:{1:'test1', 2:'test2', 3:'test3', 4:'test4'},
changeCallBack:function(){
console.log(this.value);
}
});
$ts.removeItem("test2");
$ts.removeItem(["test3","test4"]);
$ts.addItem("test5");
$ts.addItem("test6","test哈哈");
$ts.addItem({a:1,b:2});
其它API遵循BaseComponent的API进行使用
根据不同的需求配置不同个数的文本输入框
<!-- html模板 -->
<div id="formMiltiInput" data-key="FormMiltiInput"></div>
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
text | 文本输入框前的可写信息 | array或object | [] |
inputCount | 文本输入框的个数 | Number | 0 |
inputCfg | 各文本输入框的配置信息 | Array | [] |
joiner | 各文本框之间的连接符 | String | . |
若配置inputCfg则inputCount的值会被inputCfg的length覆盖,无需再对inputCount的值进行配置,两个字段至少有一个是必填项,若只配置inputCount则显示默认的普通文本
$("#formMultiInpit").Rcomponent({
dataKey: "FormMultiInput",
inputCount:4
});
$("#formMultiInpit1").Rcomponent({
dataKey: "FormMultiInput",
inputCount:2,
text: "192.168.",
validateCallBack:function(){
console.log(1);
},
changeCallBack:function(){
console.log(this.value);
}
});
$("#formMultiInpit2").Rcomponent({
dataKey: "FormMultiInput",
inputCount:4,
defaultValue:"8545-2345-3445-5676",
joiner:"-"
});
$("#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进行使用
拖拽进行百分值的设定
<!-- html模板 -->
<div id="formPercent" data-key="FormPercent"></div>
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
start | 起始值 | Number | 0 |
end | 结束值 | Number | 100 |
fixed | 结果保留几位有效数字 | Number | 0 |
$("#formPercent").Rcomponent({
dataKey: "FormPercent",
start:100,
end:220,
fixed: 0
});
$("#formPercent1").Rcomponent({
dataKey: "FormPercent",
end:220,
fixed: 1,
defaultValue: 200
});
$("#formPercent2").Rcomponent({
dataKey: "FormPercent",
start:160,
end:0,
fixed: 0
});
其它API遵循BaseComponent的API进行使用
文件上传组件
<!-- 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可取到上传文件的文件名,若有相应的数据需要提交,则返回对应的数据对象{}
$("#formUpload").Rcomponent({
dataKey: "FormUpload",
submitUrl:"xxx",
success: function(){
alert("success");
}
});
$("#formUpload").Rcomponent({
dataKey: "FormUpload",
submitUrl:"xxx",
showFileText: false
});
$("#formUpload1").Rcomponent({
dataKey: "FormUpload",
submitUrl:"xxx",
showFileText: false,
uploadText: _("Upload File"),
beforeUpload:function(){ return false;},
success: function(){
alert("success");
}
});
其它API遵循BaseComponent的API进行使用
多个checkbox排列显示,支持添加和删除项
<!-- html模板 -->
<div id="formchecklist" data-key="FormCheckList"></div>
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
selectArray | check列表 | array或object | [] |
方法名称 | 描述 | 参数说明 |
---|---|---|
removeItem | 移除可选项 | string或array |
addItem | 增加可选项 | string,array或object |
var $tc = $("#formchecklist").Rcomponent({
dataTitle:"formchecklist",
dataField:"formchecklist",
defaultValue:"test1",
selectArray:['test1', 'test2', 'test3', 'test4'],
changeCallBack:function(){
console.log(this.value);
}
});
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);
}
});
$tc.removeItem("test2");
$tc.removeItem(["test3","test4"]);
$tc.addItem("test5");
$tc.addItem("test6","test哈哈");
其它API遵循BaseComponent的API进行使用
支持下拉框选项的添加,删除,修改等操作
<!-- html模板 -->
<div id="formradiolist" data-key="FormRadioList"></div>
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
selectArray | check列表 | array/object | [] |
方法名称 | 描述 | 参数说明 |
---|---|---|
removeItem | 移除可选项 | string或array |
addItem | 增加可选项 | string,array或object |
var $tr = $("#formradiolist").Rcomponent({
dataTitle:"FormRadioList",
dataField:"FormRadioList",
defaultValue:"test1",
selectArray:['test1', 'test2', 'test3', 'test4'],
changeCallBack:function(){
console.log(this.value);
}
});
var $tr = $("#formradiolist").Rcomponent({
dataTitle:"FormRadioList",
dataField:"FormRadioList",
defaultValue:"test1",
selectArray:{test1:"test1", test2:"test2", test3:"test3", test4:"test4"}
});
$tc.removeItem("test2");
$tc.removeItem(["test3","test4"]);
$tc.addItem("test5");
$tc.addItem("test6","test哈哈");
其它API遵循BaseComponent的API进行使用
支持on,off两种状态
<!-- html模板 -->
<div id="formcheckbox" data-key="FormCheckbox"></div>
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
text | 显示文本 | string | null |
var $tcb = $("#formcheckbox").Rcomponent({
dataTitle:"FormCheckbox",
dataField:"formcheckbox",
changeCallBack:function(){
// $("#getvalue").toggle();
}
});
var $tcb = $("#formcheckbox").Rcomponent({
dataTitle:"FormCheckbox",
dataField:"formcheckbox",
text:"this is text",
changeCallBack:function(){
// $("#getvalue").toggle();
}
});
其它API遵循BaseComponent的API进行使用
<!-- 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 |
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(){
}
});
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"}
});
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);
}
});
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"}
});
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);
}
});
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进行使用
<!-- html模板 -->
<input type="text" id="formCalendar" data-key="FormCalendar">
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
hasWeekday | 是否显示星期 | bool | false |
startYear | 日历开始时间 | num | 1970 |
endYear | 日历结束时间 | num | 2037 |
scanAble | 是否可输入 | bool | true |
var $tcb = $("#formCalendar").Rcomponent({
dataTitle:"日历组件",
dataField:"formCalendar",
hasWeekday:true
}
});
其它API遵循BaseComponent的API进行使用
<!-- html模板 -->
<div id="formTab" data-key="FormTab"></div>
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
selectArray | 按钮配置项 | object或array | false |
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进行使用
消息提示框,几秒钟后自动消失
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
message | 消息内容 | string | -- |
hideTime | 消失淡出时间,毫秒 | number | 300 |
displayTime | 展示时间,毫秒,为0表示不关闭 | number | 1000 |
opacity | 消息框透明度 | 0~1 | 0.8 |
callback | 消息框显示回调 | function | -- |
方法名称 | 描述 | 参数 |
---|---|---|
setMess(mess) | 设置消息内容 | mess:字符串 |
hide | 隐藏消息提示框,隐藏后对应的node节点会在整个文档流中移除 | -- |
$.FormMessage({
message:"消息",
callback:function(){
}
})
支持弹出框标题,内容,操作按钮,皮肤主题自定义
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
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 |
$.modalDialog({
title:'test',
content:'<div style="height:200px;width:200px;"></div>',
buttons:[
{
text:'ok'
},
{
text:'cancel'
}
]
});
<!-- 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过滤和排序后用于显示数据 | -- |
<!--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
});
<!--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
});
$("#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
});
$("#formTable").TablePage({
data:tableData,
showCheckbox:true,
columns:[
{field:'G2',title:"G2--2"},
{field:'G'},
{field:'D'},
{field:'A'}
],
perNum:8,
maxIndex:5,
pageIndex:0
});
$("#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
});
$("#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();
}
});
$("#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自行验证
多个组件操作类,提供便捷的组件组群操作
属性名称 | 描述 | 值类型/范围 | 默认值 |
---|---|---|---|
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: 组件字段, 为空则返回所有组件的值| 根据组件的类型返回对应的值,若参数为空返回字段和值组成的对象 |
数据校验逻辑
<!--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){
}
});