后台快捷CRUD页面框架

先看效果

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>

源码依赖

1. vue.js;
2. elememt.js
3. flexigrid-vue.js@github