-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprod-category.js
More file actions
114 lines (97 loc) · 2.82 KB
/
prod-category.js
File metadata and controls
114 lines (97 loc) · 2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import $ from 'jquery'
import Collapsible from './scripts/collapsible.js'
import Selectfield, { renderTreeView, _renderTreeView } from './scripts/selectfield.js'
import Modal from './scripts/modal.js'
let modalBox = Modal.of({ $el: $('.category-modal') })
let modalAlert = Modal.of({ $el: $('.category-alert-modal') })
let treeViewData = [{
id: 1,
value: 'test1',
children: [{
id: 11,
value: 'test11',
children: [{
id: 111,
value: 'test111',
children: [{
id: 1111,
value: 'test1111'
}]
},{
id: 112,
value: 'test112'
}]
},{
id: 12,
value: 'test12',
children: [{
id: 121,
value: 'test121'
}]
},{
id: 13,
value: 'test13'
}]
}]
console.log(JSON.stringify(treeViewData))
const CategorySelectFieldTpl = (data, depth) => isRender => `
<li>
<div class="treeview treeview-depth--${depth}">
<div class="treeview-content" data-id="${data.id}">
${isRender ? `
<div class="treeview-icon">
<span class="ic ion-md-arrow-dropdown"></span>
</div>
` : ''}
<span class="selectfield-option">${data.value}</span>
</div>
${isRender ? `<ul class="treeview-list" data-id="${data.id}"></ul>` : ''}
</div>
</li>
`
let categorySelectfield = Selectfield.of({ $el: $('.js-prodcategory') })
.render(_renderTreeView(CategorySelectFieldTpl)(treeViewData))
const CategoryViewTpl = (data, depth) => isRender => `
<li>
<div class="treeview treeview-depth--${depth}">
<div class="treeview-content category-item ${isRender ? '' : 'selectfield-option'}" data-id="${data.id}">
${isRender ? `
<div class="treeview-icon">
<span class="ic ion-md-arrow-dropdown"></span>
</div>
<span class="ic category-ic ion-ios-folder-open-outline"></span>
` : '<span class="ic category-ic ion-ios-folder-open"></span>'}
${data.value}
<div class="category-actions">
<div class="category-action js-action-create">
<span class="ic ion-md-add"></span>
新增类别
</div>
<div class="category-action js-action-remove">
<span class="ic ion-ios-trash-outline"></span>
删除
</div>
<div class="category-action js-action-update">
<span class="ic ion-ios-construct-outline"></span>
设置
</div>
</div>
</div>
${isRender ? `<ul class="treeview-list" data-id="${data.id}"></ul>` : ''}
</div>
</li>
`
_renderTreeView(CategoryViewTpl)(treeViewData)($('.js-category-view'), function($view) {
$('.js-action-create, .js-action-update').on('click', function(evt) {
evt.stopPropagation()
modalBox.show()
return false
})
$('.js-action-remove').on('click', function(evt) {
evt.stopPropagation()
modalAlert.show()
let id = $(this).parents('.category-item').data('id')
console.log(id)
return false
})
})