您的位置：首页 > Web前端 > BootStrap

QiYuAdmin-用户增删改查

2017-04-06 10:09 190 查看

简述

用户表单样式
用户增删改查

用户表单样式

效果

描述

表单验证的插件用的是BootStrapValidator，具体API和用法百度即可。

/**
* 用户增加页面验证表单
*/
var initUserAddBootStrapValidate = function (addAjaxUrl) {
$addUserForm.bootstrapValidator({
//          trigger: 'blur',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userCode: {
validators: {
notEmpty: {
message: '员工编码不能为空'
}
}
},
loginName: {
validators: {
notEmpty: {
message: '登录账号不能为空'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/QiYuAdmin/user/uniqueness/loginName',//验证地址
message: '账号已存在',//提示消息
delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
},
userName:{
validators: {
notEmpty: {
message: '员工名称不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
QiYuComponents.qiYuAjaxFormSumbit(addAjaxUrl,addUserFormId,userTableId);
});
}

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

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
这里有个规范问题，以上的代码里面的验证账号是否重复功能的url，QiYuAdmin是项目的Context，这里是写死的，有没有好的办法？我在网上找到相关的答案，是这样写的。

function getContextPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}

1
2
3
4
5
6

1
2
3
4
5
6
不知道Thymeleaf里面有没有更好的解决方案？我找了半天没有找到Thymeleaf里面是怎么处理js文件里面的地址的，而是在他的模板里面进行内联，js内联代码如下。

<script th:inline="javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {
QiYuUser.initUserAdd(/*[[@{/user}]]*/);
});
/*]]>*/
</script>

1
2
3
4
5
6
7

1
2
3
4
5
6
7
这样写的话我的user.js所有用到ajax地址的都需要弄一个参数，如上代码所示。

用户增加

效果

描述

有很多共用的方法，比如说：增加表单、修改表单、删除表单、表格初始化。这些都可以封装成共用的。下次类似的功能只需要传入几个参数就可以了，很方便的。比如这里的增加用户功能。

//初始化用户增加页面
initUserAdd:function (addAjaxUrl) {
initUserAddBootStrapValidate(addAjaxUrl);//表单验证
userAddEventHandler();//按钮事件绑定
}
/**
* 用户增加页面验证表单
*/
var initU
4000
serAddBootStrapValidate = function (addAjaxUrl) {
$addUserForm.bootstrapValidator({
//          trigger: 'blur',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userCode: {
validators: {
notEmpty: {
message: '员工编码不能为空'
}
}
},
loginName: {
validators: {
notEmpty: {
message: '登录账号不能为空'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/QiYuAdmin/user/uniqueness/loginName',//验证地址
message: '账号已存在',//提示消息
delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
},
userName:{
validators: {
notEmpty: {
message: '员工名称不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
QiYuComponents.qiYuAjaxFormSumbit(addAjaxUrl,addUserFormId,userTableId);
});
}
/**
* 用户增加页面事件绑定
*/
var userAddEventHandler = function () {
$addUserBtn.on("click",function () {
$addUserForm.submit();
});
}

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

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
特别像后台管理系统之类的功能，很多都是表格、表格上面有几个按钮：增加、修改、删除等等。类似的功能可以单独抽出来，抽出共用的方法。非常方便。等做下一个这样的功能的时候我在说下有多方便了。

用户修改和删除

效果

描述

修改和增加的功能是类似的。多了一个修改密码的页签。都很简单。我把user.js模块的源码贴下就知道了。

/**
* 用户模块js:包括用户主界面、用户增加修改界面
*/
var QiYuUser = function () {
//用户主页面属性开始
var userTableId = "userTable";
var $userTable=$("#userTable");
var tableAjaxUrl="user/page/list";
var userTableColum=[{checkbox: true}
,{title: 'id',field: 'id',align: 'center',valign: 'middle',visible:false}
,{title: '登录账号',field: 'loginName',align: 'center',valign: 'middle'}
,{title: '用户名称',field: 'userName',align: 'center',valign: 'middle'}
,{title: '用户性别',field: 'gender',align: 'center',valign: 'middle',formatter:function (value,row,index) {
if(value==1){return "男";}else if(value==-1){return "女";}else{return "未知";}
}}
,{title: '用户状态',field: 'isLock',align: 'center',formatter:function (value,row,index) {
if(value==1){return "正常";}else if(value==-1){return "锁定";}else{return "未知";}
}}];
var $addUserView=$("#addUserView");
var $updateUserView=$("#updateUserView");
var $deleteUsers=$("#deleteUsers");
//用户主页面属性结束
//用户修改页面属性开始
var $updateUserInfo = $("#updateUserInfo");//修改用户信息按钮
var $resetUserInfo = $("#resetUserInfo");//取消用户信息按钮
var updateUserFormId="updateUserForm";//个人信息表单
var $updateUserForm=$("#updateUserForm");
var $updateUserBtn = $("#updateUserBtn");

var updateUserPwdFormId="updateUserPwdForm";
var $updateUserPwdForm = $("#updateUserPwdForm");//修改密码表单
var $updateUserPwdBtn = $("#updateUserPwdBtn");//修改密码按钮
//用户修改页面属性结束

//用户增加页面属性开始
var $cancelUserBtn = $("#cancelUserBtn");
var $addUserBtn = $("#addUserBtn");
var addUserFormId = "addUserForm";
var $addUserForm = $("#addUserForm");
//用户增加页面属性结束
/**
* 用户主页面初始化用户表格数据
*/
var initTable=function () {
QiYuComponents.initBootStrapTable($userTable,tableAjaxUrl,userTableColum);
}
/**
* 用户主页面按钮绑定事件:增加、修改、删除
*/
var userMainEventHandler=function () {
//绑定增加用户弹出页面的按钮事件
$addUserView.on("click",function () {
QiYuComponents.layerOpen("添加账户",'1000px','650px',"user/add/view");
});
//绑定修改用户弹出页面的按钮事件
$updateUserView.on("click",function () {
var rows =  QiYuComponents.getTableSelections($userTable);
if(rows.length==0){
QiYuComponents.bootstrapSweetAlert("","请选择一个用户","error");
return;
}
if(rows.length>=2){
QiYuComponents.bootstrapSweetAlert("","不能选择多个用户","error");
return;
}
//查看用户的基本信息
QiYuComponents.layerOpen("配置账户",'1000px','650px',"user/profile/view/"+rows[0].id+"?operator=admin");
});
//绑定删除按钮事件
$deleteUsers.on("click",function () {
QiYuComponents.qiYuAjaxDelete("user/batch",$userTable);
});
}
/**
* 用户修改页面事件绑定
*/
var userProfileEventHandler = function () {

$updateUserInfo.on("click",function () {

});
}
/**
* 用户增加页面事件绑定
*/
var userAddEventHandler = function () {
$addUserBtn.on("click",function () {
$addUserForm.submit();
});
}
/**
* 用户增加页面验证表单
*/
var initUserAddBootStrapValidate = function (addAjaxUrl) {
$addUserForm.bootstrapValidator({
//          trigger: 'blur',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userCode: {
validators: {
notEmpty: {
message: '员工编码不能为空'
}
}
},
loginName: {
validators: {
notEmpty: {
message: '登录账号不能为空'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: '/QiYuAdmin/user/uniqueness/loginName',//验证地址
message: '账号已存在',//提示消息
delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
}
}
},
userName:{
validators: {
notEmpty: {
message: '员工名称不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
QiYuComponents.qiYuAjaxFormSumbit(addAjaxUrl,addUserFormId,userTableId);
});
}

/**
* 用户修改页面验证表单
*/
var initUserUpdateBootStrapValidate = function (updateAjaxUrl) {
$updateUserForm.bootstrapValidator({
//          trigger: 'blur',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userCode: {
validators: {
notEmpty: {
message: '员工编码不能为空'
}
}
},
userName:{
validators: {
notEmpty: {
message: '员工名称不能为空'
}
}
}
}
}).on("success.form.bv",function(e){
QiYuComponents.qiYuAjaxFormSumbit(updateAjaxUrl,updateUserFormId,userTableId);
});
}

/**
* 用户修改页面验证表单
*/
var initUserPwsUpdateBootStrapValidate = function (updateAjaxUrl) {
$updateUserPwdForm.bootstrapValidator({
//          trigger: 'blur',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {

bbb2
loginPwd:{
validators: {
notEmpty: {
message: '新密码不能为空'
}
}
},
loginRepPwd:{
validators: {
notEmpty: {
message: '新重复密码不能为空'
},
identical: {//相同
field: 'loginPwd', //需要进行比较的input name值
message: '两次密码不一致'
}
}
}
}
}).on("success.form.bv",function(e){
QiYuComponents.qiYuAjaxFormSumbit(updateAjaxUrl,updateUserPwdFormId,userTableId);
});
}

/**
* 用户增加页面事件绑定
*/
var userUpdateEventHandler = function () {
$updateUserBtn.on("click",function () {
$updateUserForm.submit();
});

$updateUserPwdBtn.on("click",function () {
$updateUserPwdForm.submit();
});
}

return{
//初始化用户管理的主页面:用户列表
initUserMain:function () {
initTable();
userMainEventHandler();
},
//初始化用户管理的修改页面:user_profile.html
initUserProfile:function (updateAjaxUrl) {
initUserUpdateBootStrapValidate(updateAjaxUrl);
userUpdateEventHandler();
initUserPwsUpdateBootStrapValidate(updateAjaxUrl);

},
//初始化用户增加页面
initUserAdd:function (addAjaxUrl) {
initUserAddBootStrapValidate(addAjaxUrl);
userAddEventHandler();
}

}
}();

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

结语

下一篇博客将集成FastDfs和上传图片的一个插件（这个插件待确认中，还在调研中，webuploader？zyuploder？待确定）。

转自：山竹之七语:QiYuAdmin-用户增删改查

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Druid Metronic SpringBoot bootstrap java

相关文章推荐

新的分享

章节导航