{"id":23419735,"url":"https://github.com/moshang-ax/jquery-ui","last_synced_at":"2026-02-28T05:02:52.151Z","repository":{"id":98861385,"uuid":"116895239","full_name":"moshang-ax/jquery-ui","owner":"moshang-ax","description":"jQuery Form表单组件库","archived":false,"fork":false,"pushed_at":"2025-03-02T03:25:06.000Z","size":666,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-13T05:57:56.916Z","etag":null,"topics":["jquery","jquery-components","jquery-library","jquery-ui"],"latest_commit_sha":null,"homepage":"https://moshang-ax.github.io/jquery-ui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moshang-ax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-01-10T02:08:29.000Z","updated_at":"2025-03-02T03:25:10.000Z","dependencies_parsed_at":"2025-07-13T05:51:04.840Z","dependency_job_id":null,"html_url":"https://github.com/moshang-ax/jquery-ui","commit_stats":null,"previous_names":["aras-ax/jquery-ui","moshang-ax/jquery-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/moshang-ax/jquery-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshang-ax%2Fjquery-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshang-ax%2Fjquery-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshang-ax%2Fjquery-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshang-ax%2Fjquery-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moshang-ax","download_url":"https://codeload.github.com/moshang-ax/jquery-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshang-ax%2Fjquery-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29925490,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","jquery-components","jquery-library","jquery-ui"],"created_at":"2024-12-23T01:43:45.034Z","updated_at":"2026-02-28T05:02:52.138Z","avatar_url":"https://github.com/moshang-ax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-ui\r\nForm表单组件库，[使用文档](https://moshang-ax.github.io/jquery-ui/)\r\n\r\n## 克隆代码到本地\r\n\r\n```\r\n#clone\r\ngit clone https://github.com/moshang-xc/Reasy-UI.git\r\ncd Reasy-UI\r\n\r\n#安装依赖\r\nnpm install\r\n\r\n#run debug server\r\nnpm run server\r\n\r\n#生产环境\r\nnpm run build\r\n\r\n```\r\n\r\n## 目录结构 ##\r\n\r\n```\r\nReasy-UI\r\n├── src\r\n│   ├── demo\r\n│   │   ├── data\r\n│   │   │   └── data.json\r\n│   │   ├── index.html\r\n│   │   ├── main.scss\r\n│   │   └── main.js\r\n│   ├── lib\r\n│   │   ├── css\r\n│   │   │   ├── icon-font\r\n│   │   │   └── components..scss\r\n│   │   ├── BaseComponent.js\r\n│   │   ├── reasy-ui.js\r\n│   │   ├── FormCalendar.js\r\n│   │   ├── FormCheckbox.js\r\n│   │   ├── FormChecklist.js\r\n│   │   ├── FormDropDownList.js\r\n│   │   ├── FormInput.js\r\n│   │   ├── FormMultiInput.js\r\n│   │   ├── FormPercent.js\r\n│   │   ├── FormRadioList.js\r\n│   │   ├── FormSelect.js\r\n│   │   ├── FormTab.js\r\n│   │   ├── FormTable.js\r\n│   │   ├── FormUpload.js\r\n│   │   ├── ComponentManage.js\r\n│   │   └── ModalDialog.js\r\n├── gulpfile.js\r\n└── package.json\r\n```\r\n\r\n\u003e 项目中直接引用`src/lib`下的文件即可\r\n\r\n\r\n# 组件使用说明书\r\n\r\n------\r\n\r\n\u003e 原子组件：文本框，下拉框，开关，checkBoxList，radioList，日历\r\n\u003e 功能组件：自定义下拉框，消息提示框，弹出框，纯文本信息展示，table\r\n\r\n#### 注：所有组件兼容到IE8，jQuery版本使用1.X兼容IE8的版本\r\n\r\n# BaseComponent\r\n\r\n所有的原子组件都继承自该基类，拥有该基类的所有属性和方法。支持自定义事件的绑定，解绑，实现自身的业务逻辑。以下为所有原子组件都拥有的属性和方法。\r\n\r\n## 1. 公共配置参数\r\n\u003e属性名称既可以通过标签属性配置也可以通过参数传递。当以标签属性形式配置时，需要用驼峰法配置属性名称（例如：`dataKey` 对应属性名称 `data-key`），同时在标签和参数里面配置相同属性时，标签属性的优先级较低\r\n\r\n| 属性名称    | 描述     | 值类型  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| dataKey    | 组件类型(必填) |  string  | -- |\r\n| dataField   | 组件对应的数据字段 |  string  | -- |\r\n| dataTitle   | 组件左侧显示标题(为空则表示不显示标题) |  string  | -- |\r\n| editable    | 是否可编辑，为false则自动加上disabled属性 |  bool  | true |\r\n| visible     | 是否可见   |  bool  | true |\r\n| ignore      | 是否忽略组件，true时则不进行该组件取值操作|  bool  | null |\r\n| sync | setVisible()中是否需要将visible的值与ignore同步 | bool | true |\r\n| css    | 自定义样式皮肤 |  string  | -- |\r\n| desClass | 描述信息css类 |  string  | -- |\r\n| needWrap    | 组件最外层是否需要容器包裹 |  bool  | true |\r\n| required    | 是否必填 |  bool  | true |\r\n| autoValidate| 数据修改后是否自动调用数据校验 | bool | true |\r\n| autoChange| componentManager在setValue时，是否自动执行change事件 | bool | true |\r\n| defaultValue    | 默认值/初始值 |  取决于组件  | \"\" |\r\n| dataValueType| 组件的值类型 | 基础数据类型 |--|\r\n| description    | 组件尾部描述信息 |  string  | -- |\r\n| changeCallBack    | 组件数据改变回调 |  function  | -- |\r\n| validateCallBack    | 组件数据校验回调 |  function  | -- |\r\n| validateCustom |自定义错误信息显示方式| function | -- |\r\n| renderedCallBack|组件渲染完成后回调| function | -- |\r\n| afterChangeCallBack| 值改变回调 | function | -- |\r\n\r\n\u003e 强调说明\r\n\u003e 1. `dataValueType`: 设置组件返回值类型，比如设置为`num`则返回整型数据，可选值有`bool`,`float`,`num`，默认不进行任何值类型的转换\r\n\u003e 2. `visible`：控制组件的显示和隐藏，设置为`false`，则该控件不会进行数据校验等操作，但是在`componentManage`中进行`getValue()`操作不会被忽略\r\n\u003e 3. `ignore`：组件是否被忽略，不控制组件的显示和隐藏状态，设置为`false`，则在`componentManage`中进行`getValue()`操作时会忽略该组件，不会进行取值数据提交操作，不设置该值的情况下默认与`visible`的值进行对应\r\n\u003e 4. `sync`: 为true时代表，将组建隐藏设置`visible`为`false`时，同步设置`ignore`为`true`，即组建隐藏就不进行数据校验，且不进行`getValue()`操作，该参数的设定只在`setVisible()`中生效，对其它地方的设置如`setIgnore()`,不会产生任何影响，\r\n\u003e 5. `changeCallBack`:组件值改变回调函数，只有数据校验成功的情况下才执行该回调，函数内部this指向当前组件实例\r\n\u003e 6. `validateCallBack`:数据校验回调函数,有错则返回出错语句，否则为校验成功，函数内部this指向当前组件实例\r\n\u003e 7. `renderedCallBack`:组件渲染完成后的回调函数，函数内部this指向当前组件实例\r\n\u003e 8. `dataKey`:以组件名称显示调用的情况下可不填\r\n\u003e 9. `validateCustom(text)`:自定义错误信息提示方式，定义了该参数则不会显示默认的错误提示样式，参数为需要显示的错误信息，当`text`为空时不显示任何错误信息或者移除已显示的错误信息。\r\n\r\n## 2. 公共方法\r\n| 方法名称   | 描述   |  参数| 返回值  |\r\n| :--------   | :-----:  | :----:  |  :----:  | \r\n| getValue() | 取值 |  --  | -- |\r\n| setValue(v) | 赋值 | 组件的值 | -- |\r\n| setEditable(v)| 编辑只读状态切换 | true:可写，false：只读 | |\r\n| setVisible(v) | 可见切换 | true:可见，false：隐藏 | -- |\r\n| setIgnore(v) | 忽略切换 | true:忽略，false：不忽略 | -- |\r\n| reset() | 重置组件的值 | -- | -- |\r\n| show() | 显示该组件 | -- | -- |\r\n| hide() | 隐藏组件 | -- | -- |\r\n| toggle() | 显示/隐藏 | -- | -- |\r\n| changeTitle() | 显示/隐藏 | -- | -- |\r\n| valChange() | 触发组件的数据校验onValidate，当校验成功后触发handleChangeEvents\r\n | -- | -- |\r\n | onValidate | 执行自定义数据校验逻辑和基础数据校验 | -- | -- |\r\n | handleChangeEvents | 执行组件数据改变后的自定义逻辑 | -- | -- |\r\n| addValidateText(text) | 显示错误信息 | string | -- |\r\n| removeValidateText() | 移除错误提示信息| -- | -- |\r\n| bindValidateEvent(fc) | 绑定自定义校验   | function | -- | \r\n| bindChangeEvent(fc) | 绑定自定义`change`事件 | function | -- | \r\n| unBindEvent(key) | 解绑事件 | 事件对应的key | -- |\r\n| 其它方法    | -- |  --  | \r\n\u003e 强调说明：\r\n\u003e 1. show，hide，toggle只做组件的显示隐藏处理，对组件的其它功能属性没有任何影响\r\n\u003e 2. bindValidateEvent,bindChangeEvent参数的返回值同上面属性的介绍\r\n\r\n### 流程图\r\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c HEAD\r\n* 组件主逻辑\r\n \r\n![组件主逻辑](https://github.com/moshang-xc/gitskills/blob/master/share/reasy-ui1.jpg)\r\n\r\n* 数据校验逻辑\r\n \r\n=======\r\n*  组件主逻辑\r\n\r\n![组件主逻辑](https://github.com/moshang-xc/gitskills/blob/master/share/reasy-ui1.jpg)\r\n\r\n*  数据校验逻辑\r\n\r\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e f45badd3c52e7582e62bcafc24ebc37f4e5b8103\r\n![数据校验逻辑](https://github.com/moshang-xc/gitskills/blob/master/share/reasy-ui2.jpg)\r\n\r\n## 3. 调用形式（以FormInput为例）\r\n\r\n* Rcomponent调用时传递参数\r\n```javascript\r\n\u003cdiv id=\"demo1\" data-key=\"FormInput\"\u003e\u003c/div\u003e\r\n...\r\n$(\"#demo1\").Rcomponent({\r\n    dataTitle:'传递参数形式',\r\n    dataField:'demo',\r\n    ......\r\n});\r\n```\r\n\u003e 属性写在调用参数里面,推荐使用这种形式\r\n\r\n* Rcomponent 标签属性传递参数\r\n```javascript\r\n\u003cdiv id=\"demo1\" data-key=\"FormInput\" data-field=\"name\"  type=\"email\"\u003e\u003c/div\u003e\r\n......\r\n$(\"#demo1\").Rcomponent();\r\n```\r\n\u003e 属性全部写在标签属性里面，框架去解析所有的配置属性\r\n\r\n* 组件名称显示调用\r\n```javascript\r\n\u003cdiv id=\"demo1\" \u003e\u003c/div\u003e\r\n...\r\n$(\"#demo1\").FormInput({\r\n\tdataKey:'FormInput',\r\n\tdataField:'input',\r\n\tplaceholder:'XXXXX',\r\n\t......\r\n});\r\n```\r\n\u003e通过组件名称形式条用，配置参数同第一种形式\r\n\u003e 以上三种调用形式为常用的调用形式，其它调用形式暂不列出，仅供框架内部调用\r\n\r\n## 4. 公共属性方法使用demo\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"tk\" data-key=\"FormInput\"\u003e\u003c/div\u003e\r\n```\r\n* 无标题\r\n```\r\n$(\"#tk\").Rcomponent({\r\n\tdataField:'username',\r\n\tplaceholder:\"普通文本测试\"\r\n});\r\n```\r\n* 有标题\r\n```\r\n$(\"#tk\").Rcomponent({\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tplaceholder:\"普通文本测试\"\r\n});\r\n```\r\n* 有description描述信息\r\n```\r\n$(\"#tk\").Rcomponent({\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tdescription:'介个是描述信息',\r\n\tplaceholder:\"普通文本测试\"\r\n});\r\n```\r\n* 自定义数据校验逻辑\r\n```\r\n$(\"#tk\").Rcomponent({\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tplaceholder:\"请输入大于100的数字\",\r\n\ttype:\"number\",\r\n\tvalidateCallBack:function(){\r\n\t\tvar value = this.getValue();\r\n\t\tif(value \u003c 100){\r\n\t\t\talert(\"请输入大于100的数字\");\r\n\t\t}\r\n\t}\r\n});\r\n```\r\n* 自定义change逻辑\r\n```\r\n$(\"#tk\").Rcomponent({\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tplaceholder:\"随意\",\r\n\ttype:\"text\",\r\n\tchangeCallBack:function(){\r\n\t\tvar value = this.getValue();\r\n\t\talert(value);\r\n\t}\r\n});\r\n```\r\n* add自定义校验逻辑，change逻辑\r\n```\r\nvar $tk = $(\"#tk\").Rcomponent({\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tplaceholder:\"大于100\",\r\n\ttype:\"number\"\r\n});\r\n\r\n$tk.bindValidateEvent(\"change\",function(){\r\n\tvar value = this.getValue();\r\n\tif(value \u003c 100){\r\n\t\talert(\"请输入大于100的数字\");\r\n\t}\r\n}).bindChangeEvent(\"change\",function(){\r\n\talert(\"change啦！\");\r\n})\r\n```\r\n\r\n---\r\n# 文本框组件\r\n支持普通文本，密码文本，指定的文本校验格式，只读状态与编辑状态切换\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cinput id=\"forminput\" data-key=\"FormInput\"\u003e\r\n```\r\n##  特有的属性，方法\r\n\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| type | 文本框类型| string | text |\r\n| maxLength | 输入框可输入长度限制 | number | -- |\r\n| placeholder | 提示语句| string | -- |\r\n| displayMode | 显示类型 |  readonly，edit，readEdit  | edit |\r\n| removeSpace | getValue时是否移除首尾空格 |  bool  | false |\r\n| hasEyes     |   是否有眼睛图标显示，只有在type为password的情况下才有效 |  bool  | false |\r\n| defaultText | displayMode:readEidt时值为空显示的默认文本  |  string  | -- |\r\n| dataOptions | 数据校验格式例如：[{type:\"num\",args:[1,32]}] |  object  | -- |\r\n| switchCallBack |displayMode:readEidt时,切换显示模式回调函数,this指向当前组件实例  |  function  | -- |\r\n| focusCallBack | 文本框获取焦点回调,this指向当前组件实例  |  function  | -- |\r\n\r\n##  使用\r\n### 1. 普通文本\r\n```\r\n$(\"#formInput1\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tplaceholder:\"普通文本测试\"\r\n});\r\n```\r\n### 2. 密码输入框\r\n```\r\n$(\"#formInput2\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"密码文本\",\r\n\tplaceholder:\"密码文本测试\",\r\n\ttype:\"password\"\r\n});\r\n```\r\n### 3. 密码输入框 - hasEyes:true\r\n```\r\n$(\"#formInput3\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"密码文本\",\r\n\tplaceholder:\"密码文本测试\",\r\n\ttype:\"password\",\r\n\thasEyes:true\r\n});\r\n```\r\n### 4. 只读模式\r\n```\r\n$(\"#formInput4\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"只读模式\",\r\n\tdisplayMode:\"readonly\",\r\n\tdefaultValue:\"只读\"\r\n});\r\n```\r\n### 5. 切换模式, defaultText，switchCallBack\r\n```\r\n$(\"#formInput5\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"切换模式\",\r\n\tplaceholder:\"切换模式测试\",\r\n\tdisplayMode:\"readEdit\",\r\n\trequired:false,\r\n\tdefaultText:\"未知数据\",\r\n\tswitchCallBack:function(){\r\n\t    console.log(\"切换显示模式为：\" + this.displayMode);\r\n\t}\r\n});\r\n```\r\n### 6. 数据校验模式\r\n```\r\n$(\"#formInput6\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"普通文本\",\r\n\tplaceholder:\"请输入1-6位整数\",\r\n\tdataOptions:[{type:\"num\",args:[1,6]}]\r\n});\r\n```\r\n### 7. removeSpace，focusCallBack\r\n```\r\n$(\"#formInput7\").Rcomponent({\r\n\tdataKey:\"FormInput\",\r\n\tdataField:'username',\r\n\tdataTitle:\"去除首尾空格\",\r\n\tplaceholder:\"removeSpace\",\r\n\tremoveSpace: true,\r\n\tfocusCallBack:function(){\r\n\t    console.log(\"focus\");\r\n\t    console.log(this.value);\r\n\t}\r\n});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# 下拉框组件(FormSelect)\r\n支持下拉框选项的添加，删除，修改等操作\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cselect id=\"formselect\" data-key=\"FormSelect\"\u003e\u003c/select\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称     | 描述       |  值类型/范围  | 默认值 |\r\n| :--------    | :-----:    | :----:  | :----:  |\r\n| selectArray  | 下拉可选项 |  array或object | [] |\r\n| hasNullItem  | 是否包含空选择项 |  bool  | false |\r\n| nullText     | 空选择项显示文本 |  string  | -- |\r\n\r\n| 方法名称     | 描述       |  参数说明 |\r\n| :--------    | :-----:    | :----:  |\r\n| removeItem(key)  | 移除下拉项 |  string或array  |\r\n| addItem(key)  | 增加下拉选项 |  string,array或object    |\r\n\r\n##  使用\r\n### 1. 基础使用-selectArray为array\r\n```\r\nvar $ts = $(\"#formselect1\").Rcomponent({\r\n\tdataTitle:\"selectArray为数组\",\r\n\tdataField:\"formselect1\",\r\n\tdefaultValue:\"test2\",\r\n\tselectArray:['test1', 'test2', 'test3', 'test4'],\r\n\tchangeCallBack:function(){\r\n\t\tconsole.log(this.value);\r\n\t}\r\n});\r\n```\r\n### 2. selectArray为object\r\n```\r\n$(\"#formselect2\").Rcomponent({\r\n\tdataTitle:\"selectArray为对象\",\r\n\tdataField:\"formselect2\",\r\n\tdefaultValue:3,\r\n\tselectArray:{1:'test1', 2:'test2', 3:'test3', 4:'test4'},\r\n\tchangeCallBack:function(){\r\n\t\tconsole.log(this.value);\r\n\t}\r\n});\r\n```\r\n### 3. removeItem\r\n```\r\n$ts.removeItem(\"test2\");\r\n$ts.removeItem([\"test3\",\"test4\"]);\r\n```\r\n\r\n### 4. addIem\r\n```\r\n$ts.addItem(\"test5\");\r\n$ts.addItem(\"test6\",\"test哈哈\");\r\n$ts.addItem({a:1,b:2});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# 多文本输入框组件(FormMiltiInput)\r\n根据不同的需求配置不同个数的文本输入框\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formMiltiInput\" data-key=\"FormMiltiInput\"\u003e\u003c/div\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称     | 描述       |  值类型/范围  | 默认值 |\r\n| :--------    | :-----:    | :----:  | :----:  |\r\n| text  | 文本输入框前的可写信息 |  array或object | [] |\r\n| inputCount  | 文本输入框的个数 |  Number  | 0 |\r\n| inputCfg  | 各文本输入框的配置信息 |  Array  | [] |\r\n| joiner  | 各文本框之间的连接符 |  String  | . |\r\n\r\n\u003e 若配置inputCfg则inputCount的值会被inputCfg的length覆盖，无需再对inputCount的值进行配置，两个字段至少有一个是必填项，若只配置inputCount则显示默认的普通文本\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\n$(\"#formMultiInpit\").Rcomponent({\r\n    dataKey: \"FormMultiInput\",\r\n    inputCount:4\r\n});\r\n```\r\n### 2. text\r\n```\r\n$(\"#formMultiInpit1\").Rcomponent({\r\n    dataKey: \"FormMultiInput\",\r\n    inputCount:2,\r\n    text: \"192.168.\",\r\n    validateCallBack:function(){\r\n        console.log(1);\r\n    },\r\n    changeCallBack:function(){\r\n        console.log(this.value);\r\n    }\r\n});\r\n```\r\n### 3. inputCount,joiner\r\n```\r\n$(\"#formMultiInpit2\").Rcomponent({\r\n    dataKey: \"FormMultiInput\",\r\n    inputCount:4,\r\n    defaultValue:\"8545-2345-3445-5676\",\r\n    joiner:\"-\"\r\n});\r\n```\r\n\r\n### 4. inputCfg\r\n```\r\n$(\"#formMultiInpit3\").Rcomponent({\r\n    dataKey: \"FormMultiInput\",\r\n    inputCfg:[\r\n        {dataValueType:'num', dataOptions: {type:\"num\",args:[192,255]}},\r\n        {dataValueType:'num', dataOptions: {type:\"num\",args:[1,255]}},\r\n        {dataValueType:'num', dataOptions: {type:\"num\",args:[1,255]}},\r\n        {dataValueType:'num', dataOptions: {type:\"num\",args:[1,255]}}\r\n    ]\r\n});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# 百分比组件(FormPercent)\r\n拖拽进行百分值的设定\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formPercent\" data-key=\"FormPercent\"\u003e\u003c/div\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称     | 描述       |  值类型/范围  | 默认值 |\r\n| :--------    | :-----:    | :----:  | :----:  |\r\n| start  | 起始值 |  Number | 0 |\r\n| end  | 结束值 |  Number  | 100 |\r\n| fixed     | 结果保留几位有效数字 |  Number  | 0 |\r\n\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\n $(\"#formPercent\").Rcomponent({\r\n    dataKey: \"FormPercent\",\r\n    start:100,\r\n    end:220,\r\n    fixed: 0\r\n});\r\n```\r\n\r\n### 2. 设定默认值\r\n```\r\n$(\"#formPercent1\").Rcomponent({\r\n    dataKey: \"FormPercent\",\r\n    end:220,\r\n    fixed: 1,\r\n    defaultValue: 200\r\n});\r\n```\r\n\r\n### 3. 起始值大于结束值\r\n```\r\n$(\"#formPercent2\").Rcomponent({\r\n    dataKey: \"FormPercent\",\r\n    start:160,\r\n    end:0,\r\n    fixed: 0\r\n});\r\n```\r\n\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# 上传组件(FormUpload)\r\n文件上传组件\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cselect id=\"formselect\" data-key=\"FormSelect\"\u003e\u003c/select\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称     | 描述       |  值类型/范围  | 默认值 |\r\n| :--------    | :-----:    | :----:  | :----:  |\r\n| submitUrl  | 提交地址 |  String | -- |\r\n| showFileText  | 是否显示上传文件名框 |  bool  | true |\r\n| browseText     | 文件浏览按钮文本 |  String  | 浏览... |\r\n| uploadText     | 上传按钮文本 |  String  | 上传 |\r\n| beforeUpload   | 上传文件前的操作 |  Function  | -- |\r\n| success     | 上传文件返回成功的回调 |  Function  | -- |\r\n\r\n\u003e beforeUpload: 可进行格式检查之类的操作，若取消上传，返回false。通过this.value可取到上传文件的文件名,若有相应的数据需要提交，则返回对应的数据对象{}\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\n$(\"#formUpload\").Rcomponent({\r\n    dataKey: \"FormUpload\",\r\n    submitUrl:\"xxx\",\r\n    success: function(){\r\n        alert(\"success\");\r\n    }\r\n});\r\n```\r\n\r\n### 2. showFileText\r\n```\r\n$(\"#formUpload\").Rcomponent({\r\n    dataKey: \"FormUpload\",\r\n    submitUrl:\"xxx\",\r\n    showFileText: false\r\n});\r\n```\r\n\r\n### 3. beforeUpload\r\n```\r\n$(\"#formUpload1\").Rcomponent({\r\n    dataKey: \"FormUpload\",\r\n    submitUrl:\"xxx\",\r\n    showFileText: false,\r\n    uploadText: _(\"Upload File\"),\r\n    beforeUpload:function(){ return false;},\r\n    success: function(){\r\n        alert(\"success\");\r\n    }\r\n});\r\n```\r\n\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# checkboxlist组件（FormCheckList）\r\n多个checkbox排列显示，支持添加和删除项\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formchecklist\" data-key=\"FormCheckList\"\u003e\u003c/div\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| selectArray | check列表 | array或object  | [] |\r\n\r\n| 方法名称     | 描述       |  参数说明 |\r\n| :--------    | :-----:    | :----: |\r\n| removeItem  | 移除可选项 |  string或array |\r\n| addItem  | 增加可选项 |  string，array或object |\r\n##  使用\r\n### 1. 基础使用-selectArray为array\r\n```\r\nvar $tc = $(\"#formchecklist\").Rcomponent({\r\n\tdataTitle:\"formchecklist\",\r\n\tdataField:\"formchecklist\",\r\n\tdefaultValue:\"test1\",\r\n\tselectArray:['test1', 'test2', 'test3', 'test4'],\r\n\tchangeCallBack:function(){\r\n\t\tconsole.log(this.value);\r\n\t}\r\n});\r\n```\r\n### 2. selectArray为object\r\n```\r\nvar $tc = $(\"#formchecklist\").Rcomponent({\r\n\tdataTitle:\"formchecklist\",\r\n\tdataField:\"formchecklist\",\r\n\tdefaultValue:\"test1\",\r\n\tselectArray:{test1:\"test1\", test2:\"test2\", test3:\"test3\", test4:\"test4\"},\r\n\tchangeCallBack:function(){\r\n\t\tconsole.log(this.value);\r\n\t}\r\n});\r\n```\r\n### 3. removeItem(key)\r\n```\r\n$tc.removeItem(\"test2\");\r\n$tc.removeItem([\"test3\",\"test4\"]);\r\n```\r\n### 4. addItem(key)\r\n```\r\n$tc.addItem(\"test5\");\r\n$tc.addItem(\"test6\",\"test哈哈\");\r\n```\r\n\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# radiolist组件(FormRadioList)\r\n支持下拉框选项的添加，删除，修改等操作\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formradiolist\" data-key=\"FormRadioList\"\u003e\u003c/div\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| selectArray | check列表 | array/object  | [] |\r\n\r\n| 方法名称     | 描述       |  参数说明 |\r\n| :--------    | :-----:    | :----: |\r\n| removeItem  | 移除可选项 |  string或array |\r\n| addItem  | 增加可选项 |  string，array或object |\r\n##  使用\r\n### 1. 基础使用-selectArray为array\r\n```\r\nvar $tr = $(\"#formradiolist\").Rcomponent({\r\n\tdataTitle:\"FormRadioList\",\r\n\tdataField:\"FormRadioList\",\r\n\tdefaultValue:\"test1\",\r\n\tselectArray:['test1', 'test2', 'test3', 'test4'],\r\n\tchangeCallBack:function(){\r\n\t\tconsole.log(this.value);\r\n\t}\r\n});\r\n```\r\n### 2. selectArray为object\r\n```\r\nvar $tr = $(\"#formradiolist\").Rcomponent({\r\n\tdataTitle:\"FormRadioList\",\r\n\tdataField:\"FormRadioList\",\r\n\tdefaultValue:\"test1\",\r\n\tselectArray:{test1:\"test1\", test2:\"test2\", test3:\"test3\", test4:\"test4\"}\r\n});\r\n```\r\n### 3. removeItem(key)\r\n```\r\n$tc.removeItem(\"test2\");\r\n$tc.removeItem([\"test3\",\"test4\"]);\r\n```\r\n### 4. addItem(key, value)\r\n```\r\n$tc.addItem(\"test5\");\r\n$tc.addItem(\"test6\",\"test哈哈\");\r\n```\r\n\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n\r\n---\r\n# 开关组件（FormCheckbox）\r\n支持on，off两种状态\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formcheckbox\" data-key=\"FormCheckbox\"\u003e\u003c/div\u003e\r\n```\r\n##  特有配置属性，方法\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| text    | 显示文本 |  string  | null |\r\n\r\n##  使用\r\n### 1. 基础使用--无文本\r\n```\r\nvar $tcb = $(\"#formcheckbox\").Rcomponent({\r\n\tdataTitle:\"FormCheckbox\",\r\n\tdataField:\"formcheckbox\",\r\n\tchangeCallBack:function(){\r\n\t\t// $(\"#getvalue\").toggle();\r\n\t}\r\n});\r\n```\r\n### 2. 基础使用--有文本\r\n```\r\nvar $tcb = $(\"#formcheckbox\").Rcomponent({\r\n\tdataTitle:\"FormCheckbox\",\r\n\tdataField:\"formcheckbox\",\r\n\ttext:\"this is text\",\r\n\tchangeCallBack:function(){\r\n\t\t// $(\"#getvalue\").toggle();\r\n\t}\r\n});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n---\r\n\r\n---\r\n# 自定义下拉组件（FormDropDownList）\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formDropDownList\" data-key=\"FormDropDownList\"\u003e\u003c/div\u003e\r\n```\r\n## 特有配置属性，方法\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| selectArray    | 可选配置项 |  array或object  | null |\r\n| dataOptions    | 数据校验配置项(customText不为空时才有效) |  array或object  | null |\r\n| clickCallBack    | 下拉框展开收起回调 |  function  | null |\r\n| showSelfText    | 显示自定义的文本，与selectArray值无关，只做显示用 |  string  | null |\r\n| customText    | 自定义选项文本，若该字段不为空，则表示有自定义选项 |  string  | null |\r\n| focusCallBack    | 自定义情况下文本框获取焦点回调函数(customText不为空时才有效) |  function  | null |\r\n\r\n## 使用\r\n### 1. selectArray\r\n```\r\nvar $tcb = $(\"#formDropDownList\").Rcomponent({\r\n    dataValueType:\"num\",\r\n    showSelfText:QOSTEXT[qosPolicy],\r\n    customText:_(\"Manual (Unit: KB/s)\"),\r\n    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"},\r\n    clickCallBack:function(){\r\n        //移除定时器\r\n        switchQosTimeout(false);\r\n    },\r\n    focusCallBack:function(){\r\n        switchQosTimeout(false);\r\n    },\r\n    changeCallBack:function(){\r\n    },\r\n    renderedCallBack:function(){\r\n    }\r\n});\r\n```\r\n### 2. dataOptions\r\n```\r\nvar $tcb = $(\"#formDropDownList\").Rcomponent({\r\n    dataValueType:\"num\",\r\n    customText:_(\"Manual (Unit: KB/s)\"),\r\n    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"}\r\n});\r\n```\r\n### 3. clickCallBack\r\n```\r\nvar $tcb = $(\"#formDropDownList\").Rcomponent({\r\n    dataValueType:\"num\",\r\n    customText:_(\"Manual (Unit: KB/s)\"),\r\n    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"},\r\n    clickCallBack:function(){\r\n        //移除定时器\r\n        switchQosTimeout(false);\r\n    },\r\n    focusCallBack:function(){\r\n        switchQosTimeout(false);\r\n    }\r\n});\r\n```\r\n### 4. showSelfText\r\n```\r\nvar $tcb = $(\"#formDropDownList\").Rcomponent({\r\n    dataValueType:\"num\",\r\n    showSelfText:QOSTEXT[qosPolicy],\r\n    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"}\r\n});\r\n```\r\n### 5. customText\r\n```\r\nvar $tcb = $(\"#formDropDownList\").Rcomponent({\r\n    customText:_(\"Manual (Unit: KB/s)\"),\r\n    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"},\r\n    clickCallBack:function(){\r\n        //移除定时器\r\n        switchQosTimeout(false);\r\n    }\r\n});\r\n```\r\n### 6. focusCallBack\r\n```\r\nvar $tcb = $(\"#formDropDownList\").Rcomponent({\r\n    dataValueType:\"num\",\r\n    customText:_(\"Manual (Unit: KB/s)\"),\r\n    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"},\r\n    focusCallBack:function(){\r\n        switchQosTimeout(false);\r\n    }\r\n});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n---\r\n\r\n---\r\n# 日历组件（FormCalendar）\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cinput type=\"text\" id=\"formCalendar\" data-key=\"FormCalendar\"\u003e\r\n```\r\n## 特有配置属性，方法\r\n| 属性名称    | 描述         |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:      | :----:        | :----: |\r\n| hasWeekday  | 是否显示星期 |  bool         | false  |\r\n| startYear   | 日历开始时间 |  num          | 1970   |\r\n| endYear     | 日历结束时间 |  num          | 2037   |\r\n| scanAble    | 是否可输入   |  bool         | true   |\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\nvar $tcb = $(\"#formCalendar\").Rcomponent({\r\n\tdataTitle:\"日历组件\",\r\n\tdataField:\"formCalendar\",\r\n\thasWeekday:true\r\n\t}\r\n});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n---\r\n\r\n---\r\n# 选项卡组件（FormTab）\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003cdiv id=\"formTab\" data-key=\"FormTab\"\u003e\u003c/div\u003e\r\n```\r\n## 特有配置属性，方法\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| selectArray    | 按钮配置项 |  object或array  | false |\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\nvar$(\"#formtab\").Rcomponent({\r\n    selectArray:{1:_(\"Online Devices\"), 2:_(\"Blacklist\")},\r\n    dataValueType:\"num\",\r\n    defaultValue:1, //默认选中的按钮项\r\n    changeCallBack:function(){\r\n        switch(this.value){\r\n            case 1:{\r\n                //xxx\r\n            }break;\r\n            case 2:{\r\n                //xxx\r\n            }break;\r\n        }\r\n    }\r\n});\r\n```\r\n\u003e 其它API遵循BaseComponent的API进行使用\r\n---\r\n\r\n# 功能组件\r\n---\r\n# 消息提示框组件 ($.FormMessage)\r\n消息提示框，几秒钟后自动消失\r\n\r\n## 配置属性参数\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| message    | 消息内容 |  string | -- |\r\n| hideTime    | 消失淡出时间，毫秒 |  number  | 300 |\r\n| displayTime | 展示时间，毫秒，为0表示不关闭  |  number  | 1000 |\r\n| opacity | 消息框透明度 | 0~1 | 0.8 |\r\n| callback   | 消息框显示回调   |  function  | -- |\r\n\r\n##  可使用方法\r\n| 方法名称        | 描述   |  参数 |\r\n| :--------   | :-----:  | :----:  |\r\n| setMess(mess) | 设置消息内容 |  mess:字符串 |\r\n| hide    | 隐藏消息提示框,隐藏后对应的node节点会在整个文档流中移除 | -- |\r\n        \r\n##  使用\r\n### 1. 基础使用\r\n```\r\n$.FormMessage({\r\n    message:\"消息\",\r\n    callback：function(){\r\n    }\r\n})\r\n```\r\n---\r\n# 弹出框组件（$.modalDialog）\r\n支持弹出框标题，内容，操作按钮，皮肤主题自定义\r\n\r\n## 配置属性，方法\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| title    | 消息框标题（必填） | string | -- |\r\n| content  | 消息体内容/iframe（必填） |  string/$对象  | -- |\r\n| isIframe | 当content为iframe时，值必为true   |  bool  | false |\r\n| skin    | 皮肤样式，添加到最外层容器 |  string  | -- |\r\n| height | 高度 | number | -- |\r\n| width  | 宽   |  number  | -- |\r\n| autoClose   | 是否自动关闭 | bool  | false |\r\n| timeout    | autoClose为true时多少秒后自动关闭 |  num  | -- |\r\n| closeCallBack  | 关闭弹出框回调   |  funciton  | -- |\r\n| buttons     | 操作按钮   |  array([{}])  | [] |\r\n|| 按钮参数|\r\n| text    | 按钮文本值 |  string | -- |\r\n| theme    | 按钮主题 | 按钮主题 | -- |\r\n| autoHide     | 点击按钮后是否关闭弹出窗   |  bool  | true |\r\n| callback    | 点击按钮的回调 |  t  | edit |\r\n\r\n## 使用\r\n### 1. 基础使用\r\n```\r\n$.modalDialog({\r\n\ttitle:'test',\r\n\tcontent:'\u003cdiv style=\"height:200px;width:200px;\"\u003e\u003c/div\u003e',\r\n\tbuttons:[\r\n\t\t{\r\n\t\t\ttext:'ok'\r\n\t\t},\r\n\t\t{\r\n\t\t\ttext:'cancel'\r\n\t\t}\r\n\t]\r\n});\r\n```\r\n\r\n---\r\n\r\n# table组件（FormTable）\r\n\r\n```\r\n\u003c!-- html模板 --\u003e\r\n\u003ctable id=\"FormTable\"\u003e\u003c/table\u003e\r\n```\r\n## 配置属性\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----  | :----  | :----  |\r\n| data | 表格数据 | array | -- |\r\n| requestUrl | 数据请求地址 | string | \"\"|\r\n| requestOpt | 请求参数 | object | {} |\r\n| requestType | 请求类型 | get/post | get |\r\n| dataTarget | 数据项的子项,请求或给定数据对象的某个子属性 | string | \"\" |\r\n| perArray  | 每页显示条数数组 | array | [10, 20, 30, 50] |\r\n| perNum | 每页显示的数据数 |  number  | 10 |\r\n| pageIndex | 当前起始页 |  number | 0 |\r\n| showStyle  | 数据显示类型 | 1:分页，2：不分页  | 1 |\r\n| limit | 最多显示的数据条数 | Number | 0(不限制) |\r\n| filterProperty | 过滤字段 | array | [] |\r\n| showIndex | 显示序号 | bool | false |\r\n| key | 主键字段，数据的唯一标识在启用CheckBox的时候需要用到，当调用getSelected()获取选中数据时，返回的就是主键值的数组 | string | ID |\r\n| sortFields | 已排序字段规则优先级顺序 | array | [] |\r\n| sortOpt | 排序字段对应的排序规则 1：升序，2：降序,例如{Age:1, Name:1} | object | {} |\r\n| autoHighLight | 高亮与查询字段匹配的字符 | bool | false |\r\n| sortFunction | 自定义排序函数，若设置自定义函数则配置的排序字段排序失效 | function |  |\r\n| showCheckbox | 显示checkbox |  bool | false |\r\n| showPageLeftBar | 显示底部左侧显示页数切换栏 |  bool  | true |\r\n| showPageRightBar | 显示分页按钮 | bool | true |\r\n| maxIndex | 分页栏最多显示按钮数 | number | 7 |\r\n| updateCallback | 数据更新回调，this指向当前组件实例对象 | function | -- |\r\n| changePageNumCallBack| 改变每页显示条数回调，this指向当前组件实例对象 | function | --|\r\n| beforeUpdate| 数据更新前操作，可进行数据的二次处理，若有返回值，则返回新的数据，this指向当前组件实例对象 | funciton | -- |\r\n| columns | 配置列信息 |  array  | -- |\r\n||||\r\n| columns配置属性  |||\r\n| field | 单元格对应的字段 |  string  | -- |\r\n| title | 列显示标题 |  string  | -- |\r\n| width | 列宽 |  number、百分比字符串  | -- |\r\n| sortable | 设置字段是否可以排序 | bool | false |\r\n| sortCallBack | 自定义排序逻辑函数，默认在升序和降序间切换 | function | null|\r\n| format | 格式化单元格数据，必须有返回值 |  function(data)  | -- |\r\n| rendered | 渲染完成后的回调（待更新） |  function  | -- |\r\n| actionColumn | 按钮操作列 | object | -- |\r\n| actionColumn配置属性 |  |  |  \r\n| columnName | 列名称 |  string  | 操作 |\r\n| actions | 按钮数组 | array  | -- |\r\n|||||\r\n| actions配置属性 |  |    | |\r\n| type | 按钮类型 |  edit,delete,other  | -- |\r\n| text | 按钮文本 |  string  | -- |\r\n| icon | 按钮图标 |  string  | -- |\r\n| callback | 点击回调 |  function  | -- |\r\n\r\n## 方法\r\n| 方法名称 | 描述 | 参数说明 |\r\n| :--------   | :-----  | :----  |\r\n| show() | 显示组建 | -- |\r\n| hide() | 隐藏组件 | -- |\r\n| getSelected() | 获取选中的数据key对应的数组 | -- |\r\n| goPage(index) | 跳到制定的页 | index从1开始 |\r\n| reLoad(data) | 刷新表格数据 |data可为空，为空时会根据填写的请求地址进行重新获取数据|\r\n| getValue() | 获取当前table过滤和排序后用于显示数据 |--|\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\n\u003c!--html--\u003e\r\n\u003ctable id=\"formTablenormal\"\u003e\r\n\t\u003cthead\u003e\r\n\t\t\u003ctr\u003e\r\n\t\t\t\u003cth data-field=\"A\"\u003eA\u003c/th\u003e\r\n\t\t\t\u003cth data-field=\"G\"\u003eB\u003c/th\u003e\r\n\t\t\t\u003cth data-field=\"G2\"\u003eC\u003c/th\u003e\r\n\t\t\t\u003cth data-field=\"D\"\u003eD\u003c/th\u003e\r\n\t\t\t\u003cth data-field=\"G0\"\u003eE\u003c/th\u003e\r\n\t\t\u003c/tr\u003e\r\n\t\u003c/thead\u003e\r\n\u003c/table\u003e\r\n\u003c!--js--\u003e\r\nvar tableData = [\r\n\t{A:'1', D:\"D1\",G:\"G1\", G2:\"G21\", G0:\"GO1\"},\r\n\t······\r\n];\r\n\r\n$(\"#formTablenormal\").TablePage({\r\n\tdata:tableData\r\n});\r\n```\r\n\r\n### 2. 配置使用-配置信息加载 自定义列头显示,列宽设置\r\n```\r\n\u003c!--html--\u003e\r\n\u003ctable id=\"formTable\"\u003e\u003c/table\u003e\r\n```\r\n```\r\n$(\"#formTable\").TablePage({\r\n\tdata:tableData,\r\n\tcolumns:[\r\n\t\t{field:'G2',title:\"G2--2\"},\r\n\t\t{field:'G',width:\"100px\"},\r\n\t\t{field:'D'},\r\n\t\t{field:'A'}\r\n\t],\r\n\tperNum:10,\r\n\tpageIndex:0\r\n});\r\n```\r\n### 3. 重写列数据值\r\n```\r\n$(\"#formTable\").TablePage({\r\n\tdata:tableData,\r\n\tcolumns:[\r\n\t\t{field:'G2',title:\"G2 + cute\", format:function(val){\r\n\t\t\treturn val + \"--cute\";\r\n\t\t}},\r\n\t\t{field:'G'},\r\n\t\t{field:'D'},\r\n\t\t{field:'A'}\r\n\t],\r\n\tperNum:10,\r\n\tpageIndex:0\r\n});\r\n```\r\n### 4. 显示复选框 \r\n```\r\n$(\"#formTable\").TablePage({\r\n\tdata:tableData,\r\n\tshowCheckbox:true,\r\n\tcolumns:[\r\n\t\t{field:'G2',title:\"G2--2\"},\r\n\t\t{field:'G'},\r\n\t\t{field:'D'},\r\n\t\t{field:'A'}\r\n\t],\r\n\tperNum:8,\r\n\tmaxIndex:5,\r\n\tpageIndex:0\r\n});\r\n```\r\n### 5. 显示操作按钮\r\n```\r\n$(\"#formTable\").TablePage({\r\n\tdata:tableData,\r\n    showCheckbox:true,\r\n\tcolumns:[\r\n\t\t{field:'G2', title:\"G2 + 哈哈\", format:function(val){return \"哈哈\" + val;}},\r\n\t\t{field:'G'},\r\n\t\t{field:'D'},\r\n\t\t{field:'*_*', title:\"\", format:function(val){return \"@_@\";}}\r\n\t],\r\n\tactionColumn:{\r\n\t    columnName:\"操作\",\r\n\t    actions:[\r\n\t        {\r\n\t            type:\"edit\",//delete,other\r\n\t            text:\"修改\",\r\n\t            icon:\"\",\r\n\t            callback:function(index){\r\n\t                console.log(index);\r\n\t                tableData[index][\"D\"] = \"修改后的值\"\r\n\t            }\r\n\t        },\r\n\t        {\r\n\t            type:\"delete\",//delete,other\r\n\t            text:\"删除\",\r\n\t            icon:\"\",\r\n\t            callback:function(index){\r\n\t                console.log(index);\r\n\t            }\r\n\t        }\r\n\t    ]\r\n\t},\r\n\tperNum:10,\r\n\tpageIndex:3\r\n});\r\n```\r\n### 6. FormTable排序\r\n```\r\n$(\"#formTable\").FormTable({\r\n    data:tableData,\r\n    sortFields:[\"sysLogTime\",\"ID\"],// 定义属性\r\n    sortOpt:{sysLogTime:2, ID:2}, // 按时间降序排列\r\n    columns:[\r\n        {field:\"sysLogTime\", title:_(\"Time\"), width:170},\r\n        {   \r\n            field:\"sysLogType\", title:_(\"Type\") , width:140,\r\n            format:function(data){\r\n                switch(data){\r\n                \tcase 1:\r\n                \t\treturn _(\"System Log\");\r\n                \tcase 2:\r\n                \t\treturn _(\"Attack Log\");\r\n                \tcase 3:\r\n                \t\treturn _(\"Error Log\");\r\n                }\r\n            }\r\n        },\r\n        {field:\"sysLogMsg\", title:_(\"Log Content\")}\r\n    ],\r\n    showIndex:true,\r\n    updateCallback:function(){\r\n        top.ResetHeight.resetHeight();\r\n    },\r\n    changePageNumCallBack:function () {\r\n        top.ResetHeight.resetHeight();\r\n    }\r\n});\r\n```\r\n### 7. FormTable与其他组件混合使用\r\n```\r\n$(\"#customTable\").FormTable({\r\n    requestUrl:\"/goform/module\", //请求地址\r\n    requestOpt:{getQosUserList:{type:1}, getQosPolicy:\"\"}, //请求参数\r\n    dataTarget:\"getQosUserList\", //table的data为请求到的数据的的getQosUserList属性值\r\n    showStyle:2, //显示全部数据不分页\r\n    filterProperty:[\"hostRemark#hostName\", \"hostIP\", \"hostMAC\"],//数据过滤字段\r\n    columns:[\r\n        {   \r\n            field:\"hostRemark\", \r\n            sortable:true, \r\n            title:_(\"Host Name\"),\r\n            format: function(data, field, rowData){\r\n                var nodes = '\u003cdiv class=\"hostNameWrap\"\u003e\u003cinput data-id=\"' + rowData.ID + '\" class=\"hostName\" data-key=\"FormInput\" default-value=\"' + data + '\" data-hostname=\"' + rowData[\"hostName\"] + '\" type=\"text\"/\u003e\u003c/div\u003e' +\r\n                            '\u003c/div\u003e';\r\n                return nodes;\r\n            },\r\n            sortCallBack:function(){\r\n                var opt = {\r\n                    field: sortList[curSortIndex%3],\r\n                    sort:1\r\n                };\r\n                curSortIndex ++;\r\n                return opt;\r\n            },\r\n            rendered:function(field){\r\n                var _this = this;\r\n                _this.$element.find(\".hostName\").each(function(){\r\n                    var hostname = $(this).attr(\"data-hostname\");\r\n                    $(this).Rcomponent({\r\n                        displayMode:\"readEdit\",\r\n                        dataField:field,\r\n                        defaultText: hostname || _(\"Unknown\"),\r\n                        required:false,\r\n                        dataOptions:[{type:\"hostName\"},{type:\"byteLen\",args:[1, 63]}],\r\n                        changeCallBack:function(){\r\n                            //xxxx\r\n                        },\r\n                        afterChangeCallBack:function(){\r\n                           //xxx\r\n                        },\r\n                        renderedCallBack:function () {\r\n                            //xxx\r\n                        }\r\n                    });\r\n                });\r\n            }\r\n        },\r\n        {   field:\"hostUploadSpeed\", sortable:true, title:_(\"Upload Bandwidth\"),\r\n            format:function(data){\r\n                return formatSpeed(data) + \"/s\";\r\n            }\r\n        },\r\n        {   field:\"hostDownloadSpeed\", sortable:true, title:_(\"Download Bandwidth\"),\r\n            format:function(data){\r\n                return formatSpeed(data) + \"/s\";\r\n            }\r\n        },\r\n        {   field:\"hostUploadLimit\", title:_(\"Upload Limit\"), format:function(data, field, rowData){\r\n                return '\u003cdiv class=\"UploadLimit\" data-down=\"' + rowData[\"hostDownloadLimit\"] + '\" data-id=\"' + rowData.ID + '\" data-field=\"'+field+'\" default-value=\"'+data+'\" data-key=\"FormDropDownList\"\u003e\u003c/div\u003e';\r\n            },\r\n            rendered:function(){\r\n                this.$element.find(\".UploadLimit\").Rcomponent({\r\n                    dataValueType:\"num\",\r\n                    customText:_(\"Manual (Unit: KB/s)\"),\r\n                    showSelfText:QOSTEXT[qosPolicy],\r\n                    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n                    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"},\r\n                    clickCallBack:function(){\r\n                        $(\"#allSettingModal\").hide();\r\n                    },\r\n                    changeCallBack:function(){\r\n                        //xxx\r\n                    },\r\n                    renderedCallBack:function(){\r\n                        //xxx\r\n                    }\r\n                });\r\n            }\r\n        },\r\n        {   \r\n            field:\"hostDownloadLimit\", title:_(\"Download Limit\"),\r\n            format:function(data, field, rowData){\r\n                return '\u003cdiv class=\"DownloadLimit\" data-up=\"' + rowData[\"hostUploadLimit\"] + '\" data-id=\"' + rowData.ID + '\" data-field=\"'+field+'\" default-value=\"'+data+'\" data-key=\"FormDropDownList\"\u003e\u003c/div\u003e';\r\n            },\r\n            rendered:function(){\r\n                this.$element.find(\".DownloadLimit\").Rcomponent({\r\n                    dataValueType:\"num\",\r\n                    customText:_(\"Manual (Unit: KB/s)\"),\r\n                    showSelfText:QOSTEXT[qosPolicy],\r\n                    dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n                    selectArray:{0:_(\"No limit\"), 32:\"32 KB/s\", 64:\"64 KB/s\", 128:\"128 KB/s\"},\r\n                    clickCallBack:function(){\r\n                        $(\"#allSettingModal\").hide();\r\n                    },\r\n                    changeCallBack:function(){\r\n                        //添加定时器\r\n                    },\r\n                    renderedCallBack:function(){\r\n                        //xxx\r\n                    }\r\n                });\r\n            }\r\n        },\r\n        {   \r\n            field:\"forbiden\", title:_(\"Blacklist\"),\r\n            format:function(data, field, rowData){\r\n                return '\u003cbutton type=\"button\" data-id=\"' + rowData[\"ID\"] + '\" class=\"forbidden btn btn-default\" \u003e' + _(\"Blacklist \") + '\u003c/button\u003e';\r\n            },\r\n            rendered:function(){\r\n                this.$element.off(\"click.sysInfo\").on(\"click.sysInfo\", \".forbidden\", function(){\r\n                //xxxxx\r\n                });\r\n            }\r\n        }\r\n    ],\r\n    showPageLeftBar: false,\r\n    updateCallback:function(){\r\n        //重置高度\r\n        top.resetIframeHeight();\r\n    },\r\n    beforeUpdate:function(){\r\n        qosPolicy = qosUserSettingTable.returnData[\"getQosPolicy\"][\"qosPolicy\"];\r\n    }\r\n});\r\n```\r\n\r\n\u003e  其它API自行验证\r\n\r\n---\r\n# ComponentManager\r\n多个组件操作类，提供便捷的组件组群操作\r\n\r\n##  配置参数\r\n| 属性名称        | 描述   |  值类型/范围  | 默认值 |\r\n| :--------   | :-----:  | :----:  | :----:  |\r\n| requestUrl    | 数据请求地址 |  string | -- |\r\n| requestData    | 请求数据 |  object  | -- |\r\n| submitUrl     | 数据提交地址  |  string  | -- |\r\n| formCfg | 组件配置项{key:value} | object，key为组件的dataField,value为组件对应的配置信息 | -- |\r\n| container | 组件群容器的选择器（必填） | string |  |\r\n| beforeUpdate | 数据更新前操作，this指向当前ComponentManager实例对象 | function | true |\r\n| afterUpdate | 数据更新后的回调，this指向当前ComponentManager实例对象 | function | -- |\r\n| beforeSubmit | 提交数据前，进行一些列自定义数据校验操作，当然基础的数据校验会在这之前进行调用，失败返回false, 成功返回true或者二次处理后需要提交的数据，this指向当前ComponentManager实例对象 | function | -- |\r\n| afterSubmit | 数据提交后的回调，this指向当前ComponentManager实例对象 | function | -- |\r\n| renderedCallBack |模块组件加载完成后的回调，可用于实现组件加载完后的自定义逻辑，this指向当前ComponentManager实例对象 | function | -- |\r\n\r\n##  方法\r\n| 名称        | 描述   |  参数说明 |  返回值|\r\n| :--------   | :-----:  | :----:  |\r\n| getComponent(dataField) | 根据组件字段获取对应的组件实例对象 | dataField:组件字段名 | 组件实例化对象 |\r\n| reset() | 重置每个组件的值为默认值 | -- | -- |\r\n| submit(type) | 提交或者校验数据 | type: 1(提交数据),2(数据校验，只做数据校验)| 校验失败返回false，否则返回true |\r\n| updateComponents(data) | 更新组件的值-重置为上一次的值或者给定的值 | 组件群的值Object |-- |\r\n| getComponentByNode(node) | 根据标签节点获取对应的组件实例对象 | html标签节点 | 组件实例化对象 |\r\n| setValue(val, dataField) | 设置组件的值 |val:值， dataFiled:字段| -- |\r\n| getValue(dataField) | 获取组件的值 |dataField: 组件字段, 为空则返回所有组件的值| 根据组件的类型返回对应的值，若参数为空返回字段和值组成的对象 |\r\n\r\n## 流程图\r\n数据校验逻辑\r\n\r\n![数据校验逻辑](https://github.com/moshang-xc/gitskills/blob/master/share/reasy-ui3.jpg)\r\n\r\n##  使用\r\n### 1. 基础使用\r\n```\r\n\u003c!--html--\u003e\r\n\u003cdiv id=\"text\"\u003e\u003c/div\u003e\r\n    \u003cdiv id=\"authUserModal\" class=\"form-wrap\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" data-field=\"ID\" data-value-type=\"num\" visible=\"false\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" data-field=\"index\" data-value-type=\"num\" visible=\"false\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" data-field=\"type\" visible=\"false\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" data-field=\"authUserID\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" data-field=\"authUserPwd\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" data-field=\"authUserRemark\"\u003e \r\n        \u003cinput type=\"text\" data-key=\"FormInput\" maxlength=\"3\" data-field=\"authUserMaxCount\"\u003e\r\n        \u003cinput type=\"text\" data-key=\"FormInput\" maxlength=\"4\" data-field=\"authUserConnectCount\"\u003e\r\n        \u003cdiv data-key=\"FormDropDownList\" data-field=\"uploadSpeed\"\u003e\u003c/div\u003e\r\n        \u003cdiv data-key=\"FormDropDownList\" data-field=\"downLoadSpeed\"\u003e\u003c/div\u003e\r\n    \u003c/div\u003e\r\n    \r\n\u003c!--js--\u003es\r\n authUserManage = $.componentManager({\r\n    submitUrl:\"/goform/module\",\r\n    container:\"#authUserModal\",\r\n    formCfg:{\r\n        authUserID:{dataTitle:_(\"Account:\"), dataOptions:[{type:\"pwd\"},{type:\"byteLen\", args:[1,32]}]},\r\n        authUserPwd:{dataTitle:_(\"Password:\"), dataOptions:[{type:\"pwd\"},{type:\"byteLen\", args:[1,32]}]},\r\n        authUserRemark:{dataTitle:_(\"Remark:\"), placeholder:_(\"Optional\"), removeSpace:true, required:false, dataOptions:[{type:\"remarkTxt\"},{type:\"byteLen\", args:[1,16]}]},\r\n        authUserMaxCount:{dataTitle:_(\"Login User Number:\"), dataValueType:\"num\", defaultValue:1, dataOptions:[{type:\"num\", args:[1,300]}]},\r\n        authUserConnectCount:{dataTitle:_(\"Connection Number:\"), dataValueType:\"num\",  defaultValue:600, dataOptions:[{type:\"num\", args:[1,9999]}]},\r\n        uploadSpeed:{\r\n            dataTitle:_(\"Upload Rate:\"), dataValueType:\"num\", description:\"KB/s\",  \r\n            defaultValue:0, customText:_(\"Manual\"),\r\n            dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n            selectArray:{0:_(\"No limit\"), 32:\"32\", 64:\"64\", 128:\"128\"}\r\n        },\r\n        downLoadSpeed:{\r\n            dataTitle:_(\"Download Rate:\"),dataValueType:\"num\", description:\"KB/s\",\r\n            defaultValue:0, customText:_(\"Manual\"),\r\n            dataOptions:[{type:\"num\", args:[0, MAX_SPEED]}],\r\n            selectArray:{0:_(\"No limit\"), 32:\"32\", 64:\"64\", 128:\"128\"}\r\n        }\r\n    },\r\n    updateCallback:function(){\r\n    },\r\n    beforeSubmit:function(data){\r\n        //增加数据校验\r\n    },\r\n    afterSubmit:function(data){\r\n    }\r\n});\r\n```\r\n---\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoshang-ax%2Fjquery-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoshang-ax%2Fjquery-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoshang-ax%2Fjquery-ui/lists"}