1.1 导入bootstrap包
在resource文件夹下static放入bootstrap
2.1 templates
2.2在文件夹下创建index并导入布局外部文件
<!--jquery-->
<script type="text/javascript" src="/jquery.min.js"></script>
<!-- 引用 bootstrap css -->
<link rel="stylesheet" href="/bootstrap/bootstrap3/css/bootstrap.css">
<!-- 引用 bootstrap js -->
<script type="text/javascript" src="/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- treeview -->
<link rel="stylesheet" href="/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
<script type="text/javascript" src="/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<!-- tabs -->
<link rel="stylesheet" href="/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
<script type="text/javascript" src="/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
2.3在body中
<!--导航条-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Java2403
</a>
</div>
</div>
</nav>
<!--内容部分-->
<div class="container-fluid">
<div class="row">
<!--左-->
<div class="col-md-3">
<!--左侧树-->
<div id="tree"></div>
</div>
<!--右-->
<div class="col-md-9">
<div>
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a href="#home" role="tab" data-toggle="tab">欢迎</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"></div>
</div>
</div>
</div>
</div>
</div>
2.4在Script中
// 页面加载事件
$(function(){
initTree(); // 加载左侧树
})
// 初始化左侧树
function initTree(){
$.ajax({
url:"../tree.json",
success:function(data){
// 使用treeview组件
$("#tree").treeview({
data:data,
onNodeSelected: function (event, node) {
// 添加选项卡
$.addtabs({iframeHeight: 500}) // 高度
$.addtabs.add({
id: node.id,
title: node.text,
url: node.url
})
}
})
}
})
}
2.5json文档在static下创建
[
{
"id": 1,
"text": "手机管理",
"pid": 0,
"selectable": false,
"nodes": [
{"id": 3, "text": "查询手机列表", "pid": 1, "selectable": true, "url": "../page/show", "nodes": null},
{"id": 4, "text": "新增手机", "pid": 1, "selectable": true, "url": "../page/add"}
]
},
{
"id": 2,
"text": "用户管理",
"pid": 0,
"selectable": false,
"nodes": null
}
]
3.0在template继续创建show
3.1导入列表页所需外部文件
<!--jquery-->
<script type="text/javascript" src="/jquery.min.js"></script>
<!-- 引用 bootstrap css -->
<link rel="stylesheet" href="/bootstrap/bootstrap3/css/bootstrap.css">
<!-- 引用 bootstrap js -->
<script type="text/javascript" src="/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- table -->
<link rel="stylesheet" href="/bootstrap/bootstrap-table/bootstrap-table.css">
<script type="text/javascript" src="/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-bootbox/bootbox.js"></script>
<!-- 引入上传文件的css、js文件 -->
<link rel="stylesheet" href="/bootstrap/bootstrap-fileinput/css/fileinput.css">
<script type="text/javascript" src="/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
3.2body中
<!-- 注意id随着类变化 -->
<table id="phoneTable" class="table table-striped table-hover table-no-bordered"></table>
3.3在Script中
删除
<script>
$(function(){
initTable(); // 页面加载表格
})
/* 删除 */
function updateFlag(id,name){
bootbox.dialog({
size:"small",
title:"删除警告框",
message:"你确定要删除"+name+"?",//弹框内容为页面返回内容
buttons:{
success:{
label:"确定",
className:"btn btn-success",
callback:function () {//点击保存之后启动 ajax
$.ajax({
url:"/user/updateFlag",
type:"get",
data:{id:id},
dataType:"text",
async:false,
success:function(data){
bootbox.alert({
size:"small",
title:"删除成功提示框",
message:data,
})
$("#userTable").bootstrapTable("refresh"); // 刷新表格
},
error:function(){
alert("删除失败")
}
})
}
},
Danger:{
label:"取消",
className:"btn btn-default"
}
}
})
}
查询注意路径以及对应title，value=当前值,row=其他列表值如row.phoneId,index=
注意条件搜索需要刷新表格
// 条件搜索：
function searchPhone() {
// 刷新表格
$("#userTable").bootstrapTable("refresh"); // 刷新表格
}
function findUserList() {
// 表格组件:bootstrapTable
$("#userTable").bootstrapTable({
// 属性名: 值,
url: "/user/findUserList",//后端接口路径
method: "post",//请求方式
contentType: "application/x-www-form-urlencoded",
toolbar: "#mytool", //工具栏
pagination: true,//开启分页
sidePagination: "client",// client 客户端,前端 server 服务端,后端
pageSize: 10, //默认每页10条,每页条数
pageList: [2, 4, 6, 8, 10],//分页组件
pageNumber: 1,//当前页
queryParams: function (params) { // 条件搜索传参
return {
// 参数名: value,
userName: $("#userName").val(),
typeId: $("#typeId").val(),
userAge: $("#userAge").val(),
userAge2: $("#userAge2").val(),
userSex: $("input[name='userSex']:checked").val()
}
},
columns: [
{title: "<input type='button' value='全选/全不选' class='btn btn-primary' οnclick='All()'>",field: "",formatter:function (){
return "<input type='checkbox' name='box'>";
}},
{title: "编号", field: "userId"},
{title: "姓名", field: "userName"},
{title: "年龄", field: "userAge"},
{title: "手机号", field: "phone"},
{
title: "性别", field: "userSex", formatter: function (value, row, index) {
var str = "";
if (value === 1) {
str = "男";
} else if (value === 2) {
str = "女";
}
return str;
}
},
{
title: "类型", field: "typeId", formatter: function (value, row, index) {
var str = "";
if (value === 1) {
str = "普通用户";
} else if (value === 2) {
str = "vip";
} else {
str = "svip";
}
return str;
}
},
{title: "爱好", field: "hobby"},
{
title: "状态", field: "status", formatter: function (value, row, index) {
var str = "";
if (value === 1) {
str = "正常";
} else {
str = "注销"
}
return str;
}
},
{title: "个人简介", field: "info"},
{
title: "操作", field: "", formatter: function (value, row, index) {
var str = ``;
if (row.status === 1) {
str = `<input type="button" value="注销" class="btn btn-warning" οnclick="updateStatus2(${row.userId})"/>
<input type="button" value="删除" class="btn btn-danger" οnclick="updateFlag(${row.userId},'${row.userName}')"/>
<input type="button" value="修改" class="btn btn-info" οnclick="updateUser(${row.userId})"/>
<input type="button" value="升级" class="btn btn-success" οnclick="updateType(${row.userId},${row.typeId})"/> `
} else {
str = `<input type="button" value="正常" class="btn btn-success" οnclick="updateStatus1(${row.userId})"/>
<input type="button" value="删除" class="btn btn-danger" οnclick="updateFlag(${row.userId},'${row.userName}')"/>`
}
return str;
}
},
]
})
}
3.4新增点按钮调用lodAdd方法
function lodAdd(pageUrl){
var value=null;
$.ajax({
url:pageUrl,
async:false,
success:function (data){
value=data;
}
})
return value;
}
function addUser(){
bootbox.dialog({
size:"large",
title:"添加用户",
message:lodAdd("/page/add"),//弹框内容为页面返回内容
buttons:{
success:{
label:"保存",
className:"btn btn-success",
callback:function () {//点击保存之后启动 ajax
$.ajax({
url:"/user/addUser",
type:"post",
data:$("#myForm").serialize(),
dataType:"text",
async:false,
success:function(data){
alert(data)
var pageNumber = $("#userTable").bootstrapTable("getOptions").pageNumber; // 获取当前页码
$("#userTable").bootstrapTable('refreshOptions',{pageNumber:pageNumber});
},
error:function(){
alert("网络卡顿")
}
})
}
},
Danger:{
label:"取消",
className:"btn btn-default"
}
}
})
}
3.5修改
function updateUser(id){
bootbox.dialog({
size:"large",
title:"添加用户",
message:lodAdd("/page/update"),//弹框内容为页面返回内容
buttons:{
success:{
label:"保存",
className:"btn btn-success",
callback:function () {//点击保存之后启动 ajax
$.ajax({
url:"/user/updateUser",
data:$("#myForm").serialize()+"&userId="+id,
async:false,
success:function(data){
alert(data)
$("#userTable").bootstrapTable("refresh"); // 刷新表格
},
error:function(){
alert("网络卡顿")
}
})
}
},
Danger:{
label:"取消",
className:"btn btn-default"
}
}
})
$.ajax({
url:"/user/findUserListById",
data:{"id":id},
async:false,
success:function(data){
//给文本框根据id赋值
$("#user_name").val(data.userName)
$("#user_age").val(data.userAge)
$("#phone").val(data.phone)
//给单选框根据id赋值，name也可以替换class
$("input[name='user_sex']").each(function (){
if(data.userSex==this.value){
this.checked=true
}
})
//给复选框根据id赋值
$("input[name='hobby']").each(function (){
if(data.hobby.indexOf(this.value)!=-1){
this.checked=true
}
})
//给下拉列表根据id赋值
$("#type_id").find("option[value='"+data.typeId+"']").attr("selected",true)
//文本域
$("#info").val(data.info)
$("#userTable").bootstrapTable("refresh"); // 刷新表格
},
error:function(){
alert("网络卡顿")
}
})
}
批删
// 批删
function delAllUser() {
var arr=$("#userTable").bootstrapTable("getSelections")
var id = "";
for(var i=0;i<arr.length;i++){
id+= id===""? arr[i].userId:","+arr[i].userId;
}
if(id===""){
bootbox.alert({
size: "small",
title: "提示框",
message: "请选择要删除的用户",
})
}else{
$.ajax({
url: "/user/delAllUser",
type: "get",
data: {id: id},
dataType: "text",
async: false,
success: function (data) {
bootbox.alert({
size: "small",
title: "提示框",
message: "批删成功",
})
$("#userTable").bootstrapTable("refresh"); // 刷新表格
}
})
}
}
批删sql
<delete id="delAllUser">
delete from a_user where user_id in
<foreach collection="id" item="userId" open="(" separator="," close=")">
#{userId}
</foreach>
</delete>
4.0add页面
form表单 注意修改其中name值
<form id="myForm" class="form-horizontal">
</form>
文本框
<div class="form-group">
<label class="col-md-2 control-label">姓名</label>
<div class="col-md-4">
<input type="text" class="form-control" name="userName">
</div>
</div>
下拉列表
<div class="form-group">
<label class="col-md-2 control-label">类型</label>
<div class="col-md-4">
<select class="form-control" name="typeId">
<option value="-1">请选择</option>
<option value="1">普通用户</option>
<option value="2">VIP</option>
<option value="3">SVIP</option>
</select>
</div>
</div>
复选框
<div class="form-group">
<label class="col-md-2 control-label">爱好</label>
<div class="col-md-4">
<input type="checkbox" name="hobby" value="敲代码">敲代码
<input type="checkbox" name="hobby" value="打篮球">打篮球
<input type="checkbox" name="hobby" value="旅游">旅游
<input type="checkbox" name="hobby" value="健身">健身
</div>
</div>
单选框
<div class="form-group">
<label class="col-md-2 control-label">性别</label>
<div class="col-md-4">
<input type="radio" name="userSex" value="1">男
<input type="radio" name="userSex" value="2">女
</div>
</div>
文本域
<div class="form-group">
<label class="col-md-2 control-label">个人简介</label>
<div class="col-md-4">
<textarea class="form-control" rows="3" name="info"></textarea>
</div>
</div>
图片
<div class="form-group">
<label class="col-md-2 control-label">头像：</label>
<div class="col-md-4" style="height: 200px">
<!-- name="garbageImg" 自己的封装图片字段 -->
<input name="userImg" id="testimg" type="hidden">
<input type="file" multiple class="projectfile" accept="image/*" name="headImg" id="headImg">
</div>
</div>
图片插件
function uploadImg(url){
$('#headImg').fileinput({
initialPreview:url,
//初始化图片配置：
initialPreviewConfig: [
{key: 1, showDelete: false}
],
//是否初始化图片显示
initialPreviewAsData: true,
language: 'zh', //设置语言
uploadUrl: '/user/uploadImg', //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
maxFileCount: 2, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
}).on('fileuploaded', function(event, data, previewId, index) {
//alert(data.response);
var imgval ="http://"+ location.host+"/"+data.response.path;
$('#testimg').val(imgval);
});
}
图片Java
@RequestMapping("uploadImg")
@ResponseBody
public String uploadImg(MultipartFile headImg, HttpServletRequest request){
String filePath = FileUtil.uploadFile(headImg, request);
return "{\"path\":\"" + filePath + "\"}";//可以
}
按钮
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
小弹窗（确认弹窗）
bootbox.alert({
size:"small",
title:"升级提示框",
message:"svip不能升级",
})
大弹窗（添加或修改）拥有确认和取消按钮
bootbox.dialog({
size:"large",
title:"添加用户",
message:lodAdd("/page/add"),//弹框内容为页面返回内容
buttons:{
success:{
label:"保存",
className:"btn btn-success",
callback:function () {//点击保存之后启动 ajax
}
},
Danger:{
label:"取消",
className:"btn btn-default"
}
}
})
刷新本页表格
$("#userTable").bootstrapTable("refresh"); // 刷新表格
根据本页刷新表格
var pageNumber = $("#userTable").bootstrapTable("getOptions").pageNumber; // 获取当前页码
$("#userTable").bootstrapTable('refreshOptions',{pageNumber:pageNumber});
增删改查mapper
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jk.wbx.mapper.GoodsMapper">
<resultMap id="GoodsMap" type="com.jk.wbx.pojo.GoodsBean">
<result column="goods_id" property="goodsId" />
<result column="goods_type_id" property="goodsTypeId" />
<result column="goods_name" property="goodsName" />
<result column="goods_img" property="goodsImg" />
<result column="goods_price" property="goodsPrice" />
<result column="goods_number" property="goodsNumber" />
<result column="total_price" property="totalPrice" />
<result column="goods_time" property="goodsTime" />
<result column="goods_status" property="goodsStatus" />
<association property="typeBean" javaType="com.jk.wbx.pojo.TypeBean">
<result column="t_id" property="tId" />
<result column="t_name" property="tName" />
</association>
</resultMap>
<resultMap id="typeMap" type="com.jk.wbx.pojo.TypeBean">
<result column="t_id" property="tId" />
<result column="t_name" property="tName" />
</resultMap>
<sql id="tc">
<if test="goodsName!=null and goodsName!=''">
and goods_name like '%${goodsName}%'
</if>
<if test="goodsTypeId!=null and goodsTypeId!=-1">
and goods_type_id = #{goodsTypeId}
</if>
<if test="stateTime!=null and stateTime!=''">
and goods_time > #{stateTime}
</if>
<if test="endTime!=null and endTime!=''">
and goods_time < #{endTime}
</if>
</sql>
<insert id="addGoods">
insert into t_goods_wbx values(null,#{goodsTypeId},#{goodsName},#{goodsImg},#{goodsPrice},#{goodsNumber},#{totalPrice},sysdate(),1)
</insert>
<insert id="addType" useGeneratedKeys="true" keyColumn="t_id" keyProperty="goodsTypeId">
insert into t_type_wbx values (null,#{typeBean.tName})
</insert>
<update id="updateStatus">
update t_goods_wbx set goods_status=1 where goods_id=#{id}
</update>
<update id="updateStatus2">
update t_goods_wbx set goods_status=2 where goods_id=#{id}
</update>
<delete id="delTypeById">
delete from t_goods_wbx where goods_type_id=#{id}
</delete>
<delete id="delType">
delete from t_type_wbx where t_id=#{id}
</delete>
<select id="getCount" resultType="java.lang.Integer">
select count(*) from t_goods_wbx t1 inner join t_type_wbx t2 on t1.goods_type_id=t2.t_id where 1=1
<include refid="tc"/>
</select>
<select id="findGoodsList" resultMap="GoodsMap">
select * from t_goods_wbx t1 inner join t_type_wbx t2 on t1.goods_type_id=t2.t_id where 1=1
<include refid="tc"/>
limit #{offset},#{limit}
</select>
<select id="findTypeList" resultMap="typeMap">
select t2.t_id,t2.t_name,count(t1.goods_type_id) count from t_goods_wbx t1
inner join t_type_wbx t2 on t1.goods_type_id=t2.t_id group by t1.goods_type_id
</select>
</mapper>
7317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
