add.jsp
4.5 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
115
116
<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<div id="app">
<ul class="list-group">
<%--<template v-for="(value,key) in unedit">--%>
<%--<li><label>{{key}} : {{value}}</label></li>--%>
<%--</template>--%>
<template v-for="(value,key) in model">
<li v-if="key==='password'" class="list-group-item">
<div class="row" style="clear:both">
<div class="col-md-2"><label>{{key}}</label></div>
<div class="col-md-10"><input type="password" v-model="model[key]" class="form-control"/></div>
</div>
</li>
<%--CheckBox部分--%>
<li v-else-if="key==='sex'" class="list-group-item">
<div class="row" style="clear:both">
<div class="col-md-2"><label>{{key}}</label></div>
<div class="col-md-10">
<template v-for="(v,index) in checkbox_val.sex">
<input type="radio" v-bind:value="index+1" v-model="model[key]"/><label>{{v}}</label>
</template>
</div>
</div>
</li>
<li v-else-if="key==='state'" class="list-group-item">
<div class="row" style="clear:both">
<div class="col-md-2"><label>{{key}}</label></div>
<div class="col-md-10">
<template v-for="(v,index) in checkbox_val.state">
<template v-if="index===0">
<input type="radio" v-bind:value="0" v-model="model[key]"/><label>{{v}}</label>
</template>
<template v-if="index===1">
<input type="radio" v-bind:value="1" v-model="model[key]"/><label>{{v}}</label>
</template>
</template>
</div>
</div>
</li>
<%--CheckBox部分--%>
<li class="list-group-item" v-else>
<div class="row" style="clear:both">
<div class="col-md-2"><label>{{key}}</label></div>
<div class="col-md-10"><input v-model="model[key]" class="form-control"/></div>
</div>
</li>
</template>
<li class="list-group-item">
<div class="row" style="clear:both">
<div class="col-md-2"></div>
<div class="col-md-10"><button @click="insert()" class="btn btn-primary">新增用户</button></div>
</div>
</li>
</ul>
</div>
<script>
var userId = -1;
var vm = new Vue({
el: '#app',
//需要注入的模板的父元素
data: {
model: {}, //主要解析数据
checkbox_val: {"state": ['禁用', '有效'], "sex": ["男", "女"]}, //没什么卵用目前。标注哪些要做特殊INPUT适配
need_hidden:['creatime', 'updatetime','userId'],
hidden: {}, //存储隐藏的不需要更新的字段
need_unedit:[],
unedit:{}
}, //end data
created: function () {
$.post("userExample.json",null, function (data) {
makeHiddenObj(vm.need_hidden, data, vm.hidden); //拆分出不需要更新的hidden字段
makeHiddenObj(vm.need_unedit, data, vm.unedit); //拆分出不可以编辑的eidt字段
data.state=1; //新增账号，状态默认为1
vm.model = data;
console.log(vm.hidden);
});
},
methods: {
insert: function () {
extendJsons(['hidden','unedit'],vm.model,vm); //合并所有表值
var postData = $.toJSON(vm.model);
console.log(postData);
$.ajax({
type: 'POST',
url: "add.json",
data: postData,
dataType: 'json',
contentType: "application/json",
success: function (data) {
console.log(data);
},
});
}
}
});
</script>
</body>
</html>