码云地址:https://gitee.com/zhongbai111/carrent-ssm_layui
SSM汽车出租管理项目
- 前端采用layui框架搭建
- 后端采用spring+springmvc+mybatis
- 技术主要有图片上传 druid的数据源监控 ECharts的可视化图表 zxing的二维码生成等
主页分为两个部分:
左边菜单栏和右侧主页面:
左侧菜单栏通过请求json渲染:
layui.use(['bodyTab','form','element','layer','jquery'],function(){
var form = layui.form,
element = layui.element;
$ = layui.$;
layer = parent.layer === undefined ? layui.layer : top.layer;
tab = layui.bodyTab({
openTabNum : "50", //最大可打开窗口数量
url : "${ctx }/menu/loadIndexLeftMenuJson.action" //获取菜单json地址
});
项目中最主要的就是数据表格的渲染,使用layui自定义表格渲染方便操作:
tableIns=table.render({
elem: '#userTable' //渲染的目标对象
,url:'${ctx}/user/loadAllUser.action' //数据接口
,title: '用户数据表'//数据导出来的标题
,toolbar:"#userToolBar" //表格的工具条
,height:'full-200'
,cellMinWidth:100 //设置列的最小默认宽度
,page: true //是否启用分页
,cols: [[ //列表数据
{type: 'checkbox', fixed: 'left'}
,{field:'userid', title:'ID',align:'center',width:'80'}
,{field:'realname', title:'用户姓名',align:'center',width:'100'}
,{field:'loginname', title:'登陆名',align:'center',width:'100'}
,{field:'identity', title:'身份证号',align:'center',width:'150'}
,{field:'phone', title:'用户电话',align:'center',width:'150'}
,{field:'address', title:'用户地址',align:'center',width:'160'}
,{field:'sex', title:'性别',align:'center',width:'80',templet:function(d){
return d.sex=='1'?'<font color=blue>男</font>':'<font color=red>女</font>';
}}
,{field:'pwd', title:'密码',align:'center',width:'80',templet:function(d){
return "******";
}}
,{field:'available', title:'是否可用',width:'100',align:'center',templet:function(d){
return d.available=='1'?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
}}
,{fixed: 'right', title:'操作', toolbar: '#userBar', width:260,align:'center'}
]],
done:function (data,curr,count) {
if (data.data.length==0&&curr!=1){
tableIns.reload({
page:{
curr:curr-1
}
})
}
}
})