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加載失敗等問題。
弄了一下午才弄出來的，如果對入坑的小夥伴有幫助就關注一下就好啦。