VEITOOL 框架开发文档(TP版)官方文档官网

搜索渲染

**右侧单页顶部常规搜索结构**
搜索中的表单项可以写原生THML代码，为尽量代码复用，从`v2.0.0`版开始对某些如时间选择器、下拉框（包括树形结构，单选、多选）以及搜索按钮、全部按钮都进行了代码了代码封装，即可以进行简单的配置就可以实现。

### 表单域渲染
``` html
// 追加样式类 render 则框架会对该表单域进行 layui.form.render 渲染
<form class="layui-form render">
	<div class="layui-form-item">
		...  //表单项
	</div>
</form>
```
### 文本框渲染
``` html
<form class="layui-form render">
	<div class="layui-form-item">

<div class="layui-inline" style="width:150px;">
			// 这里带有 lay-affix="clear" 清理按钮
			<input type="text" name="kw" placeholder="关键词" autocomplete="off" class="layui-input" lay-affix="clear"/>
		</div>

</div>
</form>
```
### 下拉框渲染
``` html
<form class="layui-form render">
	<div class="layui-form-item">

// select 标签字典形式渲染（由框架JS执行）
		<div class="layui-inline" style="width:150px;">
			// v-dict="字典标识"
			<select name="tests" v-dict="ORGAN">
				<option value="">初始选项</option>
			</select>
		</div>

// div 字典形式树形结构（由框架JS执行）
		<div class="layui-inline" style="width:120px;">
			// v-dict="字典标识"，options="xmselect的参数配置"
			// 参数参照：https://xm-select.com/file/xm-select/v1.2.4/#/component/options
			// 如多选配置：options="{name:'organ',tips:'组织',radio:false,clickClose:false,toolbar:{show:true,showIcon:false},model:{label:{type:'block',block:{showCount:1,showIcon:true}}}}"
			<div class="v-xmselect-tree" v-dict="ORGAN" options="{name:'organ',tips:'组织'}"></div>
		</div>

// select 标签自定义动态字典形式渲染（由本页中的JS执行）
		<div class="layui-inline" style="width:150px;" id="my_line">
			// 这里的 v-dict2 不能再用 v-dict = “xxx” 因为这里需要本页中的JS逻辑来触发渲染
			<select name="pay_type" v-dict2="MY_DATA">
				<option value="">支付平台</option>
			</select>
		</div>

// select 标签自定义构建（由本页中的JS执行）
		<div class="layui-inline" style="width:135px;">
			<select name="pay_type2" id="my_select"></select>
		</div>

</div>
</form>
<script>
layui.use(function(){
	var admin = layui.admin;
	// 自定义下拉选项数据
	var data = {1:"微信支付",2:"支付宝支付",3:"其他支付"};
	// 本页中的 JS 调用触发字典渲染
	admin.vDict($('#my_line'), {MY_DATA: data}, 'v-dict2');
	// 本页中的 JS 调用自定义构建
    admin.util.buildOption('#my_select', data, '支付平台');
});
</script>
```
### 时间选择器
``` html
<form class="layui-form render">
	<div class="layui-form-item">

<div class="layui-inline" style="width:200px;">
			// 搜索中【时间选择器】的渲染实现
			// input 中存在属性 date-render 则系统会对其进行日期渲染，layui 中的时间选择器渲染参数可以
			// 使用 date-render="{type:'date',range:true,format:'yyyy/MM/dd'}" 的形式传入
			// 全时格式：yyyy/MM/dd HH:mm:ss
			<input type="text" name="sotime" date-render placeholder="创建时间" class="layui-input" lay-affix="clear"/>
		</div>

</div>
</form>
```
### 按钮动作实现
``` html
<form class="layui-form render">
	<div class="layui-form-item">

<div class="layui-inline">
			<div class="layui-btn-group">
				
				// 搜索中【搜索】按钮的实现
				// 存在 lay-submit 同时设置了 lay-filter 属性有“search-”前缀，随后为数据表 ID 标识名
				<a class="layui-btn" lay-submit lay-filter="search-table123">
					<i class="layui-icon layui-icon-search"></i> 搜索
				</a>
				
				// 搜索中【全部】按钮的实现
				// 存在 lay-submit 同时设置了 lay-filter 属性有“search-”前缀，随后为数据表 ID 标识名
				// 第3个为 all 表示该按钮为触发搜索全部，如果搜索时需要追加该表单域中某个元素
				// 为条件，那么可以："search-table-all-key1|key2|key.." 则可以追加多个自定义条件
				<a class="layui-btn" lay-submit lay-filter="search-table123-all">
					<i class="layui-icon layui-icon-light"></i> 全部
				</a>

// 如果【搜索】、【全部】按钮没有按以上配置，则不会调用集成的触发代码，而需要单独
				// 在当前页面中写好相应的触发JS代码

</div>
		</div>

</div>
</form>
<div class="layui-card-body">
	<table id="table123"></table>
</div>
<script>
layui.use(function(){
	// 以下是自定义监听当前页搜索表单中【搜索】和【全部】按钮的动作。按标准配置则无须写以下代码。
	// 监听搜索按钮
    form.on('submit(search-table123)', function(data){
        table.reloadData('table123',{where:data.field,page:{curr:1}});
        return false;
    });
    // 监听全部按钮
    form.on('submit(search-table123-all)', function(){
        table.reloadData('table123',{where:'',page:{curr:1}});
        return false;
    });
});
</script>
```