Skip to content

Commit feb02c7

Browse files
keepfoolkeepfool
committed
fixed the bug after filter the data that get the wrong index
1 parent 928ebff commit feb02c7

File tree

4 files changed

+91
-80
lines changed

4 files changed

+91
-80
lines changed

‎02.Components/Part-2/demo/step04.html

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<tbody>
3838
<tr v-for="(index,entry) in dataList | filterBy searchKey">
3939
<td v-for="col in columns">
40-
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(index, 'Edit Item - ' + entry[col.name])">{{entry[col.name]}}</a></span>
40+
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(entry[col.name])">{{entry[col.name]}}</a></span>
4141
<span v-else>{{entry[col.name]}}</span>
4242
</td>
4343
<td class="text-center">
@@ -90,14 +90,23 @@ <h1 class="dialog-title">{{ title }}</h1>
9090
<script>
9191
Vue.component('simple-grid', {
9292
template: '#grid-template',
93+
props: ['dataList', 'columns', 'searchKey'],
9394
data: function() {
9495
return {
9596
mode: 0,
9697
title: '',
98+
keyColumn: '',
9799
item: {}
98100
}
99101
},
100-
props: ['dataList', 'columns', 'searchKey'],
102+
ready(){
103+
for (var i = 0; i < this.columns.length; i++) {
104+
if (this.columns[i].isKey) {
105+
this.keyColumn = this.columns[i]['name']
106+
break;
107+
}
108+
}
109+
},
101110
methods: {
102111
openNewItemDialog: function(title) {
103112
// 对话框的标题
@@ -109,15 +118,18 @@ <h1 class="dialog-title">{{ title }}</h1>
109118
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
110119
this.$broadcast('showDialog', true)
111120
},
112-
openEditItemDialog: function(index, title) {
121+
openEditItemDialog: function(key) {
122+
123+
// 根据主键查找当前修改的数据
124+
var currentItem = this.findItemByKey(key)
113125
// 对话框的标题
114-
this.title = title
126+
this.title = 'Edit Item - ' + key
115127
// mode = 2表示修改模式
116128
this.mode = 2
117129
// 初始化this.item
118130
this.item = {}
119-
// 将选中行的数据拷贝到this.item
120-
this.item = this.initItemForUpdate(this.dataList[index])
131+
// 将选中的数据拷贝到this.item
132+
this.item = this.initItemForUpdate(currentItem)
121133
// 广播事件，传入参数true表示显示对话框
122134
this.$broadcast('showDialog', true)
123135
},
@@ -138,10 +150,11 @@ <h1 class="dialog-title">{{ title }}</h1>
138150
}
139151
return c;
140152
},
141-
getKeyColumn: function() {
142-
for (var i = 0; i < this.columns.length; i++) {
143-
if (this.columns[i].isKey) {
144-
return this.columns[i].name
153+
findItemByKey: function(key){
154+
var keyColumn = this.keyColumn
155+
for(var i = 0; i < this.dataList.length; i++){
156+
if(this.dataList[i][keyColumn] === key){
157+
return this.dataList[i]
145158
}
146159
}
147160
},
@@ -155,7 +168,7 @@ <h1 class="dialog-title">{{ title }}</h1>
155168
},
156169
updateItem: function() {
157170
// 获取主键列
158-
var keyColumn = this.getKeyColumn()
171+
var keyColumn = this.keyColumn
159172

160173
for (var i = 0; i < this.dataList.length; i++) {
161174
// 根据主键查找要修改的数据，然后将this.item数据更新到this.dataList[i]

‎02.Components/Part-2/demo/step05.html

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<tbody>
3838
<tr v-for="(index,entry) in dataList | filterBy searchKey">
3939
<td v-for="col in columns">
40-
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(index, 'Edit Item')">{{entry[col.name]}}</a></span>
40+
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(entry[col.name])">{{entry[col.name]}}</a></span>
4141
<span v-else>{{entry[col.name]}}</span>
4242
</td>
4343
<td class="text-center">
@@ -88,14 +88,23 @@ <h1 class="dialog-title">{{ title }}</h1>
8888
<script>
8989
Vue.component('simple-grid', {
9090
template: '#grid-template',
91+
props: ['dataList', 'columns', 'searchKey'],
9192
data: function() {
9293
return {
9394
mode: 0,
9495
title: '',
96+
keyColumn: '',
9597
item: {}
9698
}
9799
},
98-
props: ['dataList', 'columns', 'searchKey'],
100+
ready(){
101+
for (var i = 0; i < this.columns.length; i++) {
102+
if (this.columns[i].isKey) {
103+
this.keyColumn = this.columns[i]['name']
104+
break;
105+
}
106+
}
107+
},
99108
methods: {
100109
openNewItemDialog: function(title) {
101110
// 对话框的标题
@@ -107,12 +116,15 @@ <h1 class="dialog-title">{{ title }}</h1>
107116
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
108117
this.$broadcast('showDialog', true)
109118
},
110-
openEditItemDialog: function(index, title) {
119+
openEditItemDialog: function(key) {
120+
// 根据主键查找当前修改的数据
121+
var currentItem = this.findItemByKey(key)
111122
// 对话框的标题
112-
this.title = title
123+
this.title = 'Edit Item - ' + key
113124
// mode = 2表示修改模式
114125
this.mode = 2
115-
this.item = this.initItemForUpdate(this.dataList[index])
126+
// 将选中的数据拷贝到this.item
127+
this.item = this.initItemForUpdate(currentItem)
116128
// 广播事件，传入参数true表示显示对话框
117129
this.$broadcast('showDialog', true)
118130
},
@@ -134,24 +146,25 @@ <h1 class="dialog-title">{{ title }}</h1>
134146
}
135147
return c;
136148
},
137-
138-
getKeyColumn: function() {
139-
for (var i = 0; i < this.columns.length; i++) {
140-
if (this.columns[i].isKey) {
141-
return this.columns[i].name
149+
findItemByKey: function(key){
150+
var keyColumn = this.keyColumn
151+
for(var i = 0; i < this.dataList.length; i++){
152+
if(this.dataList[i][keyColumn] === key){
153+
return this.dataList[i]
142154
}
143155
}
144156
},
145-
itemExists: function(keyColumn) {
157+
itemExists: function() {
158+
var keyColumn = this.keyColumn
146159
for (var i = 0; i < this.dataList.length; i++) {
147160
if (this.item[keyColumn] === this.dataList[i][keyColumn])
148161
return true;
149162
}
150163
return false;
151164
},
152165
createItem: function() {
153-
var keyColumn = this.getKeyColumn()
154-
if (!this.itemExists(keyColumn)) {
166+
var keyColumn = this.keyColumn
167+
if (!this.itemExists()) {
155168
// 将item追加到dataList
156169
this.dataList.push(this.item)
157170
// 广播事件，传入参数false表示隐藏对话框
@@ -166,7 +179,7 @@ <h1 class="dialog-title">{{ title }}</h1>
166179
updateItem: function() {
167180

168181
// 获取主键列
169-
var keyColumn = this.getKeyColumn()
182+
var keyColumn = this.keyColumn
170183

171184
for (var i = 0; i < this.dataList.length; i++) {
172185
// 根据主键查找要修改的数据，然后将this.item数据更新到this.dataList[i]

‎02.Components/Part-2/demo/step06.html

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<tbody>
3838
<tr v-for="(index,entry) in dataList | filterBy searchKey">
3939
<td v-for="col in columns">
40-
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(index, 'Edit Item - ' + entry[col.name])">{{entry[col.name]}}</a></span>
40+
<span v-if="col.isKey"><a href="javascript:void(0)" @click="openEditItemDialog(entry[col.name])">{{entry[col.name]}}</a></span>
4141
<span v-else>{{entry[col.name]}}</span>
4242
</td>
4343
<td class="text-center">
@@ -62,20 +62,21 @@
6262
<header class="dialog-header">
6363
<h1 class="dialog-title">{{ title }}</h1>
6464
</header>
65-
6665
<div class="dialog-body">
6766
<div v-for="field in fields" class="form-group">
68-
<label>{{ field.name |capitalize }}</label>
67+
<label>{{ field.name }}</label>
6968
<select v-if="field.dataSource" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
7069
<option v-for="opt in field.dataSource" :value="opt">{{ opt }}</option>
7170
</select>
7271
<input v-else type="text" v-model="item[field.name]" :disabled="mode === 2 && field.isKey">
7372
</div>
7473
</div>
75-
<footer class="form-group dialog-footer">
76-
<label></label>
77-
<button class="btn-save" v-on:click="save">Save</button>
78-
<button class="btn-close" v-on:click="close">Close</button>
74+
<footer class="dialog-footer">
75+
<div class="form-group">
76+
<label></label>
77+
<button class="btn-save" v-on:click="save">Save</button>
78+
<button class="btn-close" v-on:click="close">Close</button>
79+
</div>
7980
</footer>
8081
</div>
8182
</div>
@@ -120,17 +121,27 @@ <h1 class="dialog-title">{{ title }}</h1>
120121
}
121122
}
122123
})
123-
124+
125+
124126
Vue.component('simple-grid', {
125127
template: '#grid-template',
128+
props: ['dataList', 'columns', 'searchKey'],
126129
data: function() {
127130
return {
128131
mode: 0,
129132
title: '',
133+
keyColumn: '',
130134
item: {}
131135
}
132136
},
133-
props: ['dataList', 'columns', 'searchKey'],
137+
ready(){
138+
for (var i = 0; i < this.columns.length; i++) {
139+
if (this.columns[i].isKey) {
140+
this.keyColumn = this.columns[i]['name']
141+
break;
142+
}
143+
}
144+
},
134145
methods: {
135146
openNewItemDialog: function(title) {
136147
// 对话框的标题
@@ -142,50 +153,55 @@ <h1 class="dialog-title">{{ title }}</h1>
142153
// 广播事件，showDialog是modal-dialog组件的一个方法，传入参数true表示显示对话框
143154
this.$broadcast('showDialog', true)
144155
},
145-
openEditItemDialog: function(index, title) {
156+
openEditItemDialog: function(key) {
157+
// 根据主键查找当前修改的数据
158+
var currentItem = this.findItemByKey(key)
146159
// 对话框的标题
147-
this.title = title
160+
this.title = 'Edit Item - ' + key
148161
// mode = 2表示修改模式
149162
this.mode = 2
150-
// 初始化this.item
151-
this.item = this.initItemForUpdate(this.dataList[index])
163+
// 将选中的数据拷贝到this.item
164+
this.item = this.initItemForUpdate(currentItem)
152165
// 广播事件，传入参数true表示显示对话框
153166
this.$broadcast('showDialog', true)
154167
},
168+
155169
// 弹出修改数据的对话框时，使用对象的深拷贝
156170
initItemForUpdate: function(p) {
157171
var c = c || {};
158172
for (var i in p) {
159173
// 属性i是否为p对象的自有属性
160174
if (p.hasOwnProperty(i)) {
161175
if (typeof p[i] === 'object') {
162-
c[i] = Array.isArray(p[i]) ? [] : {}
163-
deepCopy(p[i], c[i])
176+
c[i] = Array.isArray(p[i]) ? [] : {};
177+
deepCopy(p[i], c[i]);
164178
} else {
165179
// 属性是基础类型时，直接拷贝
166-
c[i] = p[i]
180+
c[i] = p[i];
167181
}
168182
}
169183
}
170184
return c;
171185
},
172-
getKeyColumn: function() {
173-
for (var i = 0; i < this.columns.length; i++) {
174-
if (this.columns[i].isKey) {
175-
return this.columns[i].name
186+
findItemByKey: function(key){
187+
var keyColumn = this.keyColumn
188+
for(var i = 0; i < this.dataList.length; i++){
189+
if(this.dataList[i][keyColumn] === key){
190+
return this.dataList[i]
176191
}
177192
}
178193
},
179-
itemExists: function(keyColumn) {
194+
itemExists: function() {
195+
var keyColumn = this.keyColumn
180196
for (var i = 0; i < this.dataList.length; i++) {
181197
if (this.item[keyColumn] === this.dataList[i][keyColumn])
182198
return true;
183199
}
184200
return false;
185201
},
186202
createItem: function() {
187-
var keyColumn = this.getKeyColumn()
188-
if (!this.itemExists(keyColumn)) {
203+
var keyColumn = this.keyColumn
204+
if (!this.itemExists()) {
189205
// 将item追加到dataList
190206
this.dataList.push(this.item)
191207
// 广播事件，传入参数false表示隐藏对话框
@@ -200,7 +216,7 @@ <h1 class="dialog-title">{{ title }}</h1>
200216
updateItem: function() {
201217

202218
// 获取主键列
203-
var keyColumn = this.getKeyColumn()
219+
var keyColumn = this.keyColumn
204220

205221
for (var i = 0; i < this.dataList.length; i++) {
206222
// 根据主键查找要修改的数据，然后将this.item数据更新到this.dataList[i]

‎02.Components/Part-2/test.html

Lines changed: 0 additions & 31 deletions
This file was deleted.

0 commit comments

Comments
 (0)