安装组件
npm install jing_react_components组件使用
- commonJS方式
import { WcTable, WcTooltip, AutoComplete, InfoTable, SmartInput, DynKVInput, CheckBoxGroup, RadioGroup, Selector, ButtonList, SplitLine, MultipleSelector } form 'jing_react_components';- 前端调用
<script src="src/dist/index.js"></script>API
- 下拉列表 Selector
使用范例
var userlist = [{userId:1,userName:"张三"},{userId:2,userName:"李四"},{userId:3,userName:"王五"}];
<Selector label="用户" ref='user' url="/user/listAll.do" method="get" itemValue="userId" itemLabel="userName" lxs='3' wxs="6"/>
<Selector label="用户" ref='user' data={userlist} itemValue="userId" itemLabel="userName" lxs='3' wxs="6"/>参数说明
| 属性 | 类型 | 说明 | 默认 | 是否必须 |
|---|---|---|---|---|
| label | string | 标签名 | -- | 否 |
| ref | string | 用户获取属性值，具体获取方法为 this.refs[ref].name.getValue() | -- | 是 |
| url | string | 使用ajax方法获取，默认为post方式，如果需要使用get方式，需要配置method="get" | -- | 否 |
| datas | Array | 本地数据方式 | -- | 否 |
| itemValue | string | 下拉列表的值属性，对应数据对象中的一个属性 | -- | 否 |
| itemLabel | string | 下拉列表的显示属性，对应数据对象中的一个属性 | -- | 否 |
| lxs | number | 标签在栅格系统占用的列数 | 1 | 否 |
| wxs | number | 组件内容在栅格系统中占用的猎术 | 11 | 否 |
- 多选框 CheckBoxGroup
使用范例
var userlist = [{userId:1,userName:"张三"},{userId:2,userName:"李四"},{userId:3,userName:"王五"}];
<CheckBoxGroup label="权限" itemValue="key" itemLabel="label" datas={this.state.authdata} onAllChange={this.handleAllAuthCheck} onChange={this.handleAuthCheck}/>参数说明
| 属性 | 类型 | 说明 | 默认 | 是否必须 |
|---|---|---|---|---|
| label | string | 标签名 | -- | 否 |
| ref | string | 用户获取属性值，具体获取方法为 this.refs[ref].name.getValue() | -- | 是 |
| datas | Array | 数据源 | -- | 否 |
| itemValue | string | 下拉列表的值属性，对应数据对象中的一个属性 | -- | 否 |
| itemLabel | string | 下拉列表的显示属性，对应数据对象中的一个属性 | -- | 否 |
| onAllChange | function | 选择全部按钮时的操作函数 | -- | 是 |
| onChange | function | 单选一个的操作函数 | -- | 是 |
| lxs | number | 标签在栅格系统占用的列数 | 1 | 否 |
| wxs | number | 组件内容在栅格系统中占用的猎术 | 11 | 否 |
- 单选RadioGroup， 除了没有onAllChange，用法跟CheckBoxGroup一样
参数说明
| 参数 | 类型 | 说明 | 默认值 | 必须 |
|---|---|---|---|---|
| title | string | 表格左边标题名，不设置的话就没有左边标题 | -- | 否 |
| titleWidth | number | 表示左边标题的宽度 | 30 | 否 |
| mode | string | 表示表格的展示模式，当模式为垂直（v）时，必须添加values和labels属性，如果是水平模式（h），则需添加infos属性。默认为水平模式（h） | h | 否 |
| infos | Array | 水平模式数据源，格式见（水平模式values参数） | null | 否 |
| colsize | number | 与水平模式配合使用，表格每行显示多少个信息 | 6 | 否 |
| labels | Array | 垂直模式时，信息表格的标题，详情见（垂直模式labels参数） | -- | 否 |
| values | Array | 垂直模式时，为数据对象数组，如[{a:1,b:2,c:3},{a:1,b:2,c:3}] | -- | 否 |
| bordered | bool | 表格是否有左右边 | false | 否 |
| titleStyle | object | 表头样式 | false | 否 |
| labelStyle | object | 标签样式 | false | 否 |
| contentStyle | object | 内容样式 | false | 否 |
水平模式infos参数
| 参数 | 类型 | 说明 | 默认值 | 必须 |
|---|---|---|---|---|
| label | string | 标签 | -- | 否 |
| value | string | 数值 | -- | 否 |
| width | number or string | 表格列的宽度，数字或者百分比，默认是400 | false | 否 |
| render | function | 表格渲染回调函数。垂直模式包含两个参数，第一个是当前列对应的值，第二个是当前数据所在行的行数据；为水平模式时，只包含一个值，即当前列对应的数据值 | false | 否 |
| filter | function | 表格格式化回调函数。垂直模式包含两个参数，第一个是当前列对应的值，第二个是当前数据所在行的行数据；为水平模式时，只包含一个值，即当前列对应的数据值 | false | 否 |
垂直模式labels参数
| 参数 | 类型 | 说明 | 默认值 | 必须 |
|---|---|---|---|---|
| label | string | 标签 | -- | 否 |
| key | string | 当前标签对应的数据key。例如数据数组是[{a:1,b:2}]，key的取值即为a或者b | -- | 否 |
| width | number or string | 表格列的宽度，数字或者百分比，默认是400 | false | 否 |
| render | function | 表格渲染回调函数。垂直模式包含两个参数，第一个是当前列对应的值，第二个是当前数据所在行的行数据；为水平模式时，只包含一个值，即当前列对应的数据值 | false | 否 |
| filter | function | 表格格式化回调函数。垂直模式包含两个参数，第一个是当前列对应的值，第二个是当前数据所在行的行数据；为水平模式时，只包含一个值，即当前列对应的数据值 | false | 否 |
Demo
// 水平模式
var infos = [
{label:"借款",value: 200},
{label:"已还",value: 100},
{label:"未还",value: 100 ,render:function(value){
return <span style={{color: "red", fontWeight: "bold", fontSize: 14}}>{value}</span>
}}，
{label:"利息",value: 100}
]
<InfoTable title="申请单信息" infos={infos} colsize={5} mode="h"/>
// 垂直模式
var labels = [
{key:"name", label:"姓名"},
{key:"type", label:"类型"， filter: function(value, row){
return value == 1 ? "男" : "女";
}},
{key:"phone", label:"电话"},
{key:"desc", label:"描述", width: 500, render: function(value, row){
var targetvalue = (value && value.length > 30) ? value.substr(0,30) : value;
return <WcTooltip targetvalue={targetvalue} tipvalue={value} placement="top" targetStyle="a" poptitle="审批详情" tipStyle="pop"/>;
}
}
];
var values = [
{name: "周慢慢", type:1, phone: "18500001234", desc:"百度用户，百度百科核心用户，百度百科蝌蚪团成员，百度百科任务评审团成员，原百度百科督察院成员，原百度百科编修院成员，首批百度百科分类管理员，首任百度百科历史类词条质量提升小组组长，百度百科第三届金蝌蚪奖获得者。"},
{name: "马诺诺", type:2, phone: "18345678945", desc:"犀利的言论而迅速在网络上蹿红，被网友们称作“拜金女”"},
{name: "刘国明", type:1, phone: "15512345678", desc:"未知"},
{name: "武三思", type:2, phone: "18698653214", desc:"并州文水（今属山西）人，武周宰相，荆州都督武士彟之孙，女皇武则天的侄子"}
]
<InfoTable title="申请单信息" values={values} labels={labels} mode="v"/>- 表格属性
| 参数 | 类型 | 说明 | 默认值 | 必须 | 是否新增 |
|---|---|---|---|---|---|
| datas | Array or String | 表格的数据源；支持数据或者字符串两种类型；当为数组类型时，表示当前是前端分页模式，当为字符串类型时，表示后端分页模式，后端分页是使用jquery的ajax来请求加载数据 | [] | 是 | 否 |
| method | string | 当datas为string时，可增加该项指定ajax的type类型，取值跟jquery的ajax类型一样，例如get，post等，默认使用post方式获取数据 | -- | 否 | 是 |
| header | Obj{descheader:Array,dataheader:Array} | 表格的表头数据，用于显示表头名；是一个包含descheader对象数组和dataheader对象数组的大对象；descheader用于多行表头的展示,是可选的，dataheader用于数据列表头的展示，是必须的 | null | 是 | 否 |
| pkey | string | 数据主键；该属性不是必须的，但是有数据列可以唯一确定该行数据时，推荐指定该属性，这样有利于数据的排序和内部操作 | -- | 是 | 否 |
| rownumbers | boolean | 表格行号 | false | 否 | 是 |
| checkbox | boolean | 表格多选框 | false | 否 | 是 |
| onRowSelect | function | 行操作回调函数，默认参数为所有checkbox选中的行数据数组对象，指定pkey后，数据内部存储的是pkey数组；需要跟checkbox结合使用 | -- | 否 | 否 |
| nopagination | boolean | 表格分页组件，使用该组件后，会显示分页标签 | true | 否 | 是 |
| pagelist | Array | 每页显示的数据数数组，用于选择每页展示数量的选择；当nopagination为true时，该属性失效 | [] | 否 | 是 |
| trStyle | object | 样式类，作用于行样式 | -- | 否 | |
| tdStyle | object | 样式类，作用于列样式 | -- | 否 |
- 表头参数说明
- descheader属性
| 参数 | 类型 | 说明 | 默认值 | 必须 |
|---|---|---|---|---|
| colspan | number | 该头横跨的列数 | 1 | 否 |
| title | string | 表头标签 | "" | 否 |
- dataheader属性
| 参数 | 类型 | 说明 | 默认值 | 必须 |
|---|---|---|---|---|
| key | string | 表头对应数据项的key | -- | 是 |
| title | string | 表头所显示的内容 | -- | 是 |
| sort | bool | 是否支持改列表头排序，如果表格的sort参数设置为false后，此设置将无效 | false | 否 |
| width | Number | 该列所在宽度 | -- | 否 |
| render | function(key,row,rowkey) | 列数据渲染函数；key为当前行对应列数据项的值，row表示当前行数据对象，rowkey表示当前行的主键值 | -- | 否 |
| filter | function(key,row,rowkey) | 列数据渲染函数；key为当前行对应列数据项的值，row表示当前行数据对象，rowkey表示当前行的主键值 | -- | 否 |
| style | object | 定义列样式，是一个style的类，如果定义了此样式，表格组件上的tdStyle在数据上样式将不会生效 | -- | 否 |
- demo
// 表头
labels:{
descheader:[[
{title:"",colspan:1},
{title:"收款计划",colspan:4},
{title:"罚息",colspan:3},
{title:"应收",colspan:5},
{title:"已收",colspan:1},
{title:"减免",colspan:1},
{title:"操作",colspan:1}
]],
dataheader:[
{key:"installment",title:"期次"},
{key:"repayPlanTime",title:"收款时间",width:150},
{key:"repayAmount",title:"本金"},
{key:"serviceAmount",title:"服务费"},
{key:"interestAmount",title:"利息"},
{key:"overdueDays",title:"逾期天数",width:150},
{key:"overdueBaseAmount",title:"罚款基数"},
{key:"overdueAmount",title:"总额"},
{key:"repayAmount",title:"本金"},
{key:"serviceAmount",title:"服务费"},
{key:"interestAmount",title:"利息"},
{key:"overdueAmount",title:"罚息"},
{key:"sumAmount",title:"总计"},
{key:"repayedAmount",title:"已收"},
{key:"reductionAmount",title:"金额"},
{key:"relaunch",title:"操作",render:function(key,row,rowkey){
if(key == true){
console.log(row);
var handle = function(){
self.handleReschedule(row);
}
return <Button bsStyle="info" onClick={handle}>重发起</Button>;
}else{
return null;
}
}}
]
}
// 表格
<WcTable datas={values} header={labels} nopagination/>使用范例
<WcTooltip targetvalue={targetvalue} tipvalue={tipvalue} placement="right" targetStyle="a" poptitle="审批详情" tipStyle="pop"/>参数说明
| 属性 | 类型 | 说明 | 默认 | 是否必须 |
|---|---|---|---|---|
| targetvalue | string | 目标数值，也就是界面显示的数据 | -- | 是 |
| tipvalue | string | tips显示的值 | -- | 是 |
| placement | string | tips显示的位置，可取值[top, right, bottom, left] | right | 否 |
| targetStyle | string | 目标值显示样式，可取值[button,a,span] | span | 否 |
| tipStyle | string | tips样式，可取值[pop,default] | default | 否 |
| poptitle | string | pop样式时的标题，当tipStyle为pop时，必须设置 | -- | 否 |
| trigger | string | tips显示触发方式，可取值[click, hover, focus] | hover | 否 |
DEMO
// 本地数据源模式
// 对象数组
var datas1 = [
{key: "11541221515212121212"},
{key: "24551310325198491161"},
{key: "13198451561651503201"},
{key: "41561915615150561311"},
{key: "15619062165160356161"},
{key: "00954515649856115615"},
{key: "79651655614564104516"},
{key: "89841561561156156133"}
];
<AutoComplete label="状态" datas={data1} itemValue="key" wxs={3} onSelect={this.handleAutoCompleteSelect}/>
// 对象数组
var data2 = [
{key: "11541221515212121212", value: "11541221515212121212"},
{key: "24551310325198491161", value: "24551310325198491161"},
{key: "13198451561651503201", value: "13198451561651503201"},
{key: "41561915615150561311", value: "41561915615150561311"},
{key: "15619062165160356161", value: "15619062165160356161"},
{key: "00954515649856115615", value: "00954515649856115615"},
{key: "79651655614564104516", value: "79651655614564104516"},
{key: "89841561561156156133", value: "89841561561156156133"}
];
// var value = this.refs.user.refs.name.refs.input.getDOMNode().data;
// var label = this.refs.user.refs.name.getValue();
<AutoComplete label="状态" datas={data2} itemValue="value" itemLabel="key" wxs={3} ref="user"/>
// 字符数组
var data3 = ["11541221515212121212","24551310325198491161","13198451561651503201",
"41561915615150561311","15619062165160356161","00954515649856115615",
"79651655614564104516", "89841561561156156133"];
// var handleAutoCompleteSelect = function(data){
// data格式 {value: "", label: ""}
// }
<AutoComplete label="状态" datas={data3} wxs={3} onSelect={handleAutoCompleteSelect}/>
// 远程数据源模式
var data4 = {
url: "/testAuto",
method: "post",
length: 10
};
<AutoComplete label="状态" datas={data4} itemValue="key" wxs={3} onSelect={this.handleAutoCompleteSelect}/>API
| 属性 | 类型 | 说明 | 默认 | 是否必须 |
|---|---|---|---|---|
| label | string | 组件标签名 | -- | 是 |
| datas | object or array | 数据源 | -- | 是 |
| itemValue | string | 用于指定下拉项对应的值属性 | value | 否 |
| itemLabel | string | 用于指定下拉项对应的显示属性 | label | 否 |
| lxs | number | 标签在栅格系统中的比例 | 1 | 否 |
| wxs | number | 输入栏在栅格系统中的比例 | 11 | 否 |
| width | number | 下拉列表显示宽度 | 100% | 否 |
| onSelect | function | 输入值和选择数据的回调函数，返回参数为{value:"",label:""}。如果没有指定该参数想获取输入栏的值，可指定一个ref参数。 例如指定ref为user，则当前的值为this.refs.user.refs.name.refs.input.getDOMNode().data； 显示的值为this.refs.user.refs.name.getValue() |
-- | 否 |
DEMO
var resolver = {
// 时间解析器。输出两个对象starttime，endtime，格式为YYYY-MM-DD，且endtime要晚于starttime。
// 例如在输入框内输入2013-01-01和2015-01-01。搜索条件会变成{starttime: "2013-01-01", endtime: "2013-05-01"}，如果只输入一个时间类型的值，就只匹配第一个时间starttime对象
date:[{out: "starttime", format: /^\d{4}-\d{2}-\d{2}$/ },{out: "endtime", format: /^\d{4}-\d{2}-\d{2}$/ , later: "starttime"}],
// 多选对象解析器。输出三个对象user，address，worker。
// 例如在输入框内输入了张三，李四，湖北，姑姑。搜索条件会变成{user: ["张三","李四"], address:["湖北"], worker:[1]}
enum:[{out: "user", options: ["张三","李四", "王五"]},{out: "address", options: ["浙江","湖北", "上海"]}, {out: "worker", type: "object", options: [{value: 1, label: "姑姑"}, {value: 2, label: "过儿"}]}],
// 单选对象解析器。输出两个对象number，status。
// 例如输入120,121,在线。搜索条件会变成{number: 121, status: "在线"}
unique:[{out: "number", options: ["120","121", "122"]}, {out: "status", type: "object", options: [{value: 1, label: "在线"}, {value: 2, label: "离线"}]}],
// 数字对象解析器。输出两个对象age，price。
// 例如输入50, 110.30。搜索条件会变成{age: 50, price: 110.30}
number:[{out: "age", min: 0, max: 100 }, {out: "price", min: 49, max: 149 }],
// 字符对象解析器。输出四个对象name， phone，orderid，id。
// 例如输入andy, 13512345678, 687592, 452654198812169876。搜索条件即为{name: "andy", phone: "13512345678", orderid: "687592", id: "452654198812169876"}
string:[{out: "name", format: /^\w{2,4}$/}, {out: "phone", format: /^\d{11}$/}, {out: "orderid", format: /^\d{5,10}$/}, {out: "id", format: /^\d{18}$/}],
// 默认对象解析器。以上所有不被匹配的数据项将被匹配到desc属性上。但值匹配最后一个。
def: {out: "desc"}
};
// value为上面图示中输出格式的json对象
var handleSearch = function(value){
console.log(value);
}
<SmartInput label="状态" wxs={8} resolver={resolver} onSearch={handleSearch}/>API
| 属性 | 类型 | 说明 | 默认 | 是否必须 |
|---|---|---|---|---|
| label | string | 组件标签名 | -- | 是 |
| lxs | number | 标签在栅格系统中的比例 | 1 | 否 |
| wxs | number | 输入栏在栅格系统中的比例 | 11 | 否 |
| resolver | object | 解析器，详情见下表 | --- | 是 |
| onSearch | function | 回调函数，用于触发检索事件，参数为输入组件输出的json串，详情见demo | -- | 否 |
resolver
| 属性 | 类型 | 说明 | 默认 | 是否必须 |
|---|---|---|---|---|
| date | array | 日期解析器规则对象数组。对象格式为{out: [字符对象，表示要输出的对象名称], format: [正则表达式，表示日期的格式], later: [字符对象，用于指定当前日期要晚于某个日期]}。当有多个事件时，按顺序匹配，如果输入的事件串超过解析器个数，超过的会被忽略 | -- | 是 |
| enum | array | 多选类型数组，用于取代复选框。对象格式为{out: [字符对象，表示要输出的对象名称], options:[object, object...]}，options中的object对象可以是字符串，也可以是如下格式的对象{value: object, label: object} | 1 | 否 |
| unique | array | 单选类型数组，用于取代单选框。对象格式为{out: [字符对象，表示要输出的对象名称], options:[object, object...]}，options中的object对象可以是字符串，也可以是如下格式的对象{value: object, label: object}。如果匹配多个选择项时，会默认匹配最后一项 | 11 | 否 |
| number | array | 数字类型数组。对象格式为{out: [字符对象，表示要输出的对象名称], min: number, max: number} | --- | 是 |
| string | array | 字符类型数组.对象格式为{out: [字符对象，表示要输出的对象名称], format: [正则表达式，用于匹配数据的格式]} | --- | 否 |
| def | object | 默认解析器 | --- | 否 |