## 相关操作
~~~html
<div class="row">
<div class="widget-box">
<div class="widget-header">
<h4 class="smaller">
条件搜索框
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<form action="" method="get" >
<select name="query[status]">
<option value="">请选择状态</option>
<option value="1" <eq name="query['status']" value="1">selected</eq> >开启</option>
<option value="0" <eq name="query['status']" value="0">selected</eq> >关闭</option>
</select>
<input type="text" placeholder="角色名称" name="query[name]" value="{$query.name}">
<button type="submit" class="btn btn-xs btn-success">
<i class="icon-search bigger-110"></i>
<span class="bigger-110 no-text-shadow">搜索</span>
</button>
</form>
</div>
</div>
</div>
</div>
<!-- PAGE CONTENT BEGINS -->
<div class="row">
<div class="well well-sm">
<a href="{:U('rbac/show')}" class="btn btn-sm btn-success">
<i class="icon-plus bigger-110"></i>
<span class="bigger-110 no-text-shadow">添加</span>
</a>
<a onclick="changeStatus('off')" class="btn btn-sm btn-warning">
<i class="icon-ban-circle bigger-110"></i>
<span class="bigger-110 no-text-shadow">禁用</span>
</a>
<a onclick="changeStatus('open')" class="btn btn-sm btn-success">
<i class="icon-ok bigger-110"></i>
<span class="bigger-110 no-text-shadow">开启</span>
</a>
<a onclick="deleteCheck()" class="btn btn-sm btn-danger">
<i class="icon-trash bigger-110"></i>
<span class="bigger-110 no-text-shadow">删除</span>
</a>
</div>
</div>
<div class="row">
<div class="table-responsive">
<table id="sample-table-1" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center">
<label>
<input class="ace" type="checkbox">
<span class="lbl"></span>
</label>
</th>
<th>角色名称</th>
<th>状态</th>
<th class="hidden-480">角色说明</th>
<th>操作</th>
</tr>
</thead>
<form id="checkBox" method="post" action="{:U('rbac/remove')}">
<tbody>
<volist name="list" id="item">
<tr>
<td class="center">
<label>
<input class="ace" name="ids[]" value="{$item.id}" type="checkbox">
<span class="lbl"></span>
</label>
</td>
<td>{$item.name}</td>
<td>
<eq name="item.status" value="1">
<i class="icon-ok bigger-120"></i>
<else/>
<i class="icon-ban-circle bigger-120"></i>
</eq>
</td>
<td>{$item.remark}</td>
<td>
<div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
<a href="{:U('rbac/access',['role_id'=>$item['id']])}" class="btn btn-xs btn-inverse">
<i class="icon-key bigger-120"></i>
授权
</a>
<a href="{:U('rbac/show',['id'=>$item['id']])}" class="btn btn-xs btn-info">
<i class="icon-edit bigger-120"></i>
编辑
</a>
<a onclick="actionOne(this,'delete')" class="btn btn-xs btn-danger">
<i class="icon-trash bigger-120"></i>
删除
</a>
<eq name="item.status" value="1">
<a onclick="actionOne(this,'off')" class="btn btn-xs btn-warning">
<i class="icon-ban-circle bigger-120"></i>
禁止
</a>
<else/>
<a onclick="actionOne(this,'open')" class="btn btn-xs btn-success">
<i class="icon-ok bigger-120"></i>
开启
</a>
</eq>
</div>
<div class="visible-xs visible-sm hidden-md hidden-lg">
<div class="inline position-relative">
<button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
<i class="icon-cog icon-only bigger-110"></i>
</button>
<ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
<li>
<a href="{:U('rbac/access',['role_id'=>$item['id']])}" class="tooltip-info" data-rel="tooltip" title="" data-original-title="授权">
<span class="blue">
<i class="icon-key bigger-120"></i>
</span>
</a>
</li>
<li>
<a href="{:U('rbac/show',['id'=>$item['id']])}" class="tooltip-success" data-rel="tooltip" title="" data-original-title="编辑">
<span class="green">
<i class="icon-edit bigger-120"></i>
</span>
</a>
</li>
<li>
<a onclick="actionOne(this,'delete')" class="tooltip-error" data-rel="tooltip" title="" data-original-title="删除">
<span class="red">
<i class="icon-trash bigger-120"></i>
</span>
</a>
</li>
<eq name="item.status" value="1">
<li>
<a onclick="actionOne(this,'off')" class="tooltip-info" data-rel="tooltip" title="" data-original-title="禁止">
<span class="blue">
<i class="icon-ban-circle bigger-120"></i>
</span>
</a>
</li>
<else/>
<li>
<a onclick="actionOne(this,'open')" class="tooltip-success" data-rel="tooltip" title="" data-original-title="开启">
<span class="green">
<i class="icon-ok bigger-120"></i>
</span>
</a>
</li>
</eq>
</ul>
</div>
</div>
</td>
</tr>
</volist>
</tbody>
</form>
</table>
<div class="panel-body center">
{$page}
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
$('table th input:checkbox').on('click' , function(){
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function(){
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
var $source = $(source);
var $parent = $source.closest('table')
var off1 = $parent.offset();
var w1 = $parent.width();
var off2 = $source.offset();
var w2 = $source.width();
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
return 'left';
}
})
//删除选中选项
function deleteCheck() {
layer.confirm('您确定要删除吗', {
btn: ['确定','取消'], //按钮
shade: false //不显示遮罩
}, function(index){
layer.close(index);
util.submit('#checkBox',function (data) {
if(data.status==true){
layer.msg(data.message, function(){
location.reload();
});
}else {
layer.msg(data.message);
}
})
});
}
function changeStatus(action) {
var params = $('#checkBox').serialize()+"&action="+action;
util.post("{:U('rbac/status')}",params,function (data) {
if(data.status==true){
layer.msg(data.message, function(){
location.reload();
});
}else {
layer.msg(data.message);
}
})
}
//删除/改变一个选项
function actionOne(_this,action) {
$(_this).parents('tr').find('[type="checkbox"]').prop("checked", true);
switch (action){
case 'delete':deleteCheck();return false;
case 'off':changeStatus('off');break;
case 'open':changeStatus('open');break;
}
}
</script>
~~~
