Layui table组件怎么用

这篇文章主要介绍“Layui table组件怎么用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Layui table组件怎么用”文章能帮助大家解决问题。

　　出现的问题：

　　1、使用Layui官方提供的【转换静态表格】方式初始化加载时报id找不到的错误（自己的锅）

　　2、传递参数问题

　　使用的table加载刷新方案

　　有一个页面，左侧是一个tree，右侧是一个table，默认table加载全数据，当点击tree节点时，table进行筛选，很简单的需求吧！

　　1.jpg

　　这里我们不谈tree的使用，将仅仅贴出table的相关方法！

　　首先贴出源表格代码：

　　<tableclass="layui-table"lay-filter="EditListTable">

　　<thead>

　　<tr>

　　<thlay-data="{field:'Index',width:60}">序号</th>

　　<thlay-data="{field:'UserId',width:80}">销售ID</th>

　　<thlay-data="{field:'UserName',width:80}">姓名</th>

　　<thlay-data="{field:'Year',width:70}">年份</th>

　　<thlay-data="{field:'M01',width:80}">一月</th>

　　<thlay-data="{field:'M02',width:80}">二月</th>

　　<thlay-data="{field:'YearValue',width:80,fixed:'right'}">年度</th>

　　<thlay-data="{width:100,align:'center',toolbar:'#barDemo1',fixed:'right'}">操作</th>

　　</tr>

　　</thead></table><scripttype="text/html"id="barDemo1">

　　<aclass="layui-btnlayui-btn-mini"lay-event="edit">编辑</a></script>

　　直接在代码中通过注释讲解：

　　(function(){//加载列表的后端url

　　vargetListUrl='';//对于任意一个table，按照官方的说法，有三种不同的初始化渲染方式，不多介绍，而这里使用的方式姑且看做第三种：转换静态表格方式

　　//转换静态表格方式，自然首先需要有一个已经存在的表格，然后再通过js方式转化为Layui表格

　　//无论哪种方式的Layuitable初始化自然需要配置项

　　//通过转化的方式初始化Layuitable，配置项部分可以在源table中，部分在js中，源table的源代码上文已经给出，下面给出一个示例的js中的配置项

　　vartableOptions={

　　url:getListUrl,//请求地址

　　method:'POST',//方式

　　id:'listReload',//生成Layuitable的标识id，必须提供，用于后文刷新操作，笔者该处出过问题

　　page:false,//是否分页

　　where:{type:"all"},//请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了where:{key:{type:"all"}}，结果并不是我想的那样，如此写，key将是后端的一个类作为参数，里面有type属性，如果误以为key是Layui提供的格式，那就大错特错了

　　response:{//定义后端json格式，详细参见官方文档

　　statusName:'Code',//状态字段名称

　　statusCode:'200',//状态字段成功值

　　msgName:'Message',//消息字段

　　countName:'Total',//总数字段

　　dataName:'Result'//数据字段

　　}

　　};//

　　layui.use(['table','layer'],function(){//layui模块引用，根据需要自行修改

　　varlayer=layui.layer,table=layui.table;//表初始化

　　varcreateTable=function(){

　　table.init('EditListTable',tableOptions);

　　//tablelay-filter

　　};//表刷新方法

　　varreloadTable=function(item){

　　table.reload("listReload",{//此处是上文提到的初始化标识id

　　where:{//key:{//该写法上文已经提到

　　type:item.type,id:item.id//}

　　}

　　});

　　};//表初始化

　　createTable();//其他和tree相关的方法，其中包括点击tree项调用刷新方法

　　});

　　})();

　　后端方法：

　　//本示例中，后台代码写法publicActionResultGetGoalList(stringtype,stringid)

　　{//}//如果按照官方文档条件项，应该是下面的写法publicActionResultGetGoalList(keyItemkey)

　　{//}publicclasskeyItem

　　{publicstringid{get;set;}publicstringtype{get;set;}

　　}

关于“Layui table组件怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。