提交 7359501a 编写于 作者: I iotjin

add jh-tree

上级 a157018c
Component({
/**
* 组件的属性列表
*/
properties: {
model: Object,
open: {
type: Boolean,
value: false
},
},
/**
* 组件的初始数据
*/
data: {
open: false, //是否展开
isBranch: false, //是否有子级
},
/**
* 组件的方法列表
*/
methods: {
toggle: function (e) {
if (this.data.isBranch) {
this.setData({
open: !this.data.open,
})
}
},
tapItem: function (e) {
this.toggle()
var itemid = e.currentTarget.dataset.itemid;
// console.log('组件里点击的id: ' + itemid);
this.triggerEvent('clickItem', {
itemid: itemid
}, {
bubbles: true,
composed: true
});
}
},
ready: function (e) {
this.setData({
isBranch: Boolean(this.data.model.childNodes && this.data.model.childNodes.length),
open: this.properties.open
});
// console.log(this.data);
},
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"tree-row": "../jh-tree/tree-row"
}
}
\ No newline at end of file
<view class="container">
<view class="tr" catchtap='toggle' catchtap='tapItem' data-itemid='{{ model.id }}' data-value='{{ model.text }}'>
<view class="td col indent{{model.level}}">
<image wx:if="{{isBranch}}" src="{{open ? './ic_arrow_down.png' : './ic_arrow_right.png'}}" class='item-sImg'>
</image>
<image wx:else class='item-sImg'></image>
<text>{{ model.text }}</text>
</view>
</view>
<view wx:if='{{ isBranch }}' hidden='{{ !open }}'>
<tree-row wx:for='{{ model.childNodes }}' wx:key='id' model='{{ item }}'></tree-row>
</view>
</view>
\ No newline at end of file
.container {
--indent-width: 20rpx;
}
.col {
position: relative;
}
.indent1 {
text-indent: calc(var(--indent-width));
}
.indent2 {
text-indent: calc(var(--indent-width)*2);
}
.indent3 {
text-indent: calc(var(--indent-width)*3);
}
.indent4 {
text-indent: calc(var(--indent-width)*4);
}
.indent5 {
text-indent: calc(var(--indent-width)*5);
}
.indent6 {
text-indent: calc(var(--indent-width)*6);
}
.indent7 {
text-indent: calc(var(--indent-width)*7);
}
.indent8 {
text-indent: calc(var(--indent-width)*8);
}
.indent9 {
text-indent: calc(var(--indent-width)*9);
}
.item-sImg {
width: 40rpx;
height: 40rpx;
vertical-align: middle;
}
.tr {
white-space: nowrap;
border-bottom: 1rpx solid #eef1f0;
}
.td {
display: inline-block;
padding: 15rpx 30rpx;
min-width: 330rpx;
font: 30rpx/60rpx;
border-right: 2rpx solid #CDD6D5;
white-space: pre;
}
.td:last-child {
border-right: 0;
}
\ No newline at end of file
Component({
/**
* 组件的属性列表
*/
properties: {
treeData: Object,
title: String,
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {
"tree-row": "../jh-tree/tree-row"
}
}
\ No newline at end of file
<view class="tableContainer">
<view class="table">
<!-- <view class="tr th">
<view class="td">{{title}}</view>
</view> -->
<view class="tbody">
<tree-row model="{{treeData}}"></tree-row>
</view>
</view>
</view>
\ No newline at end of file
.tableContainer {
overflow-x: scroll;
}
.table {
/* display:inline-block; */
--indent-width: 26rpx;
}
.tr {
white-space: nowrap;
border-bottom: 2rpx solid #CDD6D5;
}
.th {
background-color: #5787EB;
color: #fff;
}
.th>.td {
padding: 15rpx 30rpx;
}
.td {
display: inline-block;
padding: 0 10rpx;
min-width: 375rpx;
font: 30rpx/60rpx '微软雅黑';
border-right: 2rpx solid #CDD6D5;
white-space: pre;
}
.td:last-child {
border-right: 0;
}
\ No newline at end of file
......@@ -20,9 +20,10 @@ Component({
}
},
tapItem: function (e) {
this.toggle()
var itemid = e.currentTarget.dataset.itemid;
console.log('组件里点击的id: ' + itemid);
this.triggerEvent('tapitem', {
// console.log('组件里点击的id: ' + itemid);
this.triggerEvent('clickItem', {
itemid: itemid
}, {
bubbles: true,
......
<view class="container">
<view style="padding:20rpx 1px;" catchtap='toggle'>
<view style="padding:20rpx 1px;" catchtap='toggle' catchtap='tapItem' data-itemid='{{ model.id }}'
data-value='{{ model.text }}'>
<image wx:if='{{ isBranch }}' src="{{ open ? './ic_arrow_down.png' : './ic_arrow_right.png'}}" class='item-sImg'>
</image>
<!-- <image wx:else src='./ic_arrow_right.png' class='item-sImg'></image> -->
<image wx:else class='item-sImg'></image>
<text catchtap='tapItem' data-itemid='{{ model.id }}' data-value='{{ model.text }}'>{{ model.text }}</text>
<text>{{ model.text }}</text>
</view>
<view style='padding-left: 25rpx;' wx:if='{{ isBranch }}' hidden='{{ !open }}'>
<mytree wx:for='{{ model.childNodes }}' wx:key='id' model='{{ item }}'></mytree>
......
......@@ -41,6 +41,7 @@
"pages/demoList/otherDemoList/other/inputPopView",
"pages/demoList/otherDemoList/other/empty",
"pages/demoList/otherDemoList/other/swiper",
"pages/demoList/otherDemoList/other/tree2",
"pages/demoList/UI/form",
"pages/demoList/UI/top",
"pages/demoList/UI/search",
......@@ -129,6 +130,7 @@
"jh-ymd-time-picker": "JhComponents/jh-ymd-time-picker/index",
"jh-swiper": "JhComponents/jh-swiper/index",
"jh-time-switch": "JhComponents/jh-time-switch/index",
"jh-tree": "JhComponents/jh-tree/tree-table",
"mytree": "JhComponents/mytree/index",
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
......
......@@ -54,5 +54,8 @@ Page({
onLoad: function (options) {
},
onClickItem(event) {
console.log(event.detail);
}
})
\ No newline at end of file
<view class="bg">
<mytree model='{{ treeData }}' bind:tapitem='tapItem'></mytree>
<mytree model='{{ treeData }}' bind:clickItem='onClickItem'></mytree>
</view>
\ No newline at end of file
// miniprogram/pages/demoList/otherDemoList/other/tree2.js
Page({
/**
* 页面的初始数据
*/
data: {
title: '标题',
treeData: {
text: 'My Tree',
id: 0,
level: 0,
childNodes: [{
text: 'Parent 1',
id: 1,
level: 1,
childNodes: [{
text: 'Child 1',
id: 2,
level: 2,
childNodes: [{
text: 'Grandchild 1',
id: 3,
level: 3,
},
{
text: 'Grandchild 2',
id: 4,
level: 3,
},
]
},
{
text: 'Child 2',
id: 5,
level: 2,
}
]
},
{
text: 'Parent 2',
id: 6,
level: 1,
childNodes: [{
text: 'Child 1',
id: 7,
level: 2,
},
{
text: 'Child 2',
id: 8,
level: 2,
}
]
}
]
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onClickItem(event) {
console.log(event.detail);
}
})
\ No newline at end of file
{
"navigationBarTitleText": "jh-tree",
"usingComponents": {
"tree-table": "../../../../JhComponents/jh-tree/tree-table"
}
}
\ No newline at end of file
<view class="bg">
<tree-table treeData="{{treeData}}" title="{{title}}" bind:clickItem='onClickItem'></tree-table>
</view>
\ No newline at end of file
.bg {
background: white;
}
\ No newline at end of file
......@@ -36,6 +36,10 @@ Page({
text: '轮播图',
pathUrl: '/pages/demoList/otherDemoList/other/swiper'
},
{
text: '树形结构数据',
pathUrl: '/pages/demoList/otherDemoList/other/tree2'
},
]
},
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册