1. 页面引入 vue.js
<!-- vue -->
<script src="../../../assets/js-vue/vue.js"></script>
2. js 代码
var vm = new Vue({
el: '#app',
data:{
varList: [], //list
page: [], //分页类
pd: [], //map
showCount: -1, //每页显示条数(这个是系统设置里面配置的,初始为-1即可,固定此写法)
currentPage: 1, //当前页码
add:false,
del:false,
edit:false,
loading:false //加载状态
},
methods: {
//初始执行
init() {
//复选框控制全选,全不选
$('#zcheckbox').click(function(){
if($(this).is(':checked')){
$("input[name='ids']").click();
}else{
$("input[name='ids']").attr("checked", false);
}
});
this.getList();
},
//获取列表
getList: function(){
this.loading = true;
$.ajax({
xhrFields: {
withCredentials: true
},
type: "POST",
url: httpurl+'fhbutton/list?showCount='+this.showCount+'¤tPage='+this.currentPage,
data: {KEYWORDS:this.pd.KEYWORDS,tm:new Date().getTime()},
dataType:"json",
success: function(data){
if("success" == data.result){
vm.varList = data.varList;
vm.page = data.page;
vm.pd = data.pd;
vm.hasButton();
vm.loading = false;
$("input[name='ids']").attr("checked", false);
}else if ("exception" == data.result){
showException("按钮模块",data.exception);//显示异常
}
}
}).done().fail(function(){
swal("登录失效!", "请求服务器无响应,稍后再试", "warning");
setTimeout(function () {
window.location.href = "../../login.html";
}, 2000);
});
},
},
mounted(){
this.init();
}
})
3. html 代码片段
<!-- 开始循环 -->
<template v-for="(data,index) in varList">
<tr>
<td>
<div class="checkbox d-inline">
<input type="checkbox" v-bind:id="'zcheckbox'+index" name='ids' v-bind:value="data.FHBUTTON_ID">
<label v-bind:for="'zcheckbox'+index" class="cr"></label>
</div>
</td>
<td scope="row">{{page.showCount*(page.currentPage-1)+index+1}}</td>
<td>{{data.NAME}}</td>
<td>{{data.SHIRO_KEY}}</td>
<td>{{data.BZ}}</td>
<td>
<a v-show="edit" title="修改" v-on:click="goEdit(data.FHBUTTON_ID);" ><i class="feather icon-edit-2"></i></a>
<a v-show="del" title="删除" v-on:click="goDel(data.FHBUTTON_ID);" ><i class="feather icon-x"></i></a>
</td>
</tr>
</template>
4.后台代码
/**列表 from www.1b23.com
* @param page
* @throws Exception
*/
@RequestMapping(value="/list", produces="application/json;charset=UTF-8")
@RequiresPermissions("fhbutton:list")
@ResponseBody
public Object list(Page page) throws Exception{
Map<String,Object> map = new HashMap<String,Object>();
String errInfo = "success";
PageData pd = new PageData();
pd = this.getPageData();
String KEYWORDS = pd.getString("KEYWORDS"); //关键词检索条件
if(Tools.notEmpty(KEYWORDS)){
pd.put("KEYWORDS", KEYWORDS.trim());
}
page.setPd(pd);
List<PageData> varList = fhButtonService.list(page); //列出Fhbutton列表
map.put("varList", varList);
map.put("page", page);
map.put("pd", pd);
map.put("result", errInfo);
return map;
}
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。