本文档详细介绍了使用JavaScript和Bootstrap Table实现的动态表格初始化，包括初始化参数配置、地区搜索功能，以及权限控制。展示了如何根据用户权限显示或隐藏操作列，并通过Ajax处理上线、下线等操作。
js：
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'enterprise_position/index' + location.search,
add_url: '',
edit_url: '',
del_url: 'enterprise_position/del',
multi_url: 'enterprise_position/multi',
table: 'enterprise_position',
},
//禁用默认搜索
search: false,
//启用普通表单搜索
commonSearch: true,
//可以控制是否默认显示搜索单表,false则隐藏,默认为false
searchFormVisible: true,
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
columns: [
[
{field: 'id', title: __('序号'),operate:false},
{field: 'position', title: __('Position')},
{field: 'e_id', title: __('E_id')},
{field: 'salary_min', title: __('Salary_min'), operate:false},
{field: 'salary_max', title: __('Salary_max'), operate:false},
{field: 'place', title: __('Place'), operate:false},
{field: 'status', title: __('Status'), searchList: {"0":__('上线'),"1":__('下线')}, formatter: Table.api.formatter.status,visible: true},
{field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
{
field: 'operate', title: __('Operate'), table: table,
events: Table.api.events.operate,
buttons: [{
name: 'detail',
text: __('查看'),
icon: 'fa fa-list',
classname: 'btn btn-info btn-xs btn-detail btn-dialog',
url: 'enterprise_position/detail'
},{
name: 'resume',
text: function (row) {
return '简历('+row.resume_num+')';
},
title:'简历',
icon: 'fa fa-list',
classname: 'btn btn-xs btn-info btn-dialog',
url: 'position_to_resume/index?ids={ids}'
},{
name: 'online',
text: __('上线'),
icon: 'fa fa-list',
classname: 'btn btn-xs btn-success btn-ajax',
confirm:function (row) {
return '是否确定上线该“'+row.position+'”职位？';
},
success:function (data,ret) {
},
url: 'enterprise_position/online?ids={ids}'
},{
name: 'offline',
text: __('下线'),
icon: 'fa fa-list',
confirm:function (row) {
return '是否确定下线该“'+row.position+'”职位？';
},
success:function (data,ret) {
},
classname: 'btn btn-xs btn-warning btn-ajax',
url: 'enterprise_position/offline?ids={ids}'
}],
formatter: function (value, row, index) {
var that = $.extend({}, this);
var table = $(that.table).clone(true);
//状态是否已上线
if(row.status == 0){ //已上线
$(table).data("operate-online", null);
that.table = table;
}else{
$(table).data("operate-offline", null);
that.table = table;
}
return Table.api.formatter.operate.call(that, value, row, index);
}
}
]
]
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
index.html:
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
{:build_toolbar('refresh,delete')}
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-detail="{:$auth->check('enterprise_position/index')}"
data-operate-resume="{:$auth->check('position_to_resume/index')}"
data-operate-online="{:$auth->check('enterprise_position/online')}"
data-operate-offline="{:$auth->check('enterprise_position/offline')}"
data-operate-del="{:$auth->check('enterprise_position/del')}"
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
另外特别的带有地区搜索的：
var Controller = {
index: function () {
// 初始化表格参数配置
Table.api.init({
extend: {
index_url: 'bidding/index' + location.search,
add_url: 'bidding/add',
edit_url: 'bidding/edit',
del_url: 'bidding/del',
multi_url: 'bidding/multi',
table: 'bidding',
},
//禁用默认搜索
search: false,
//启用普通表单搜索
commonSearch: true,
//可以控制是否默认显示搜索单表,false则隐藏,默认为false
searchFormVisible: true,
});
var table = $("#table");
// 初始化表格
table.bootstrapTable({
url: $.fn.bootstrapTable.defaults.extend.index_url,
pk: 'id',
sortName: 'id',
columns: [
[
{checkbox: true},
{field: 'bidding_id', title: __('Bidding_id'),searchList: JSON.parse(Config.bidding_type_array)},
{field: 'industry_id', title: __('Industry_id'), searchList: JSON.parse(Config.company_industry_array)},
{field: 'region.name', title: __('Area_id'),operate:false},
{
field: 'area_id', title: __('地区搜索'), searchList: function (column) {
return Template('areas', {});
}, formatter: function (value, row, index) {
return '无';
}, visible: false
},
{field: 'title', title: __('Title')},
{field: 'tender', title: __('Tender'), operate:false},
{field: 'bidding_num', title: __('Bidding_num'), operate:false},
{field: 'bid_opentime', title: __('Bid_opentime'), operate:false, addclass:'datetimerange'},
{field: 'status', title: __('Status'), searchList: {"0":__('待发布'),"1":__('已发布')}, formatter: Table.api.formatter.status,visible: true},
{field: 'create_time', title: __('Create_time'), operate:false, addclass:'datetimerange'},
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
]
],
queryParams: function (params) {
//这里可以追加搜索条件
var filter = JSON.parse(params.filter);
var op = JSON.parse(params.op);
//这里可以动态赋值，比如从URL中获取admin_id的值，filter.admin_id=Fast.api.query('admin_id');
filter.province = $('[name=province]').val();
filter.city = $('[name=city]').val();
params.filter = JSON.stringify(filter);
params.op = JSON.stringify(op);
return params;
},
});
// 为表格绑定事件
Table.api.bindevent(table);
},
add: function () {
Controller.api.bindevent();
},
edit: function () {
Controller.api.bindevent();
},
api: {
bindevent: function () {
Form.api.bindevent($("form[role=form]"));
}
}
};
return Controller;
地区index.html
<div class="panel panel-default panel-intro">
{:build_heading()}
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="one">
<div class="widget-body no-padding">
<div id="toolbar" class="toolbar">
<a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<a href="javascript:;" class="btn btn-success btn-add {:$auth->check('binding/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
<a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('binding/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
<a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('binding/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
</div>
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-edit="{:$auth->check('binding/edit')}"
data-operate-del="{:$auth->check('binding/del')}"
width="100%">
</table>
</div>
</div>
</div>
</div>
</div>
<script id="areas" type="text/html">
<div class="row">
<div class="col-xs-12">
<div class="form-inline" data-toggle="cxselect" data-selects="province,city,dlist">
<select style="width: 60px;" class="province form-control" name="province" data-url="enterprise/get_areas?type=province"></select>
<select style="width: 70px;" class="city form-control" name="city" data-url="enterprise/get_areas" data-query-name="parentid"></select>
</div>
</div>
</div>
</script>
控制器里面：
public function index()
{
//设置过滤方法
$this->request->filter(['strip_tags']);
$Categorymodel = new \app\common\model\Category();
if ($this->request->isAjax()) {
//如果发送的来源是Selectpage，则转发到Selectpage
if ($this->request->request('keyField')) {
return $this->selectpage();
}
$where = [];
$filter = $this->request->get('filter', '');
$sort = $this->request->get('sort',
! empty($this->model) && $this->model->getPk() ? $this->model->getPk() : 'id');
$sort = $this->model->getTable() . '.' . $sort;
$order = $this->request->get('order', 'DESC');
$offset = $this->request->get('offset', 0);
$limit = $this->request->get('limit', 0);
if($filter){
$filter = (array) json_decode($filter, true);
}
if(isset($filter['bidding_id']) && $filter['bidding_id']!= ''){
$where[] = ['bidding.bidding_id',"=",$filter['bidding_id']];
}
if(isset($filter['title']) && $filter['title']!= ''){
$where[] = ['bidding.title',"like","%{$filter['title']}%"];
}
if(isset($filter['status']) && $filter['status']!= ''){
$where[] = ['bidding.status',"=",$filter['status']];
}
if(isset($filter['industry_id']) && $filter['industry_id']!= ''){
$where[] = ['bidding.industry_id',"=",$filter['industry_id']];
}
$region = 0;
if(isset($filter['city']) && $filter['city']!= ''){
$region = $filter['city'];
}else if(isset($filter['province']) && $filter['province']!= ''){
$region = $filter['province'];
}
if($region != 0){
$region_level = \app\common\model\Region::where("id","=",$region)->value("region_level");
$where[] = ['region.region_level',"like","{$region_level}%"];
}
$total = $this->model
->withJoin(['region'], 'left')
->where($where)
->order($sort, $order)
->count();
$list = $this->model
->withJoin(['region'], 'left')
->where($where)
->order($sort, $order)
->limit($offset, $limit)
->select();
$list = $list->toArray();
foreach ($list as $key => $val){
$list[$key]['bidding_id'] = $Categorymodel->getCategoryName($val['bidding_id']);
$list[$key]['industry_id'] = $Categorymodel->getCategoryName($val['industry_id']);
}
$result = ['total' => $total, 'rows' => $list];
return json($result);
}
$company_industry_list = $Categorymodel->getCategoryArray('company_industry');
$bidding_type_list = $Categorymodel->getCategoryArray('bidding_type');
$this->assignconfig('company_industry_array', json_encode($company_industry_list,JSON_UNESCAPED_UNICODE));
$this->assignconfig('bidding_type_array', json_encode($bidding_type_list,JSON_UNESCAPED_UNICODE));
return $this->view->fetch();
}
扫一扫
3041
到【灌水乐园】发言
