跳转的几个小问题

时间:2021-06-14 17:36:02

--------------------------------------------

第一个相关跳转  主要用于表单中的按钮点击后的跳转

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>