Layui之table Query

Julie_zm

已于 2023-11-01 11:52:06 修改

阅读量63

点赞数 1

文章标签： layui 前端 javascript

于 2023-11-01 11:49:27 首次发布

本文链接：https://blog.csdn.net/weixin_45689858/article/details/134158120

版权

项目场景：

根据条件刷选列表数据
在这里插入图片描述

html部分描述

搜索信息

角色名称

                    <div class="layui-inline">
                    	<!--注意此处button标签里的type属性-->
                        <button type="button" class="layui-btn layui-btn-primary"  lay-submit data-type="reload" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>   
    <!--注意此处table标签里的id-->
	<table class="layui-table layui-hide" id="test" lay-filter="test"></table>
</div>

js部分：

layui.use([‘jquery’, ‘form’, ‘table’, ‘layer’, ‘tree’], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
layer = layui.layer,
tree = layui.tree;

  var tableIns = table.render({
    	elem: '#test',		//对应table标签里的id
        url:'../../admin/role/list',	//从后台获取数据的url
        id:'test',			//此处也需要设置这个属性，后边会用到
        toolbar: '#toolbarDemo',
        method:'post',
        dataType:'json',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
    
        //用于对返回的数据格式的自定义，如：
        
   		 response: {
              statusName: 'status' //成功的状态码，默认：code
              ,statusCode: 0
              ,msgName: 'hint' //状态信息的字段名称，默认：msg
              ,countName: 'total' //数据总数的字段名称，默认：count
              ,dataName: 'rows' //数据列表的字段名称，默认：data
        },
        cols:[[
        	{ type:"numbers", width:15, align:"center"},
			{ type:"checkbox", width:35, align: "center" },
			{ field:'name',title:'角色名称',width:'20%', align: "center"},
			{ field:'remark',title:'角色备注',width:'45%', align: "center"},
			{ title:'权限操作',align: "center",
					templet:function(d){
						var test = '<a href="#" class="fa fa-check-square-o" οnclick="selectAuthority('+d.id+')">编辑权限</a>';
        				return test;
    			}},
		]],
        limit:6,		//默认6条数据一页
        page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局 
            ,limits:[6,10,15]
            ,first: false //不显示首页
            ,last: false //不显示尾页
          },
        skin: 'line'
    });

监测Event：

//以下是搜索框进行监测
var active = {
reload: function(){
var demoReload = $(‘#demoReload’); //得到搜索框里已输入的数据
//执行重载
table.reload(‘test’, {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
name: demoReload.val() //在表格中进行搜索如果有query条件，where会自动过滤数据，不需要重新post请求数据
}
});
}
};
///button click
$(‘#btn .layui-btn’).on(‘click’, function(){
var type = $(this).data(‘type’);
active[type] ? active[type].call(this) : ‘’;
});
});