Layuitable组件怎么用

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

成都创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站设计、成都做网站、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

出现的问题：

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

2、传递参数问题

使用的table加载刷新方案

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

1.jpg

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

首先贴出源表格代码：

序号

销售ID

姓名

年份

一月

二月

年度

操作

编辑

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

(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组件怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。