先看效果
1,列表

2,新增

3,编辑

4,删除

调用方式
<div class="page">
<div class="fixed-bar">
<div class="item-title">
<div class="subject">
<h3>App版本管理</h3>
<h5>App版本管理列表</h5>
</div>
</div>
</div>
<div id="flexigrid"></div>
</div>
<script>
$(function(){
$("#flexigrid").flexigrid({
//列表加载地址
url: 'index.php?act=mb_app&op=index',
//新增地址
addUrl:'index.php?act=mb_app&op=save_version',
//编辑地址
editUrl:'index.php?act=mb_app&op=save_version',
//删除地址
delUrl:'index.php?act=mb_app&op=del_version',
//展示列
colModel: [
{display: 'ID', name: 'id', width: 60, sortable: true, align: 'left',isKey:true,submitable:true,remark:'说明',type:'hidden'},
{display: '版本名', name: 'title', width: 120, sortable: false, align: 'left',submitable:true,remark:'版本名称',type:'text'},
{display: '客户端', name: 'client', width: 80, sortable: false, align: 'center',render:renderClient,submitable:true,remark:'安卓或IOS',type:'select',options:[{value:1,label:'安卓'},{value:2,label:'IOS'}]},
{display: '版本号', name: 'version', width: 100, sortable: true, align: 'left',submitable:true,remark:'App的版本符号',type:'text'},
{display: '发布', name: 'is_default', width: 80, sortable: true, align: 'center',render:renderDefault,submitable:true,remark:'是否发布',type:'select',options:[{value:1,label:'是'},{value:0,label:'否'}]},
{display: '下载地址', name: 'download_url', width: 260, sortable: false, align: 'left',render:readerUrl,submitable:true,remark:'App下载地址',type:'text'},
{display: '版本描述', name: 'content', width: 300, sortable: false, align: 'left',submitable:true,remark:'版本更新的详细描述',type:'textarea'},
{display: '创建时间', name: 'create_time', width: 160, sortable: true, align: 'center'},
],
//列操作按钮组
colButtons:[
{display:'编辑',title:'',callback:handleEdit},
{display:'删除',title:'',callback:handleDel},
],
//表头按钮组
buttons: [
{display:'添加版本',name: 'add', bclass: 'add', onpress:handleAdd},
],
//搜索栏
searchitems:[
{display: '版本名',name:'title'},
{display: '版本描述',name:'content'},
{display: '客户端',name:'client',type:'select',options:[{value:1,label:'安卓'},{value:2,label:'IOS'}]}
],
title: '优惠码版本管理列表',
});
})
//渲染客户端字段
function renderClient(value){
value = parseInt(value);
switch (value) {
case 1:
return '安卓';
case 2:
return 'IOS';
default:
return '未知';
}
}
//渲染默认值字段
function renderDefault(value){
if(value==1){
return '是'
}else{
return '否'
}
}
function readerUrl(v){
return v
}
//新增对话框
function handleAdd(){
$("#flexigrid").dialogAdd('添加版本',{});
}
//编辑对话框
function handleEdit(row,index){
$("#flexigrid").dialogEdit('编辑版本-'+row.title,row);
}
//删除确认
function handleDel(row,index){
$("#flexigrid").dialogDel('是否要删除版本-'+row.title,row);
}
</script>
源码依赖
- vue.js;
- elememt.js
- flexigrid-vue.js@github

发表评论