如下图,表单字段是活的,并且有分组,表单显示如下图,顶部是分组,下面是字段。
控制器方法
public function info(){
$id = $this->request->get('order_id');
$values = Value::where('product_order_id',$id)
->field('id,type,name,gather,value,weigh')
->order('weigh desc')
->select();
$gathers = [];
foreach ($values as $key=>$value){
if(!in_array($value['gather'],$gathers)){
$gathers[] = $value['gather'];
}
}
$lists = [];
foreach ($gathers as $key=>$value){
if($key == 0){
$lists[$key]['active'] = 1;
}
$lists[$key]['gather'] = $value;
$array = [];
foreach ($values as $k=>$v){
if($v['gather'] == $value){
$array[] = $v->toArray();
unset($values[$k]);
}
}
$lists[$key]['values'] = $array;
unset($array);
}
$this->view->assign("lists", $lists);
return $this->view->fetch();
}
//$lists字段如下结构
array(2) {
[0] => array(3) {
["active"] => int(1)
["gather"] => string(12) "基本信息"
["values"] => array(1) {
[0] => array(6) {
["id"] => int(1)
["type"] => string(1) "1"
["name"] => string(6) "姓名"
["gather"] => string(12) "基本信息"
["value"] => string(9) "李小莉"
["weigh"] => int(2)
}
}
}
[1] => array(2) {
["gather"] => string(15) "委托人信息"
["values"] => array(9) {
[0] => array(6) {
["id"] => int(3)
["type"] => string(1) "3"
["name"] => string(15) "委托人相片"
["gather"] => string(15) "委托人信息"
["value"] => string(22) "/assets/img/avatar.png"
["weigh"] => int(2)
}
[1] => array(6) {
["id"] => int(2)
["type"] => string(1) "2"
["name"] => string(15) "委托人介绍"
["gather"] => string(15) "委托人信息"
["value"] => string(15) "委托人简介"
["weigh"] => int(1)
}
[2] => array(6) {
["id"] => int(4)
["type"] => string(1) "4"
["name"] => string(27) "委托人身份证正反面"
["gather"] => string(15) "委托人信息"
["value"] => string(45) "/assets/img/avatar.png,/assets/img/avatar.png"
["weigh"] => int(1)
}
[3] => array(6) {
["id"] => int(5)
["type"] => string(1) "5"
["name"] => string(12) "简历文件"
["gather"] => string(15) "委托人信息"
["value"] => string(45) "/assets/img/avatar.png,/assets/img/avatar.png"
["weigh"] => int(1)
}
[4] => array(6) {
["id"] => int(6)
["type"] => string(1) "6"
["name"] => string(12) "荣誉文件"
["gather"] => string(15) "委托人信息"
["value"] => string(45) "/assets/img/avatar.png,/assets/img/avatar.png"
["weigh"] => int(1)
}
[5] => array(6) {
["id"] => int(7)
["type"] => string(1) "7"
["name"] => string(6) "性别"
["gather"] => string(15) "委托人信息"
["value"] => string(3) "女"
["weigh"] => int(1)
}
[6] => array(6) {
["id"] => int(8)
["type"] => string(1) "8"
["name"] => string(6) "爱好"
["gather"] => string(15) "委托人信息"
["value"] => string(13) "足球,跑步"
["weigh"] => int(1)
}
[7] => array(6) {
["id"] => int(9)
["type"] => string(1) "9"
["name"] => string(6) "城市"
["gather"] => string(15) "委托人信息"
["value"] => string(29) "河南省/郑州市/中原区"
["weigh"] => int(1)
}
[8] => array(6) {
["id"] => int(10)
["type"] => string(2) "10"
["name"] => string(6) "国家"
["gather"] => string(15) "委托人信息"
["value"] => string(6) "中国"
["weigh"] => int(1)
}
}
}
}
html中如下
<style type="text/css">
@media (max-width: 375px) {
.edit-form tr td input {
width: 100%;
}
.edit-form tr th:first-child, .edit-form tr td:first-child {
width: 20%;
}
.edit-form tr th:nth-last-of-type(-n+2), .edit-form tr td:nth-last-of-type(-n+2) {
display: none;
}
}
.edit-form table > tbody > tr td a.btn-delcfg {
visibility: hidden;
}
.edit-form table > tbody > tr:hover td a.btn-delcfg {
visibility: visible;
}
/*利用css隐藏文件图片上传和删除按钮*/
.btn,.btn-danger,.btn-xs,.btn-trash{
display: none !important;
}
</style>
<div class="panel panel-default panel-intro">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!-- 顶部分组筛选列表-->
{foreach $lists as $index=>$vo}
<li class="{$vo.active?'active':''}"><a href="#tab-{$vo.gather}" data-toggle="tab">{:__($vo.gather)}</a></li>
{/foreach}
</ul>
</div>
<div class="panel-body">
<div id="myTabContent" class="tab-content">
<!--渲染分组 根据 id显示或隐藏分组-->
{foreach $lists as $index=>$vo}
<div class="tab-pane fade {$vo.active ? 'active in' : ''}" id="tab-{$vo.gather}">
<div class="widget-body no-padding">
<form id="form" class="edit-form form-horizontal" role="form" data-toggle="validator" method="POST" action="">
<table class="table table-striped">
<thead>
<tr>
<th width="15%">{:__('字段名称')}</th>
<th width="68%">{:__('Value')}</th>
</tr>
</thead>
<tbody>
<!--渲染分组中的字段-->
{foreach $vo.values as $item}
<tr>
<td>{$item.name}</td>
<td>
<div class="row">
<div class="col-sm-8 col-xs-12">
<!-- 根据字段类型选择使用表单生成器生成表单字段-->
{switch $item.type}
{case 1}
<!-- 'disabled'=>true 是额外参数让表单不可修改-->
{:Form::text($item.id, $item.value, ['disabled'=>true])}
{/case}
{case 2}
{:Form::textarea($item.id, $item.value, ['disabled'=>true])}
{/case}
{case value="3"}
{:Form::image('row[image]', $item.value, ['disabled'=>true])}
{/case}
{case value="4"}
{:Form::images($item.id, $item.value,['disabled'=>true])}
{/case}
{case value="5"}
{:Form::upload($item.id,$item.value, ['disabled'=>true])}
{/case}
{case value="6"}
{:Form::uploads($item.id, $item.value, ['disabled'=>true])}
{/case}
{case value="7"}
{:Form::text($item.id, $item.value,['disabled'=>true])}
{/case}
{case value="8"}
{:Form::text($item.id, $item.value, ['disabled'=>true])}
{/case}
{case value="9"}
{:Form::text($item.id, $item.value,['disabled'=>true])}
{/case}
{case value="10"}
{:Form::text($item.id, $item.value, ['disabled'=>true])}
{/case}
{/switch}
</div>
<div class="col-sm-4"></div>
</div>
</td>
</tr>
{/foreach}
</tbody>
</table>
</form>
</div>
</div>
{/foreach}
</form>
</div>
</div>
</div>
</div>
在控制器对应的js文件中加入下面的代码
edit: function () {
Controller.api.bindevent();
},
//新增代码
info: function () {
Controller.api.bindevent();
},