出现的问题：

 

　　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相关文章请关注layui使用教程栏目。