使用tita插件quicktable对单表进行快速增删改查
简介
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前端框架使用