jing_react_components v0.0.7

安装组件

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"/>

参数说明

• 多选框 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}/>

参数说明

• 单选RadioGroup， 除了没有onAllChange，用法跟CheckBoxGroup一样

参数说明

水平模式infos参数

垂直模式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"/>

• 表格属性

• 表头参数说明
• descheader属性

• dataheader属性

• 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"/>

参数说明

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

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

resolver