--------------------------------------------
第一个相关跳转 主要用于表单中的按钮点击后的跳转
html :
<script type="text/html" id="btnList">
<a class="layui-btn layui-btn-primary layui-btn-xs" target="_blank" lay-event="select">查看</a>
</script>
------------
js或者layui:
{fixed: 'right', title:'操作', visible: true, align: 'center', valign: 'middle', toolbar: '#btnList'}
//监听工具条
table.on('tool(all)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'select'){
$(location).attr('href', '/beautician/detail?id='+data.id); //全局的路径,方法上不用管
}
});
-----------
controller:
/**
* 详情页
*/
@RequestMapping(value = "/detail")
public Object detail(Integer id,Model model) {
Map<String, Object> beautician = beauticianService.selectBeauticianById(id);
model.addAttribute("item",beautician);
LogObjectHolder.me().set(beautician);
return PREFIX + "beautician_detail.html";
}
--------------------------------------------
第二个相关跳转 主要用于点击普通按钮后的跳转
1.官方
html:
<div class="layui-col-xs4 layui-col-md3 layui-pull-right layui-text-right">
<button class="layui-btn layui-add-btn">添加新的内容</button>
</div>
js:
//添加新内容按钮
$('.layui-text-right .layui-add-btn').on('click', function(){
turnToOtherPage($,"/content/content_add",'新增内容');
return false;
});
controller:
/**
* 跳转到添加content
*/
@RequestMapping("/content_add")
public String contentAdd(Model model) {
//设置新增时显示的创建人、创建时间
model.addAttribute("createName",ShiroKit.getUser().getName());
model.addAttribute("createTime",new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
return PREFIX + "content_add.html";
}
--------
2.也可以使用的!
html:
<div class="layui-col-xs4 layui-col-md3 layui-pull-right layui-text-right">
<button type="button" class="layui-btn layui-add-btn">添加新的美容师</button>
</div>
------------
layui:
$('.layui-text-right .layui-btn').on('click', function(){
$(location).attr('href', "/beautician/beautician_add");
});
------------
controller:
//跳转到store_add.html页面
@RequestMapping("store_add")
//@ResponseBody 注:这个加上会在页面输出字符串
public String storeadd() {
return PREFIX + "store_add.html";
}
-------------------------------------------------
注: 一定要加入这些导入,不写没显示效果
<script type="text/javascript" src="${ctxPath}/static/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/tool/turnTopage.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/ajax/path.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/common/dictionary.js"></script>
----------------------------------------
3.按钮跳转,比较直接
html:
<div class="layui-col-xs4 layui-col-md3 layui-pull-right layui-text-right">
<a onclick="orderAdd()"><button class="layui-btn layui-add-btn" lay-submit="" lay-filter="orderAdd">新增工单列表</button></a>
</div>
引入:
<script type="text/javascript" src="${ctxPath}/static/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/static/modular/operationSupport/serviceWork/maintenance.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/config.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/common/dictionary.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/tool/turnTopage.js"></script>
<script type="text/javascript" src="${ctxPath}/static/linkage/data.js"></script>
<script type="text/javascript" src="${ctxPath}/static/linkage/province.js"></script>
<script type="text/javascript" src="${ctxPath}/static/linkage/threeWrap.js"></script>
js:
//跳转到新增
function orderAdd(){
turnToOtherPage($,"/serviceWork/afterSale/orderAdd",'新增维保工单');
}
---------------------------------------------------------------------
4.返回按钮
html :
<button class="layui-btn layui-btn-retrieve" lay-submit lay-filter="quit">取消</button>
引入 :
<script type="text/javascript" src="${ctxPath}/static/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/common/area.js"></script>
<script type="text/javascript" src="${ctxPath}/static/modular/operationSupport/serviceWork/maintenance-add.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/config.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/tool/turnTopage.js"></script>
<script type="text/javascript" src="${ctxPath}/static/linkage/data.js"></script>
<script type="text/javascript" src="${ctxPath}/static/linkage/province.js"></script>
js:
//点击取消,跳回维保工单首页
form.on('submit(quit)',function(){closeThisPage($);return false;});
--------------------------------------------
5. 直接返回的方式, 不用引入.
html :
<div class="layui-col-xs12 layui-text-right layui-mb10">
<button type="button" class="layui-btn layui-btn-retrieve layui-btn-retrieve-big layui-mr15" ><a href="javascript:history.go(-1)">返回上一页</a></button>
</div>