动态生成下拉菜单时的拼接

有时候我们希望下拉菜单不仅仅显示title这一个数据,这时候可以在ea.listen()之前给对应select设置一个回调函数.

例子

add: function () {
    $('select[name="field_id"]').data('template',function(data,fields){
        return data['title']+'('+data['unit']+')';
    })
    ua.listen();
},

需要在form表单中,对select设置field字段:

<div class="layui-form-item">
    <label class="layui-form-label">数据格式</label>
    <div class="layui-input-block">
        <select name="field_id" lay-verify="required" data-select="{:url('data.field/index')}" lay-search  data-fields="id,title,unit" >
        </select>
    </div>
</div>

注意,data-fields填写了三个字段,可以根据需要天蝎更多

最终效果如下:

PHP生成下拉菜单时的拼接

使用PHP生成下拉菜单时,没有依赖其他代码逻辑,直接在对应代码修改即可.

当使用表关联并且设置了下拉菜单字段时,会生成这样的代码:

控制器

注意看,这里向试图传递了一个列表.

public function __construct(App $app)
{
    parent::__construct($app);
    $this->model = new \app\admin\model\FarmSensorFormat();
    $this->assign('getFarmSensorFunctionList', $this->model->getFarmSensorFunctionList());
    // ...
}

模型

在模型里查询这样一个列表

public function getFarmSensorFunctionList()
{
    return \app\admin\model\FarmSensorFunction::column('title', 'id');
}

我们可以把这个查询改成正常的select查询

public function getFarmSensorFunctionList()
{
    return \app\admin\model\FarmSensorFunction::select()
}

视图

生成的视图是这样

<div class="layui-form-item">
    <label class="layui-form-label">传感器类型</label>
    <div class="layui-input-block">
            <select name="function_id" lay-verify="required" data-value="{$Request.param.function_id}">
            <option value=''></option>
            {foreach $getFarmSensorFunctionList as $k=>$v}
            <option value='{$k}' {in name="k" value="$row.id"}selected=""{/in} >{$v}</option>
            {/foreach}
        </select>
    </div>
</div>

我们可以把这段循环改成select之后的数据循环

{foreach $getFarmSensorFunctionList as $k=>$v}
    <option value='{$v.id}' {in name="$v.id" value="$row.id"}selected=""{/in} >{$v.title}({$v.unit})</option>
{/foreach}