User management module
User management static pages
-
table-bordered Add table borders
-
Add table-hover effect hover
<table class="table table-bordered table-hover"> ... </table> -
Disable button
<button class="btn btn-danger">禁用</button>
- Horizontal table disposed inside vertical center
.table.table-bordered td {
text-align: center;
vertical-align: middle;
}
- Rendering user list
Ideas:
//发送ajax请求，获取到用户的数据
//结合模板引擎，把数据渲染到页面
var currentPage = 1;//记录当前页
var pageSize = 10;//记录每页的数量
$.ajax({
type:"get",
url:"/user/queryUser",
data:{
page : currentPage,
pageSize:pageSize
},
success:function (data) {
console.log(data);
var html = template("tpl", data);
$("tbody").html(html);
}
})
Page rendering
<script type="text/html" id="tpl">
{{each rows v i}}
<tr>
<td>{{i+1}}</td>
<td>{{v.username}}</td>
<td>{{v.mobile}}</td>
<td>{{v.isDelete===1?'正常':'禁用'}}</td>
<td>
{{if v.isDelete === 1}}
<button class="btn btn-danger btn-sm">禁用</button>
{{/if}}
{{if v.isDelete === 0}}
<button class="btn btn-success btn-sm">启用</button>
{{/if}}
</td>
</tr>
{{/each}}
</script>
Use the pagination plug-in bootstrap-paginator
- Lead package
<script src="lib/bootstrap-paginator/bootstrap-paginator.js"></script>
- Page Structure
<!--boostrap分页插件如果是3.0版本，要求这个盒子必须是ul-->
<div class="text-right">
<ul id="paginator"></ul>
</div>
- Initialization pagination plug-in
//渲染分页
$("#paginator").bootstrapPaginator({
bootstrapMajorVersion:3,//指定bootstrap的版本，如果是3，必须指定
currentPage:currentPage,//指定当前页
totalPages:Math.ceil(data.total/pageSize),//指定总页数
onPageClicked:function (a,b,c, page) {
//page指的是点击的页码,修改了当前页
currentPage = page;
//重新渲染
render();
}
});
- Number of bug fix
Because every time i render are from 0
<td> {{ (page-1) * size + (i+1) }} </td>
Users enable disabled features
- When rendering a list, you need to save up the user's id
<td data-id="{{v.id}}">
{{if v.isDelete === 1}}
<button class="btn btn-danger btn-sm">禁用</button>
{{/if}}
{{if v.isDelete === 0}}
<button class="btn btn-success btn-sm">启用</button>
{{/if}}
</td>
- Preparation modal popup box
- Click disabled or enabled
- Modal popup box
- Get to custom attributes id
- Gets to disable or enable the state (according to the class name btn)
- When you click OK, you need to send ajax request
-
When successful, close the modal box, re-rendering the page.
-
A classification module
Page rendering
- Prepare a classification of static pages
- Modify the table
- Send ajax, get a data classification
- By rendering the page template engine
- Paging function
-
Ready paged box
-
The introduction of the paging file
-
Initialization paging controls
bootstrapPaginator
-
Add Features
-
Modal box ready to add
- Ready to form components
- Question: can not submit the form, type = submit, the button is not in the form form, it can not be submitted.
-
Form check function to increase
- Import documents
- Initialization form validation
$form.bootstrapValidator({ feedbackIcons:{}, fields:{} })
$form.bootstrapValidator({ //小图标 feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, //校验规则 fields:{ categoryName:{ validators:{ //非空 notEmpty:{ message:"请输入一级分类" } } } } });- Sign up to form a successful event check
$form.on("success.form.bv", function (e) { //阻止默认提交 e.preventDefault(); //使用ajax进行提交 })-
Ajax request transmission, adding a classification
- Close modal box
- Re-render the first page (the first page data added since)
- Reset the form and style data
$form.data("bootstrapValidator").resetForm(true);
Two classification module
Ready static pages
With a substantially similar
Page Rendering
With a substantially similar
add category
- Ready to add mode frame classification
-
Pull-down menu: http://v3.bootcss.com/components/#dropdowns
-
Ajax get to use all the data level of classification, rendering the drop-down menu box
-
Click on the drop-down menu, you need to modify the contents of a button
-
File upload (jquery fileupload plug-in)
- Lead package
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="lib/jquery-fileupload/jquery.fileupload.js"></script>
- html structure
<!--
1. type:file
2. 必须指定name属性，因为后台通过这个name属性去获取图片
3. 必须data-url：指定图片上传的地址
-->
<input type="file" id="fileupload" name="pic1" data-url="/category/addSecondCategoryPic">
- Use js initialization file upload
//初始化文件上传
$("#fileupload").fileupload({
dataType:"json",
//文件上传完成时，会执行的回调函数，通过这个函数就能获取到图片的地址
//第二个参数就有上传的结果 data.result
done:function (e, data) {
//console.log("图片上传完成拉");
//console.log(data);
//console.log(data.result.picAddr);
$(".img_box img").attr("src", data.result.picAddr);
}
});
If you have problems uploading incorrect report:
在public文件夹下面创建一个upload文件夹， 在upload文件夹下面创建一个brand文件夹，用于存放上传的品牌的图片的
在public文件夹下面创建一个upload文件夹， 在upload文件夹下面创建一个product文件夹，用于存放上传的商品的图片的
Hidden Field
<input type="hidden" id="categoryId" name="categoryId">
<input type="hidden" name="brandLogo" id="brandLogo">
js code
- When choosing the drop-down box to select a value of the id values stored in categoryId
- When uploading pictures, to keep the img address value in the value brandLogo
When you click Upload, capable of transferring data server.
Form validation
- As before - the initialization form validation
- Question 1: do not check hidden form
excluded:[], - Question 2: hidden fields in the choice of when, and not become successful verification
- In the drop-down selectors need time, by js dynamic check into success
$form.data("bootstrapValidator").updateStatus("categoryId", "VALID");
$form.data("bootstrapValidator").updateStatus("brandLogo", "VALID");
Items to add functionality
- Registration verification is successful event
- Prevent the default submit, submit using ajax
- After the success of ajax
- Close modal box
- Re-render the first page
- Reset mode frame