ブラザーストーンの記事を読んだり、ブラザーストーンのビデオを見たりした場合は、ブラザーストーンの注文アプレットが第2レベルの料理または製品分類を達成できることを知っておく必要があります。
下の図に示すように、
3レベルの分類を実現したい場合がありますが、どうすればよいのでしょうか。今日は、3レベルの分類を実現する方法を説明します。Excelデータをクラウド開発データベースにバッチでインポートする方法をお気軽に教えてください
まず、古いルール、最初にレンダリングを見てください
まず、すべての人の原則を分析しましょう
第二に、主成分分析
まず
、3つのレベルを分析しましょう。上部に第1レベルのメニュー、左側に第2レベルのメニュー、右側に最後の3レベルのリストがあることがわかります。
階層関係を管理しましょう
- =寮の建物番号
- ====寮番号
- ========学生
賢い人は、私たちがたくさんの寮がある寮であり、寮にはたくさんの学生がいることを知っている必要があります。このように、私たちの3番目のレベルは建物番号「寮」の学生です。
建物番号を切り替えると、現在の建物番号に含まれている寮が取得されます。
たとえば、下の写真では、左が慧蘭ビル、右が雪源ビルのデータです。各ビルの寮と学生の情報を見ることができます。
原理を分析した後、技術的な実現を見てみましょう。
三、分類データを取得する
まず、すべての情報を格納するためにテーブルを使用します。
これはすべてのデータを格納するためのテーブルであるため、データに含まれる建物番号を確認するためにグループ化する必要があります。
3-1、グループの助けを借りて建物番号のグループ化を実現する（第1レベルのデータ）
具体的なコードは次のとおりです
次に得られたデータは次のとおり
です。合計11の寮の建物があることがわかります。これらの領域は私たちの上にありますか
3-2、グループと一致の助けを借りて寮のグループ化を実現する（第2レベルのデータ）
現時点では、ユーザーが選択した建物番号に従って、現在の建物番号ですべてのデータをグループ化する
必要
があります。グループ化されたデータは次のように表示されます。銭津ビルには2つの寮があります。
3-3、whereの助けを借りて寮の学生データを取得する（レベル3）
得られたデータは以下のとおりですので
、ここで3段階の分類を実現します。
第四に、完全なプロジェクトコード
今すぐすべての人のために完全なプロジェクトコードを投稿してください
4-1、wxml
<!-- 导航栏 -->
<scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
<view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
<view class="nav-text {{index==tabCur?'tab-on':''}}">{{item._id}}</view>
</view>
</scroll-view>
<view class="container">
<!-- 左边的 -->
<scroll-view class='nav_left' scroll-y='true'>
<block wx:for="{{lefts}}" wx:key="{{index}}">
<view class="nav_left_items {{leftCur==index?'active':''}}" bindtap="switchLeftTab" data-index='{{index}}'>
{{item._id}}</view>
</block>
</scroll-view>
<!-- 右边的 -->
<scroll-view class="nav_right" scroll-y="true">
<view class="{{topx}}">
<block wx:for="{{rights}}" wx:key="index">
<view class="nav_right_items" data-id="{{item._id}}">
<image src="{{item.touxiang}}"></image>
<text>{{item.mingzi}}</text>
</view>
</block>
</view>
</scroll-view>
</view>4-2、wxssスタイル
/* 导航栏布局相关 */
.navbar {
width: 100%;
height: 90rpx;
/* 文本不换行 */
white-space: nowrap;
display: flex;
box-sizing: border-box;
border-bottom: 1rpx solid #eee;
background: #fff;
align-items: center;
/* 固定在顶部 */
position: fixed;
left: 0rpx;
top: 0rpx;
}
.nav-item {
padding-left: 25rpx;
padding-right: 25rpx;
height: 100%;
display: inline-block;
/* 普通文字大小 */
font-size: 28rpx;
}
.nav-text {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 4rpx;
box-sizing: border-box;
}
.tab-on {
color: #000080;
/* 选中放大 */
font-size: 38rpx !important;
font-weight: 600;
border-bottom: 4rpx solid #000080 !important;
}
/* 正文部分 */
.container {
position: fixed;
width: 100%;
height: 90%;
top: 100rpx;
background-color: #FFF;
}
.nav_left {
width: 25%;
height: 100%;
background: #F2F2F2;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
.nav_left .nav_left_items {
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
}
.nav_left .nav_left_items.active {
position: relative;
background: #FFF;
color: #000080;
}
.nav_left .nav_left_items.active::before {
display: inline-block;
width: 6rpx;
height: 60rpx;
background: #000080;
content: '';
position: absolute;
top: 20rpx;
left: 0;
}
.nav_right {
position: absolute;
top: 0;
right: 0;
width: 75%;
height: 100%;
}
.nav_right .nav_right_items {
float: left;
width: 33.33%;
text-align: center;
padding: 30rpx 0;
}
.nav_right .nav_right_items image {
width: 120rpx;
height: 160rpx;
}
.nav_right .nav_right_items text {
display: block;
margin-top: 20rpx;
font-size: 28rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nocate {
padding: 100rpx;
text-align: center;
}
.nocate image {
width: 70rpx;
height: 70rpx;
}
.nocate text {
font-size: 28rpx;
display: block;
color: #BBB;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.topx {
width: 90%;
/* height: 700rpx; */
margin: 30rpx auto;
z-index: 1;
border-radius: 10rpx;
background-size: cover;
}4-3、jsは分類ロジックを実装します
const db = wx.cloud.database()
const $ = db.command.aggregate
Page({
data: {
tabs: [],
tabCur: 0, //默认选中
lefts: [],
leftCur: 0,
rights: [],
},
onLoad: function (options) {
db.collection('demo').aggregate()
.group({
_id: '$louhao'
})
.end()
.then(res => {
console.log('楼号列表', res)
this.setData({
tabs: res.list
})
this.sushehao(res.list[0]._id)
})
},
//加载当前楼号所有的宿舍号
sushehao() {
let louhao = this.data.tabs[this.data.tabCur]._id
db.collection('demo').aggregate()
.match({
louhao
})
.group({
_id: '$sushe'
})
.sort({
sushe: -1 //宿舍号升序排列
})
.end()
.then(res => {
console.log(louhao + '宿舍号列表', res)
this.setData({
lefts: res.list
})
this.xuesheng()
})
},
//加载当前宿舍号里所有的学生
xuesheng() {
let louhao = this.data.tabs[this.data.tabCur]._id
let sushe = this.data.lefts[this.data.leftCur]._id
db.collection('demo')
.where({
louhao,
sushe
}).get()
.then(res => {
console.log(louhao + sushe + '室学生列表', res)
this.setData({
rights: res.data
})
})
},
//顶部选择分类条目
tabSelect(e) {
this.setData({
tabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 2) * 200
}, success => {
this.sushehao()
})
},
//左侧条目选择
switchLeftTab(e) {
let index = e.target.dataset.index;
this.setData({
leftCur: index,
}, success => {
this.xuesheng()
})
},
})4-4、データテーブルの権限を変更することを忘れないでください
読み取りすべてのユーザーのアクセス許可を変更し、
ここで読み取りと書き込みができるユーザーのみを作成して、達成された3層分類を完了します。エクセルデータの一括インポートについては、次のセクションで説明します。注意を払うことを歓迎し、交換するメッセージを残すことを歓迎します。