两步教你如何自定义搜索表单
悬赏:0F币
此处已 backend/member/member/index.html 为例子
第一步 在 index.html 页面写一个搜索表单模板
[pre]
<script type="text/html" id="form">
<fieldset id="searchFieldList_list" class="layui-elem-field table-search-fieldset">
<legend>搜索</legend>
<form class="layui-form" id="layui-form-list">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
<div class="layui-form-item layui-inline ">
<label class="layui-form-label layui-col-xs4">ID</label>
<div class="layui-input-inline layui-col-xs8">
<input lay-filter="id" id="field_id" name="id" data-search="true" data-searchop="%*%"
value="" placeholder="输入ID" class="layui-input ">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
<div class="layui-form-item layui-inline ">
<label class="layui-form-label layui-col-xs4">名称 </label>
<div class="layui-input-inline layui-col-xs8">
<input lay-filter="username" id="field_username" name="username" data-search="true"
data-searchop="%*%" value="" placeholder="输入名称 " class="layui-input ">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
<div class="layui-form-item layui-inline">
<label class="layui-form-label layui-col-xs4 ">性别</label>
<div class="layui-input-inline layui-col-xs8">
<select lay-filter="sex" class="layui-select " id="field_sex" name="sex"
data-search="select" data-searchop="=">
<option value="">-全部 -</option>
<option value="0">保密</option>
/n
<option value="1">男</option>
/n
<option value="2">女性</option>
/n</select>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg3">
<div class="layui-form-item layui-inline">
<label class="layui-form-label layui-col-xs4">注册时间</label>
<div class="layui-input-inline layui-col-xs8">
<input id="field_create_time" name="create_time" lay-filter="timePicker"
data-timetype="datetime" data-searchdateformat="yyyy-MM-dd"
data-timepickerformat="YYYY-MM-DD HH:mm:ss" data-search="range" data-searchop="range"
value="" placeholder="输入注册时间" class="layui-input ">
</div>
</div>
</div>
<div class="layui-form-item layui-inline" style="margin-left: 80px;">
<button type="submit" class="layui-btn layui-btn-normal" data-type="tableSearch" data-tableid="list"
lay-submit="submit" lay-filter="list_filter">搜索
</button>
<button type="reset" class="layui-btn layui-btn-primary" data-type="tableReset" data-tableid="list"
lay-filter="list_filter">重置
</button>
</div>
</div>
</form>
</fieldset>
</script>
[/pre]
第二步 在member.js 里设置 searchFormTpl: 'form', form 即是上面script 的id
[pre]
Table.render({
elem: '#' + Table.init.table_elem,
id: Table.init.tableId,
searchFormTpl: 'form',
});
[/pre]