两步教你如何自定义搜索表单

动态 未结 置顶 精帖 1 698
admin
悬赏:0L币
此处已 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]
回帖
  • 2022-04-22 15:24:02
    谢谢楼主分享,已测试,可以用
    1 回复