layui.jsp：
家居销售
- 控制台
- 商品管理
- 商品添加
- 商品删除
- 商品修改
GoodsMange.js:
$(function(){
$(".layui-nav-child").on("click", "dd", function(){
var sId = $(this).data("id"); //获取data-id的值
window.location.hash = sId; //设置锚点
loadInner(sId);
});
function loadInner(sId){
var sId = window.location.hash;
var pathn, i;
switch(sId){
case "#addGoods": pathn = "addGoods.jsp"; i = 1; break;
case "#delGoods": pathn = "deleteGoods.jsp"; i = 1; break;
case "#updGoods": pathn = "updateGoods.jsp"; i = 1; break;
default: pathn = "empty.jsp"; i = 0; break;
}
$("#content").load(pathn); //加载相对应的内容
var sId = window.location.hash;
}
loadInner(sId);
$(".layui-nav-child dd").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
});
然后大家必须要注意，因为是在div标签中加载其他jsp中的内容，所以要加载的jsp不能有和父页面相同的标签。比如
等等。
addGoods.jsp:
pageEncoding="UTF-8"%>
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
商品添加
商品名称:
商品图片:
商品价格
-
上传日期
本店活动
上传者
店名
商品详情
材质
请选择材质
人造板
木
金属
麻
香樟木
绒质
铁质
塑料
家具类型
直接选择或搜索选择
衣柜
书柜
床头柜
鞋柜
风格
请选择风格
简约现代
北欧风格
明清古典
现代中式
欧式
轻奢
美式乡村
日式
货源地
请选择省
浙江省
江西省
福建省
请选择市
杭州
宁波
温州
台州
绍兴
请选择县/区
西湖区
余杭区
临安市
立即提交
重置
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
form.render();
//日期
laydate.render({
elem: '#date'
});
laydate.render({
elem: '#date1'
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
//表单赋值
layui.$('#LAY-component-form-setval').on('click', function(){
form.val('example', {
"username": "贤心" // "name": "value"
,"password": "123456"
,"interest": 1
,"like[write]": true //复选框选中状态
,"close": true //开关状态
,"sex": "女"
,"desc": "我爱 layui"
});
});
//表单取值
layui.$('#LAY-component-form-getval').on('click', function(){
var data = form.val('example');
alert(JSON.stringify(data));
});
});
function showImg(){
// var img_file = $("#img_file").val();
var file = document.getElementById('img_file').files[0];
var re = new FileReader();
re.readAsDataURL(file);
re.onload = function(re){
$('#img_id').attr("src", re.target.result);
}
}
在script标签加上：
form.render();
即可。
每一次加载该页面，js都会进行一次渲染，这样的话就不会出现js渲染失效或者js加载失败等问题。
弄了一下午才弄出来的，如果对入坑的小伙伴有帮助就关注一下就好啦。