node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »

jing_react_components

安装组件

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 默认解析器 ---