<form class="layui-form"> <div class="layui-inline"> <div class="layui-input-inline"> <select name="base_id" id="base_id" lay-filter="base_id"> <option value="">请选择分院</option> {foreach name="bases" item="vo"} <option value="{$vo.id}">{$vo.name}</option> {/foreach} </select> </div> </div> <div class="layui-inline"> <div class="layui-input-inline"> <select name="category_id" id="category_id" lay-filter="category_id"> <option value="">请选择分类</option> </select> </div> </div> <div class="layui-inline"> <input class="layui-input" name="keywords" id="keywords" autocomplete="on" placeholder="请输入分类名称"> </div> <button class="layui-btn search-btn" data-type="reload"><i class="iconfont"></i> 查询</button> </form>
table.render({ elem : '#dataTable' ,url : "{:url('resourceList')}" ,cellMinWidth: 80 ,page: { prev: '上一页', next: '下一页', layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'] } // ,toolbar: 'default' // 开启顶部工具栏(默认模板) ,toolbar: '#toolbar' // 指定顶部工具栏模板 // ,even: true // 隔行背景 ,title: '学院素材数据' // 表格标题,用户导出数据文件名 ,text: { // 指定无数据或数据异常时的提示文本 none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增 } ,id: 'dataTable' ,cols: [[ // 表格列标题及数据 {checkbox: true} ,{title: '序号', type: 'numbers'} ,{field: 'title', width: 200, title: '素材标题', align: 'center'} ,{field: 'base_name', width: 200, title: '所属分院', align: 'center'} ,{field: 'cate_name', width: 200, title: '所属分类',align: 'center'} ,{field: 'resource_type', width: 120, title: '素材类型',align: 'center'} ,{field: 'level', width: 120, title: '素材评级',align: 'center'} ,{field: 'create_time', width: 200, title: '创建时间', align: 'center'} ,{field: 'sort', width: 60, title: '排序', align: 'center'} ,{fixed: 'right', width: 200, title: '操作', align:'center', toolbar: '#barTool'} ]], done(res) { // 搜索功能 var $ = layui.$, active = { reload: function(){ var keywords = $('#keywords'),baseId = $('#base_id'),categroyId = $('#category_id'); //执行重载 table.reload('dataTable', { page: { curr: 1 //重新从第 1 页开始 } ,where: { keywords: keywords.val(), base_id: baseId.val(), category_id: categroyId.val() } }, 'data'); $('#base_id').val(baseId.val()); $('#keywords').val(keywords.val()); form.render('select'); // 以下是异步获取base_id的子分类category if(baseId.val()!= ''){ var base_id = baseId.val(); $.post('{:url("getCategory")}',{"base_id":base_id,"type":"1"},function(data){ if(data.status == 1){ if(data.message != ''){ $("#category_id").empty().append(data.message); $('#category_id').val(categroyId.val()); form.render('select'); } }else{ layer.msg(data.message); } }); } } }; $('.search-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); } });
更多精彩内容:各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等,尽在 天边资源网 。