树状结构
基本用法：McrbHttpClient.treeModel.init(options,callback);
参数options说明：
| 参数 | 说明 | 类型 | 可选值 |
| ele_id | 挂载元素的id | String | 必填 |
| style_type | 类型：1基础类型，2列表多层级类型 | int | 默认值：1 |
| width | 设置容器宽度 | String | 默认值100% |
| themeColor | 设置主题色 | String | 默认值#4C90FF |
| ischecked | 是否开启复选框，仅style_type=1时可使用； 获取选中项数据方法：McrbHttpClient.treeModel.getChecked(id) | boolean | 默认值false |
| toolsShow | 是否开启节点操作； | boolean | 默认值false |
| toolsData | 节点操作设置参数；仅当节点操作开启（toolsShow:true）时起作用； 如:[{{type:'look',text:'查看',className:'lookBtn'}}]; 说明：type设置功能类型；text:设置按钮显示文字；className：设置按钮样式 | Array | 默认值[] |
| data | 数据；var tree_data = [ { id : '100000', name_text : '廊坊银行总行', children : [ { id : '110000', name_text : '廊坊分行', children : [ { id : '111000', name_text : '廊坊银行金光道支行', }, { id : '112000', name_text : '廊坊银行解放道支行', children : [ { id : '112100', name_text : '廊坊银行广阳道支行', }, { id : '112200', name_text : '廊坊银行三大街支行', } ] }, { id : '113000', name_text : '廊坊银行开发区支行', } ] } ] }, { id: '200000', name_text: '邯郸银行总行', children: [ { id: '210000', name_text: '邯郸分行', children: [ { id: '213000', name_text: '邯郸银行开发区支行', }, { id: '212000', name_text: '邯郸银行解放道支行', children: [ { id: '212200', name_text: '邯郸银行三大街支行', }, { id: '212100', name_text: '邯郸银行广阳道支行', } ] }, { id: '211000', name_text: '邯郸银行金光道支行', } ] } ] } ] | Array | 必填 |
参数callback说明：
| 参数 | 说明 | 类型 | 可选值 |
| callback | 回调函数 | —— | 点击回调函数，返回点击项数据 |
开启复选框时获取选中的数据：
// treemodel3 挂载元素的id
McrbHttpClient.treeModel.getChecked('treemodel3');
用法实例1：
<div id="treemodel1"></div>
// 基本用法
var tree_data = [
{
id : '100000',
name_text : '廊坊银行总行',
children : [
{
id : '110000',
name_text : '廊坊分行',
children : [
{
id : '111000',
name_text : '廊坊银行金光道支行',
},
{
id : '112000',
name_text : '廊坊银行解放道支行',
children : [
{
id : '112100',
name_text : '廊坊银行广阳道支行',
},
{
id : '112200',
name_text : '廊坊银行三大街支行',
}
]
},
{
id : '113000',
name_text : '廊坊银行开发区支行',
}
]
}
]
},
{
id: '200000',
name_text: '邯郸银行总行',
children: [
{
id: '210000',
name_text: '邯郸分行',
children: [
{
id: '213000',
name_text: '邯郸银行开发区支行',
},
{
id: '212000',
name_text: '邯郸银行解放道支行',
children: [
{
id: '212200',
name_text: '邯郸银行三大街支行',
},
{
id: '212100',
name_text: '邯郸银行广阳道支行',
}
]
},
{
id: '211000',
name_text: '邯郸银行金光道支行',
}
]
}
]
}
]
McrbHttpClient.treeModel.init({
ele_id:'treemodel1',
style:1,
width:'300px',
themeColor:'#f57e00',
data:tree_data,
},function(e){
console.log(e);
});
效果展示
用法实例2：
<div id="treemodel2"></div>
// 列表多层级
var cdata = [
{
id:'1',
name_text:'栏目1',
children:[
{
id:'5',
name_text:'栏目1-1',
children:[]
},{
id:'6',
name_text:'栏目1-2',
children:[
{
id:'7',
name_text:'栏目1-2-1',
children:[]
},{
id:'8',
name_text:'栏目1-2-2',
children:[
{
id:'9',
name_text:'栏目1-2-2-1',
children:[]
},
]
}
]
}
]
},{
id:'2',
name_text:'栏目2',
children:[
{
id:'10',
name_text:'栏目2-1',
children:[]
},{
id:'11',
name_text:'栏目2-2',
children:[]
},{
id:'12',
name_text:'栏目2-3',
children:[
{
id:'13',
name_text:'栏目2-3-1',
children:[]
},{
id:'17',
name_text:'栏目2-3-2',
children:[]
},
]
},
]
},{
id:'3',
name_text:'栏目3',
children:[
{
id:'14',
name_text:'栏目3-1',
children:[]
},{
id:'15',
name_text:'栏目3-2',
children:[
{
id:'16',
name_text:'栏目3-2-1',
children:[]
},
]
},
]
},{
id:'4',
name_text:'栏目4',
children:[]
},
];
McrbHttpClient.treeModel.init({
ele_id:'treemodel2',
style:2,
width:'500px',
themeColor:'#2ecc71',
toolsShow:true,
isAddBtn:false,
data:cdata
},function(e){
console.log(e);
});
效果展示
用法实例3：
获取选中数据<button style="background-color: transparent;padding: 5px 10px;border: 1px solid #ddd;border-radius: 4px;margin-bottom: 10px;" onclick="gettreedata()">获取选中数据</button>
<div id="treemodel3"></div>
// 基本用法
var tree_data = [
{
id : '100000',
name_text : '廊坊银行总行',
children : [
{
id : '110000',
name_text : '廊坊分行',
children : [
{
id : '111000',
name_text : '廊坊银行金光道支行',
},
{
id : '112000',
name_text : '廊坊银行解放道支行',
children : [
{
id : '112100',
name_text : '廊坊银行广阳道支行',
},
{
id : '112200',
name_text : '廊坊银行三大街支行',
}
]
},
{
id : '113000',
name_text : '廊坊银行开发区支行',
}
]
}
]
},
{
id: '200000',
name_text: '邯郸银行总行',
children: [
{
id: '210000',
name_text: '邯郸分行',
children: [
{
id: '213000',
name_text: '邯郸银行开发区支行',
},
{
id: '212000',
name_text: '邯郸银行解放道支行',
children: [
{
id: '212200',
name_text: '邯郸银行三大街支行',
},
{
id: '212100',
name_text: '邯郸银行广阳道支行',
}
]
},
{
id: '211000',
name_text: '邯郸银行金光道支行',
}
]
}
]
}
]
// 开启复选框
McrbHttpClient.treeModel.init({
ele_id:'treemodel3',
style:1,
width:'400px',
themeColor:'rgb(155,10,20)',
ischecked:true,
toolsShow:true,
isAddBtn:false,
data:tree_data,
});
// 获取选中项数据
function gettreedata(){
console.log(McrbHttpClient.treeModel.getChecked('treemodel3'));
}
效果展示
获取选中数据
返回顶部
热线电话
微信
扫一扫