表格选择器，能够直接打开对应的列表表格选择数据，支持多选和单选。

使用curd命令时，如果是关联表或明确指定table，则会使用本组件生成代码。

效果截图

会在表单中生成一个选择框，点击之后打开弹框，选择对应的数据。

打开的弹框页面就是实际的curd生成的页面，一般的定制开发不会影响表格选择器。

代码

<div class="layui-form-item">
    <label class="layui-form-label">软件</label>
        <div class="layui-input-block">
        <div data-toggle="table-data" 
            data-index="{:__url('app.program/index')}" 
            data-readonly="1" 
            data-select-type="radio" 
            data-select-value="{$row.program_id|default=''}" 
            data-value-field="id" 
            data-name="program_id" 
            data-field-name="title" 
            data-required="1">
        </div>
    </div>
</div>

参数

data-index

要打开的表格的页面，一般是curd生成的页面地址，建议使用__url助手函数生成。

data-readonly

只读模式，不能选择和单选

data-select-type

选择器模式：

• 单选：radio
• 多选：checkbox

data-select-value

表单提交数据库的值，一般是要选择的数据的主键id。

这里提交的是program表的主键ID，存储的字段名是program_id

data-select-value="{$row.program_id|default=''}"

data-value-field

打开的表格中，要选择的字段，如果不需要选择id，也可以选择title。

不过使用title时，可能再次打开弹框，会导致重名的title同样被过滤。

data-name

表单要提交的name，相当于input的name属性

data-field-name

匹配到数据后对应的名称，比如提交的id是1，这里会查询到1对应的记录的title字段。

data-required

是否必填

data-width

弹框宽度，默认自动获取

data-height

谭康高度，默认自动获取

data-placeholder

placeholder内容

data-selectConfirmCallback

回调函数名，挂载到window上的一个函数，默认为：onTableDataConfirm，请不要冲突，如果冲突可以自定义一个名称。