layui 表格渲染之后 搜索框保留值 并异步获取子分类

<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">&#xe679;</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) : '';
});
}
});
点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注