使用tita插件quicktable对单表进行快速增删改查

date: 2015-04-09 11:40:23

简介

quicktable 是tita框架的辅助插件，用来快速完成对单个表进行增删改差的功能。

示例

如何对这张表money_subject 进行增删改查

[抱歉上次服务器没续费图挂了]

最终的查询界面

[抱歉上次服务器没续费图挂了]

实现上面的功能，只需要2个控制器方法，一个显示页面，一个提供数据、操作接口，另外一个view页面

控制器方法

public function actionSubject()
{
    $table=new SearchTable('money_subject');
 
    $table->set_edit_able('parent_type',true);
    $table->set_edit_able('child_type',true);
    $table->set_edit_able('trade_type',true);
    $table->set_edit_able('parent_name',true);
    $table->set_edit_able('child_name',true);
    $table->set_edit_able('desc',true);
    $table->set_edit_able('group',true);
    $table->set_edit_able('status',true);
 
    $table->set_enum('group',['kmoney'=>'现金','coupon'=>'代金券']);
    $table->set_enum('status',['0'=>'关闭','1'=>'正常']);
    $table->set_enum('trade_type',['1'=>'划入','2'=>'划出']);
 
    $this->assign('fields',$table->fields());
    $this->display();
}

quicktable 有两个类，一个SearchTable，用来设置表单的属性，参数。

还有一个是SearchField用来表示单个列的属性，上面的方法将SearchTable中所有的SearchField传递到了fields变量

增删改查ajax接口

public function actionAjaxSubject()
{
    $action = $_GET['action'];
    if (empty($action)) {
        echo json_encode(['Flag' => 101, 'status' => 'n', 'info' => '参数错误','hasError'=>true,'error'=>'参数错误']);
        return;
    }
 
    $table = new SearchTable('money_subject');
 
    if ($action == 'list') {
        $ret = $table->search_from_post();
    } elseif ($action == 'add') {
        $ret = $table->add_from_post();
        if ($ret['hasError']) {
            $ret['error'] = '添加失败';
        }
    } elseif ($action == 'modify') {
        $ret = $table->modify_from_post();
        if ($ret['hasError']) {
            $ret['error'] = '修改失败';
        }
    } elseif ($action == 'del') {
        $ret = $table->del_from_post();
    } else {
        $ret['hasError'] = true;
        $ret['error']    = '非法参数';
    }
    echo json_encode($ret);
}

这个是用来bui来请求数据的接口，基本除了表名，都可以复制粘贴

视图文件

<div class="row">
    <form id="searchForm" class="form-horizontal span24">
        <div class="row">
 
            <?php foreach ($fields as $field): ?>
                <?php if(!$field->search) continue;?>
                <div class="control-group span4">
                    <label class="control-label"><?php echo $field->name;?>：</label>
                    <div class="controls">
                        <input type="text" class="control-text" name="<?php echo $field->field;?>">
                    </div>
                </div>
            <?php endforeach;?>
            <div class="span3 offset2">
                <button  type="button" id="btnSearch" class="button button-primary">搜索</button>
            </div>
        </div>
    </form>
</div>
 
<div id="grid"></div>
 
<script type="text/javascript">
    BUI.use(['common/search','bui/calendar'],function (Search,Calendar) {
 
        var <?php foreach ($fields as $field): ?>
            <?php if(!$field->display) continue;?>
            <?php if(!empty($field->enum)):?>
            <?php echo $field->field;?>EnumObj= <?php echo json_encode($field->enum,JSON_FORCE_OBJECT);?>,
            <?php endif;?>
            <?php endforeach;?>
            editing = new BUI.Grid.Plugins.RowEditing({
                triggerCls : 'btn-edit', //触发编辑的时候不选中行
                autoSave:true
            }),
            columns = [
                <?php foreach ($fields as $field): ?>
                <?php if(!$field->display) continue;?>
                {title:'<?php echo $field->name;?>',dataIndex:'<?php echo $field->field;?>',<?php if($field->width!=0):?>
                    width:<?php echo $field->width;?>,
                    <?php endif;?><?php if($field->editAble):?>
                    <?php if(!empty($field->enum)):?>
                    editor : {xtype :'select',items : <?php echo $field->field;?>EnumObj},
                    <?php else:?>
                    editor : {xtype : 'text',rules:{required:true}},
                    <?php endif;?>
                    <?php endif;?><?php if(!empty($field->enum)):?>
                    renderer:BUI.Grid.Format.enumRenderer(<?php echo $field->field;?>EnumObj),
                    <?php endif;?><?php if($field->renderer!=''):?>
                    renderer:<?php echo $field->renderer;?>,
                    <?php endif;?>},
                <?php endforeach;?>
            ],
            store = Search.createStore('<?php echo \core\Tita::entry();?>?a=AjaxSubject&action=list&type=<?php echo $type;?>',{
                proxy : {
                    save : { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                        addUrl : '<?php echo \core\Tita::entry();?>?a=AjaxSubject&action=add&type=<?php echo $type;?>',
                        updateUrl : '<?php echo \core\Tita::entry();?>?a=AjaxSubject&action=modify&type=<?php echo $type;?>',
                        removeUrl : '<?php echo \core\Tita::entry();?>?a=AjaxSubject&action=del&type=<?php echo $type;?>'
                    },
                    method : 'POST'
                },
                remoteSort: true,  // 开启异步排序
                autoSync : true, //保存数据后，自动更新
                pageSize : 10
            }),
            gridCfg = Search.createGridCfg(columns,{
                forceFit: true,
                plugins : [editing,BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
            });
 
        var  search = new Search({
                store : store,
                gridCfg : gridCfg
            }),
            grid = search.get('grid'),
            store=search.get('store');
 
 
        function addFunction(){
            var newData = {name : ''};
            store.addAt(newData,0);
            editing.edit(newData,'name'); //添加记录后，直接编辑
        }
 
        //删除操作
        function delFunction(){
            var selections = grid.getSelection();
            delItems(selections);
        }
 
        function delItems(items){
            var ids = [];
            BUI.each(items,function(item){
                ids.push(item.id);
            });
 
            if(ids.length){
                BUI.Message.Confirm('确认要删除选中的记录么？',function(){
                    store.save('remove',{ids : ids});
                },'question');
            }
        }
 
        //监听事件，删除一条记录
        grid.on('cellclick',function(ev){
            var sender = $(ev.domTarget); //点击的Dom
            if(sender.hasClass('btn-del')){
                var record = ev.record;
                delItems([record]);
            }
        });
 
        var datepicker = new Calendar.DatePicker({
            trigger:'.calendar-time',
            showTime:true,
            autoRender : true
        });
 
 
    });
 
 
</script>
</script>

这是一个bui表单搜索页面，前面的searchForm 用来搜索表中的字段

后面是表单的配置，需要该的就是增删改查对应的地址url。

主要变动的地方，就是对field的配置，需要设置字段的名次，是否搜索，是否显示，枚举数据等。

例如设置trade_type的显示，数据库里是1 2，界面里面需要显示划入划出，就在控制器里，加上配置：

$table->set_enum('trade_type',['1'=>'划入','2'=>'划出']);

完整的功能配置，可以直接查看源代码。需要配合tita框架，bui前端框架使用