+ The page you were looking for doesn't exist.
+ Go back to devdocs.io.
+
+ The page you were looking for doesn't exist.
+ Go back to devdocs.io.
+
+{``}
+
+
+ + {' '} + +
+ +
+{`
+`}
+
+
+ + {' '} + +
+{'\r'}
+
+ + {' '} + {' '} + {' '} + {' '} + {' '} + +
+ +
+{`
+
+
+
+
+
+`}
+
+ 需要扩展可以添加className
++ +
+{''}
+
+ + +
+{''}
+
+ 两个实例方法 enable（启用） 和 disable （禁用），可以传入一个参数（字符串或者element）替换按钮内容
++ {' '} + +
+ +
+{`
+`}
+
+
+
+{`disableExample: function (event) {
+ var button = this.refs.button;
+ if (event.target.checked) {
+ button.disable(
+
+
+{`
+
+
+
{'
+
+
+
{'
+
+ 获取值，选中状态下如果有 value，返回 value ，否则返回 true ，未选中状态返回 false
+ +如果 value 值与 props.value 相等，或者值为 true 或者 1 ，设置为选中状态
+ +
+{`
+
+
+ {'[{"text":"北京","id":"beijing"},{"text":"上海", "id":"shanghai"}]'}
+ {'[{"cn":"北京","py":"beijing"},{"cn":"上海", "py":"shanghai"}]'}
+ {'["北京","上海","广州"]'}
+
+ {'
+
+{`data = [
+ { "id": "nanjing", "text": "南京" },
+ { "id": "beijing", "text": "北京" },
+ { "id": "guangzhou", "text": "广州" },
+ { "id": "shenzhen", "text": "深圳" },
+ { "id": "chengdu", "text": "成都" },
+ { "id": "chongqing", "text": "重庆" },
+ { "id": "shanghai", "text": "上海" }
+]`}
+
+
+ {'
+
+ {'
+
+ {'
+
+ {'
+ Select, Tree 等控件需要从服务器远程获取数据的接口。
+接口返回一个方法，then成功回调，catch失败回调，complete成功与失败都会调用
+ReactUI内部提供了一个dataSource，使用Qwest实现的，可以用其他的Ajax框架自行实现。
+
+{`function (src, data, options) {
+ let stacks = {
+ 'then': [],
+ 'catch': [],
+ 'complete': []
+ },
+ promises = ['then', 'catch', 'complete'],
+ req = null,
+
+ qwest = function () {
+ req = Qwest.get(src, data, options)
+ promises.forEach(p => {
+ req[p](res => {
+ stacks[p].forEach(func => {
+ func(res)
+ })
+ })
+ })
+ return qwest
+ }
+
+ promises.forEach(p => {
+ qwest[p] = func => {
+ stacks[p].push(func)
+ return qwest
+ }
+ })
+
+ return qwest
+}`}
+
+
+{`
+
+ {`
+
+ {`
+
+ {`
+
+ {`
+
+ {`
+
+{`
+
+
+{`startWidth: function (d, value) {
+ return d.name.indexOf(value) === 0
+}`}
+
+ 示例见 Table。
+
+{`let options = [{
+ label: '姓名',
+ name: 'name',
+ ops: ['like', '=', 'startWidth']
+}, {
+ label: '年龄',
+ name: 'age',
+ ops: ['>=', '<'],
+ type: 'number'
+}, {
+ label: '生日',
+ name: 'birthday',
+ ops: ['>=', '<'],
+ type: 'datetime'
+}, {
+ label: '地区',
+ name: 'office',
+ ops: ['='],
+ type: 'select',
+ props: { data: ['Tokyo', 'Singapore', 'New York', 'London', 'San Francisco'] }
+}, {
+ label: '国籍',
+ name: 'country',
+ ops: ['='],
+ type: 'select',
+ props: { data: dataSource('json/countries.json'), optionTpl: '{country}', valueTpl: '{en}' }
+}]
+ this.setState({ filterText: JSON.stringify(fs) })} options={options} />
+`}
+
+
+{``}
+
+
+ 0.3 版更新，From 不再提供内置 Ajax 提交功能，需要在onSubmit中进行提交
+ +注：本文档使用了一个 json 文件模拟服务端返回数据，提交会提示 500 错误
+ + + +
+{`
+`}
+
+
+ 获取当前所有注册FormControl的value，结果为json
+ +Form 下不能使用 ref 获取引用，需要引用时使用 getReference 方法。name 为 FormControl 的 name
+{type} => {component}
+
+ {`
+ 一系列表单控件的马甲，统一封装用来实现表单数据验证，输入提示，动态创建表单等功能。可以通过 getReference() 这个方法获取被封装的控件。
+
+{`
+
+ FormControl 会根据这些属性自动验证输入，自动生成提示文字和错误信息，文字在 Lang 中设置。
+
+{`
+
+ text => Input
+
+ {`
+ textarea => Input
+
+ {`
+ select => Select
+
+{`
+ tree => Tree
+
+{`
+ checkbox => Checkbox
+
+ {`
+ checkbox-group => CheckboxGroup
+
+{`
+ radio-group => RadioGroup
+
+{`
+ rating => RadioGroup
+
+{`
+ upload => Upload
+
+{`
+ 可以使用 children 来处理一些复杂结构。注意每个 FormControl 只能有一个表单组件，类型必须和 FormControl 的 type 相同。
+
+{`
+
+ `}
+
+
+
+ FormControl 提供一个静态方法 register，将一个 Component 注册为 FormControl 成员。
+ 每个注册为 FormControl 的控件必须实现 getValue() , setValue(data) 这两个接口。
+
+{`FormControl.register(
+ type, // string，控件类型，唯一。如果同名，后注册的将会覆盖先注册的控件
+ render, // function，匹配到类型时，调用render方法返回相应控件
+ valueType, // 'string|array|number'，控件值类型，三选一，数据验证时调用
+)`}
+
+
+ 支持 font-awesome 和 material-design-iconic-font
+ 默认的前缀为 icon，如果使用less，生成这两个字体的css时，指定 prefix 为 icon
+ 如果使用这两个字体原生的前缀 fa 或者 zmdi，调用 Icon.setPrefix(prefix) 这个全局方法设置
+
+{`
+
+ {'
+
+ {'
+
+
+{`
+
+ 有两个实例方法控制旋转，spin 和 unspin
+{'icon.spin()\ricon.unspin()'}
+
+{``}
+
+
+ 示例见 FormControl
+{JSON.stringify(getLang(), null, 4)}
+ {'Message.show(content, type)'}
+ content:内容，必填，值为 string 或 element
+type:样式，会增加一个class messsage-[type]，默认值为 info
+ +Message.show("Info message.")}>info message
+{'Message.show("info message.")'}
+
+ Message.show("error message.", "error")}>error message
+{'Message.show("error message.", "error")'}
+
+ Message.show(title
span message
{'Message.show(title
span message, "warning")'}
+
+ Message.show(
{'Message.success(
+
+ 默认会添加 message-extend 类，可以通过这个类进行扩展。
+{`第 ${i} 层Modal`}
) + } + + let options = { + header: `第 ${index} 层Modal`, + width: width, + content: ( + + ), + onClose: () => { + this.setState({ index: index - 1 }) + }, + buttons: { + '关闭': true + } + } + Modal.open(options) + this.setState({ index }) + } + + render () { + let openOptions = { + header: '一个弹出表单', + content: ( +
+{`options = {
+ clickaway: {bool}, // 为 true 时，点击页面空白部分关闭Modal，默认值为 false
+ header: {string|element}, // 标题，值为 string 或者 ReactElement，可为空
+ content: {string|element}, // 内容，值为 string 或者 ReactElement，必填
+ width: {int|string}, // 宽度，默认值为 500
+ onClose: function, // 当Modal关闭时触发
+ buttons: {
+ {text}: function // text 为按钮文字，function 返回 true 或者值为 true，关闭 Modal
+ }
+}`}
+
+
+{`Modal.open(
+ header: '一个弹出表单',
+ content: (
+
+
+
+ ),
+ width: 700,
+ buttons: {
+ '取消': true,
+ '重置': () => {
+ let form = this.refs.form
+ form.setData({})
+ },
+ '确定': () => {
+ let form = this.refs.form
+ let suc = form.validate()
+ if (suc) {
+ alert(JSON.stringify(form.getValue()))
+ return true
+ }
+ }
+ }
+)`}
+
+
+ {`Modal.alert('这是一个alert')`}
+
+
+{`Modal.confirm(
+
+ 如果你知道要做什么，请点确定。
+ 如果你不知道，点取消吧。
+ ,
+ () => { alert('点击了确定') }
+)`}
+
+
+
+{`multOpen () {
+ let index = this.state.index + 1,
+ width = Math.ceil((Math.random() + 1) * 400),
+ ps = []
+
+ for (var i = 1; i <= index; i++) {
+ ps.push({'第 ' + i + ' 层Modal'}
)
+ }
+
+ let options = {
+ header: '第 ' + index + ' 层Modal',
+ width: width,
+ content: (
+
+ ),
+ onClose: () => {
+ this.setState({ index: index - 1 })
+ },
+ buttons: {
+ '关闭': true
+ }
+ }
+ Modal.open(options)
+ this.setState({ index })
+}
+mult open
+`}
+
+
+{`
+
+ index: this.setState({index: parseInt(v)})} />
+size: this.setState({size: parseInt(v)})} />
+total: this.setState({total: parseInt(v)})} />
+pages: this.setState({pages: parseInt(v)})} />
+
+{`
+
+
+ {'[{"text":"北京","id":"beijing"},{"text":"上海", "id":"shanghai"}]'}
+ {'[{"cn":"北京","en":"beijing"},{"cn":"上海", "en":"shanghai"}]'}
+ {'["北京","上海","广州"]'}
+
+ {'
+
+{`data = [
+ { "id": "nanjing", "text": "南京" },
+ { "id": "beijing", "text": "北京" },
+ { "id": "guangzhou", "text": "广州" },
+ { "id": "shenzhen", "text": "深圳" },
+ { "id": "chengdu", "text": "成都" },
+ { "id": "chongqing", "text": "重庆" },
+ { "id": "shanghai", "text": "上海" }
+]`}
+
+
+ {'
+
+ {'
+
+ {'
+
+{`
+
+
+{`// 注册主题
+Rating.register('star', [
+ this.setState({ value })}
+/>
+
+maxValue: this.setState({ maxValue })}
+ value={this.state.maxValue} data={[5, 10, 12, 20]} />
+
+this.setState({
+ icons: checked ?
+ [this.setState({ readOnly })}
+ text={'readOnly'} />
+
+value: this.setState({ value: event.target.value })}
+ type="text" value={this.state.value} />
+`}
+
+
+{`
+模板使用 "{key}" 形式的字符串进行格式化。
+data 为简单数组(如["中国", "美国", "俄罗斯", "德国"])，时，所有模板无效。
+`}
+
+
+
+
+{`
+`}
+
+
+
+{`
+{`function (data) {
+ return
+}`}
+
+ {`this.refs.table.getChecked('name')`}
+ {this.state.checkedNames}
+
+{`let pagination = this.setState({ filters })} style={{marginBottom: 20}} local={true} options={filterOptions} />
+
+
+`}
+
+
+{`
+
+
+
+{` this.refs.textClick.getDOMNode().innerText = 'clicked ' + item.text}
+ textTpl="{text}({id})"
+ valueTpl="{id}"
+ value={this.state.value}
+ open={true}
+ sep={this.state.sep}
+/>
+
+this.setState({ selectAble: value })}
+ checked={this.state.selectAble} text="selectAble" />
+this.setState({ readOnly: value })}
+ checked={this.state.readOnly} text="readOnly" />
+this.setState({ greedy: value })}
+ checked={this.state.gre} text="greedy" />
+Switch Key
+`}
+
+
+ {this.state.treeData}
+
+{`
+
+
+{`
+ "+e+"",n=n.firstChild,i&&a(n,i,!0),c({h:t,j:i,c:n,i:1}),n.innerHTML},prettyPrint:u.prettyPrint=function(t,i){function n(){for(var i=u.PR_SHOULD_USE_CONTINUATION?f.now()+250:1/0;l.length>g&&i>f.now();g++){for(var s=l[g],h=w,d=s;d=d.previousSibling;){var p=d.nodeType,S=(7===p||8===p)&&d.nodeValue;if(S?!/^\??prettify\b/.test(S):3!==p||/\S/.test(d.nodeValue))break;if(S){h={},S.replace(/\b(\w+)=([\w%+\-.:]+)/g,function(e,t,i){h[t]=i});break}}if(d=s.className,(h!==w||v.test(d))&&!b.test(d)){for(p=!1,S=s.parentNode;S;S=S.parentNode)if(C.test(S.tagName)&&S.className&&v.test(S.className)){p=!0;break}if(!p){if(s.className+=" prettyprinted",p=h.lang,!p){var O,p=d.match(y);!p&&(O=r(s))&&x.test(O.tagName)&&(p=O.className.match(y)),p&&(p=p[1])}if(L.test(s.tagName))S=1;else var S=s.currentStyle,_=o.defaultView,S=(S=S?S.whiteSpace:_&&_.getComputedStyle?_.getComputedStyle(s,e).getPropertyValue("white-space"):0)&&"pre"===S.substring(0,3);_=h.linenums,(_="true"===_||+_)||(_=(_=d.match(/\blinenums\b(?::(\d+))?/))?_[1]&&_[1].length?+_[1]:!0:!1),_&&a(s,_,S),m={h:p,c:s,j:_,i:S},c(m)}}}l.length>g?setTimeout(n,250):"function"==typeof t&&t()}for(var s=i||document.body,o=s.ownerDocument||document,s=[s.getElementsByTagName("pre"),s.getElementsByTagName("code"),s.getElementsByTagName("xmp")],l=[],h=0;s.length>h;++h)for(var d=0,p=s[h].length;p>d;++d)l.push(s[h][d]);var s=e,f=Date;f.now||(f={now:function(){return+new Date}});var m,g=0,y=/\blang(?:uage)?-([\w.]+)(?!\S)/,v=/\bprettyprint\b/,b=/\bprettyprinted\b/,L=/pre|xmp/i,x=/^code$/i,C=/^(?:pre|code|xmp)$/i,w={};n()}};"function"==typeof define&&define.amd&&define("google-code-prettify",[],function(){return S})}()}(); \ No newline at end of file diff --git a/app/venders/react-0.14.0.js b/app/venders/react-0.14.0.js new file mode 100644 index 0000000..8e4bbee --- /dev/null +++ b/app/venders/react-0.14.0.js @@ -0,0 +1,16 @@ +/** + * React v0.14.0 + * + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + */ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.React=e()}}(function(){return function e(t,n,r){function o(i,u){if(!n[i]){if(!t[i]){var s="function"==typeof require&&require;if(!u&&s)return s(i,!0);if(a)return a(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var c=n[i]={exports:{}};t[i][0].call(c.exports,function(e){var n=t[i][1][e];return o(n?n:e)},c,c.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i
+{``}
+
+
+ + {' '} + +
+ +
+{`
+`}
+
+
+ + {' '} + +
+{'\r'}
+
+ + {' '} + {' '} + {' '} + {' '} + {' '} + +
+ +
+{`
+
+
+
+
+
+`}
+
+ 需要扩展可以添加className
++ +
+{''}
+
+ + +
+{''}
+
+ 两个实例方法 enable（启用） 和 disable （禁用），可以传入一个参数（字符串或者element）替换按钮内容
++ {' '} + +
+ +
+{`
+`}
+
+
+
+{`disableExample: function (event) {
+ var button = this.refs.button;
+ if (event.target.checked) {
+ button.disable(
+
+
+{`
+
+
+
{'
+
+
+
{'
+
+ 获取值，选中状态下如果有 value，返回 value ，否则返回 true ，未选中状态返回 false
+ +如果 value 值与 props.value 相等，或者值为 true 或者 1 ，设置为选中状态
+ +
+{`
+
+
+ {'[{"text":"北京","id":"beijing"},{"text":"上海", "id":"shanghai"}]'}
+ {'[{"cn":"北京","py":"beijing"},{"cn":"上海", "py":"shanghai"}]'}
+ {'["北京","上海","广州"]'}
+
+ {'
+
+{`data = [
+ { "id": "nanjing", "text": "南京" },
+ { "id": "beijing", "text": "北京" },
+ { "id": "guangzhou", "text": "广州" },
+ { "id": "shenzhen", "text": "深圳" },
+ { "id": "chengdu", "text": "成都" },
+ { "id": "chongqing", "text": "重庆" },
+ { "id": "shanghai", "text": "上海" }
+]`}
+
+
+ {'
+
+ {'
+
+ {'
+
+ {'
+ Select, Tree 等控件需要从服务器远程获取数据的接口。
+接口返回一个方法，then成功回调，catch失败回调，complete成功与失败都会调用
+ReactUI内部提供了一个dataSource，使用Qwest实现的，可以用其他的Ajax框架自行实现。
+
+{`function (src, data, options) {
+ let stacks = {
+ 'then': [],
+ 'catch': [],
+ 'complete': []
+ },
+ promises = ['then', 'catch', 'complete'],
+ req = null,
+
+ qwest = function () {
+ req = Qwest.get(src, data, options)
+ promises.forEach(p => {
+ req[p](res => {
+ stacks[p].forEach(func => {
+ func(res)
+ })
+ })
+ })
+ return qwest
+ }
+
+ promises.forEach(p => {
+ qwest[p] = func => {
+ stacks[p].push(func)
+ return qwest
+ }
+ })
+
+ return qwest
+}`}
+
+
+{`
+
+ {`
+
+ {`
+
+ {`
+
+ {`
+
+ {`
+
+{`
+
+
+{`startWidth: function (d, value) {
+ return d.name.indexOf(value) === 0
+}`}
+
+ 示例见 Table。
+
+{`let options = [{
+ label: '姓名',
+ name: 'name',
+ ops: ['like', '=', 'startWidth']
+}, {
+ label: '年龄',
+ name: 'age',
+ ops: ['>=', '<'],
+ type: 'number'
+}, {
+ label: '生日',
+ name: 'birthday',
+ ops: ['>=', '<'],
+ type: 'datetime'
+}, {
+ label: '地区',
+ name: 'office',
+ ops: ['='],
+ type: 'select',
+ props: { data: ['Tokyo', 'Singapore', 'New York', 'London', 'San Francisco'] }
+}, {
+ label: '国籍',
+ name: 'country',
+ ops: ['='],
+ type: 'select',
+ props: { data: dataSource('json/countries.json'), optionTpl: '{country}', valueTpl: '{en}' }
+}]
+ this.setState({ filterText: JSON.stringify(fs) })} options={options} />
+`}
+
+
+{``}
+
+
+ 0.3 版更新，From 不再提供内置 Ajax 提交功能，需要在onSubmit中进行提交
+ +注：本文档使用了一个 json 文件模拟服务端返回数据，提交会提示 500 错误
+ + + +
+{`
+`}
+
+
+ 获取当前所有注册FormControl的value，结果为json
+ +Form 下不能使用 ref 获取引用，需要引用时使用 getReference 方法。name 为 FormControl 的 name
+{type} => {component}
+
+ {`
+ 一系列表单控件的马甲，统一封装用来实现表单数据验证，输入提示，动态创建表单等功能。可以通过 getReference() 这个方法获取被封装的控件。
+
+{`
+
+ FormControl 会根据这些属性自动验证输入，自动生成提示文字和错误信息，文字在 Lang 中设置。
+
+{`
+
+ text => Input
+
+ {`
+ textarea => Input
+
+ {`
+ select => Select
+
+{`
+ tree => Tree
+
+{`
+ checkbox => Checkbox
+
+ {`
+ checkbox-group => CheckboxGroup
+
+{`
+ radio-group => RadioGroup
+
+{`
+ rating => RadioGroup
+
+{`
+ upload => Upload
+
+{`
+ 可以使用 children 来处理一些复杂结构。注意每个 FormControl 只能有一个表单组件，类型必须和 FormControl 的 type 相同。
+
+{`
+
+ `}
+
+
+
+ FormControl 提供一个静态方法 register，将一个 Component 注册为 FormControl 成员。
+ 每个注册为 FormControl 的控件必须实现 getValue() , setValue(data) 这两个接口。
+
+{`FormControl.register(
+ type, // string，控件类型，唯一。如果同名，后注册的将会覆盖先注册的控件
+ render, // function，匹配到类型时，调用render方法返回相应控件
+ valueType, // 'string|array|number'，控件值类型，三选一，数据验证时调用
+)`}
+
+
+ 支持 font-awesome 和 material-design-iconic-font
+ 默认的前缀为 icon，如果使用less，生成这两个字体的css时，指定 prefix 为 icon
+ 如果使用这两个字体原生的前缀 fa 或者 zmdi，调用 Icon.setPrefix(prefix) 这个全局方法设置
+
+{`
+
+ {'
+
+ {'
+
+
+{`
+
+ 有两个实例方法控制旋转，spin 和 unspin
+{'icon.spin()\ricon.unspin()'}
+
+{``}
+
+
+ 示例见 FormControl
+{JSON.stringify(getLang(), null, 4)}
+ {'Message.show(content, type)'}
+ content:内容，必填，值为 string 或 element
+type:样式，会增加一个class messsage-[type]，默认值为 info
+ +Message.show("Info message.")}>info message
+{'Message.show("info message.")'}
+
+ Message.show("error message.", "error")}>error message
+{'Message.show("error message.", "error")'}
+
+ Message.show(title
span message
{'Message.show(title
span message, "warning")'}
+
+ Message.show(
{'Message.success(
+
+ 默认会添加 message-extend 类，可以通过这个类进行扩展。
+{`第 ${i} 层Modal`}
) + } + + let options = { + header: `第 ${index} 层Modal`, + width: width, + content: ( + + ), + onClose: () => { + this.setState({ index: index - 1 }) + }, + buttons: { + '关闭': true + } + } + Modal.open(options) + this.setState({ index }) + } + + render () { + let openOptions = { + header: '一个弹出表单', + content: ( +
+{`options = {
+ clickaway: {bool}, // 为 true 时，点击页面空白部分关闭Modal，默认值为 false
+ header: {string|element}, // 标题，值为 string 或者 ReactElement，可为空
+ content: {string|element}, // 内容，值为 string 或者 ReactElement，必填
+ width: {int|string}, // 宽度，默认值为 500
+ onClose: function, // 当Modal关闭时触发
+ buttons: {
+ {text}: function // text 为按钮文字，function 返回 true 或者值为 true，关闭 Modal
+ }
+}`}
+
+
+{`Modal.open(
+ header: '一个弹出表单',
+ content: (
+
+
+
+ ),
+ width: 700,
+ buttons: {
+ '取消': true,
+ '重置': () => {
+ let form = this.refs.form
+ form.setData({})
+ },
+ '确定': () => {
+ let form = this.refs.form
+ let suc = form.validate()
+ if (suc) {
+ alert(JSON.stringify(form.getValue()))
+ return true
+ }
+ }
+ }
+)`}
+
+
+ {`Modal.alert('这是一个alert')`}
+
+
+{`Modal.confirm(
+
+ 如果你知道要做什么，请点确定。
+ 如果你不知道，点取消吧。
+ ,
+ () => { alert('点击了确定') }
+)`}
+
+
+
+{`multOpen () {
+ let index = this.state.index + 1,
+ width = Math.ceil((Math.random() + 1) * 400),
+ ps = []
+
+ for (var i = 1; i <= index; i++) {
+ ps.push({'第 ' + i + ' 层Modal'}
)
+ }
+
+ let options = {
+ header: '第 ' + index + ' 层Modal',
+ width: width,
+ content: (
+
+ ),
+ onClose: () => {
+ this.setState({ index: index - 1 })
+ },
+ buttons: {
+ '关闭': true
+ }
+ }
+ Modal.open(options)
+ this.setState({ index })
+}
+mult open
+`}
+
+
+{`
+
+ index: this.setState({index: parseInt(v)})} />
+size: this.setState({size: parseInt(v)})} />
+total: this.setState({total: parseInt(v)})} />
+pages: this.setState({pages: parseInt(v)})} />
+
+{`
+
+
+ {'[{"text":"北京","id":"beijing"},{"text":"上海", "id":"shanghai"}]'}
+ {'[{"cn":"北京","en":"beijing"},{"cn":"上海", "en":"shanghai"}]'}
+ {'["北京","上海","广州"]'}
+
+ {'
+
+{`data = [
+ { "id": "nanjing", "text": "南京" },
+ { "id": "beijing", "text": "北京" },
+ { "id": "guangzhou", "text": "广州" },
+ { "id": "shenzhen", "text": "深圳" },
+ { "id": "chengdu", "text": "成都" },
+ { "id": "chongqing", "text": "重庆" },
+ { "id": "shanghai", "text": "上海" }
+]`}
+
+
+ {'
+
+ {'
+
+ {'
+
+{`
+
+
+{`// 注册主题
+Rating.register('star', [
+ this.setState({ value })}
+/>
+
+maxValue: this.setState({ maxValue })}
+ value={this.state.maxValue} data={[5, 10, 12, 20]} />
+
+this.setState({
+ icons: checked ?
+ [this.setState({ readOnly })}
+ text={'readOnly'} />
+
+value: this.setState({ value: event.target.value })}
+ type="text" value={this.state.value} />
+`}
+
+
+{`
+模板使用 "{key}" 形式的字符串进行格式化。
+data 为简单数组(如["中国", "美国", "俄罗斯", "德国"])，时，所有模板无效。
+`}
+
+
+
+
+{`
+`}
+
+
+
+{`
+{`function (data) {
+ return
+}`}
+
+ {`this.refs.table.getChecked('name')`}
+ {this.state.checkedNames}
+
+{`let pagination = this.setState({ filters })} style={{marginBottom: 20}} local={true} options={filterOptions} />
+
+
+`}
+
+
+{`
+
+
+
+{` this.refs.textClick.getDOMNode().innerText = 'clicked ' + item.text}
+ textTpl="{text}({id})"
+ valueTpl="{id}"
+ value={this.state.value}
+ open={true}
+ sep={this.state.sep}
+/>
+
+this.setState({ selectAble: value })}
+ checked={this.state.selectAble} text="selectAble" />
+this.setState({ readOnly: value })}
+ checked={this.state.readOnly} text="readOnly" />
+this.setState({ greedy: value })}
+ checked={this.state.gre} text="greedy" />
+Switch Key
+`}
+
+
+ {this.state.treeData}
+
+{`
+
+
+{`
+