add.jsp
3.0 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
<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<body>
<div id="app">
<table class="table table-bordered table-hover definewidth m10">
<template v-for="(value,key) in model">
<tbody>
<tr>
<td class="tableleft">{{il8message[key]}}</td>
<td>
<input class="form-control" type="text" v-model="model[key]"/>
</td>
</tr>
</tbody>
</template>
<tr>
<td class="tableleft"></td>
<td>
<button class="btn btn-primary" @click="insert()">新增角色</button>
</td>
</tr>
</table>
</div>
<script>
var userId = -1;
Vue.component('tip', {
props: ['msg', 'status', 'classname'],
template: '<span v-bind:class="classname">{{msg}}{{status}}</span>'
})
var vm = new Vue({
el: '#app',
//需要注入的模板的父元素
data: {
model: {}, //主要解析数据
checkbox_val: {}, //没什么卵用目前。标注哪些要做特殊INPUT适配
need_hidden: ['roleId'],
hidden: {}, //存储隐藏的不需要更新的字段
need_unedit: [],
unedit: {},
il8message: {roleName: '<spring:message code="role.name"/>', roleSign: "标志", description: "描述"},//字段的中文标注，后期做到一个统一的库里面
return_msg: {}
}, //end data
created: function () {
$.post("roleExamlpe.json", null, function (data) {
makeHiddenObj(vm.need_hidden, data, vm.hidden); //拆分出不需要更新的hidden字段
makeHiddenObj(vm.need_unedit, data, vm.unedit); //拆分出不可以编辑的eidt字段
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) {
vm.return_msg = data;
console.log(vm.return_msg);
},
error: function (data) {
vm.return_msg = data;
}
});
}
}
});
</script>
</body>
</html>