前端实现代码如图(完整代码):
<!doctype html><html><head> <meta charset="utf-8"> <title>数据表格</title> <meta name="renderer" content="webkit"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all"></head><body> <div class="layui-card layadmin-header"> <div class="layui-breadcrumb" lay-filter="breadcrumb"> <a lay-href="">主页</a> <a><cite>组件</cite></a> <a><cite>数据表格</cite></a> <a><cite>开启头部工具栏</cite></a> </div> </div> <div class="layui-fluid"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">开启头部工具栏</div> <div class="layui-card-body"> <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table> <script type="text/html" id="test-table-toolbar-toolbardemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getcheckdata">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getchecklength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isall">验证是否全选</button> </div> </script> <script type="text/html" id="test-table-toolbar-bardemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> </div> </div> </div> </div> </div> <script src="../../layuiadmin/layui/layui.js"></script> <script> layui.config({ base: '../../layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'table'], function(){ var admin = layui.admin ,table = layui.table; table.render({ elem: '#test-table-toolbar' ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userid=youcongtech" ,toolbar: '#test-table-toolbar-toolbardemo' ,title: '程序设计题绑定' ,cols: [[ {type: 'checkbox', fixed: 'left'}, {field:'problemid', width:300, title: 'id', sort: true} ,{field:'title', width:400, title: '题目'} ,{width:215, align:'center', fixed: 'right', toolbar: '#test-table-toolbar-bardemo'} ]] ,page: true }); //头工具栏事件 table.on('toolbar(test-table-toolbar)', function(obj){ var checkstatus = table.checkstatus(obj.config.id); switch(obj.event){ case 'getcheckdata': var data = checkstatus.data; layer.alert(json.stringify(data)); break; case 'getchecklength': var data = checkstatus.data; layer.msg('选中了：'+ data.length + ' 个'); break; case 'isall': layer.msg(checkstatus.isall ? '全选': '未全选'); break; }; }); //监听行工具事件 table.on('tool(test-table-toolbar)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.prompt({ formtype: 2 ,value: data.email }, function(value, index){ obj.update({ email: value }); layer.close(index); }); } }); }); </script></body></html>
核心js代码如下:
table.render({ elem: '#test-table-toolbar' ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userid=youcongtech" ,toolbar: '#test-table-toolbar-toolbardemo' ,title: '程序设计题绑定',cols: [[ {type: 'checkbox', fixed: 'left'}, {field:'problemid', width:300, title: 'id', sort: true} ,{field:'title', width:400, title: '题目'} ,{width:215, align:'center', fixed: 'right', toolbar: '#test-table-toolbar-bardemo'} ]] ,page: true });
要求后台返回数据格式必须为:
{ "msg": "success", "code": "0", "data": [ { "title": "for循环输出", "problemid": 1139 }, { "title": "测试2", "problemid": 1138 }, { "title": "测试1", "problemid": 1137 }, { "title": "for循环-plus", "problemid": 1140 }, { "title": "第一个c++程序", "problemid": 1141 } ]}
不然的话，会出现相关提示(如code对于的值必须为0，而不能为000000，以及data对应数据必须像上面这样的，不然cols里面不好自动对应上。
后台实现代码如下:
控制层代码(路由)
@getmapping("/page_list")@apioperation(value="根据用户id获取题目分页列表",httpmethod="get",notes="根据用户id获取题目分页列表")public jsonobject page_list(@requestparam string userid, @requestparam (value="page") string pageno, @requestparam (value="limit") string pagesize) { system.out.println("userid:"+userid+"|| pageno:"+pageno+"||pagesize:"+pagesize); jsonobject json = new jsonobject(); //当前页 integer page = integer.parseint(pageno.trim()); //每页的数量 integer size = integer.parseint(pagesize.trim()); map<string, object> parammap = new hashmap<>(); parammap.put("userid", userid); parammap.put("start", (page - 1) * size); //当前页的数量 parammap.put("size", size); //当前页 list<problem> problemlist = problemservice.getproblempagelistinfo(parammap); int count =problemservice.getproblempagetotalcount(parammap); if(!problemlist.isempty()) { json.put("msg", "success"); json.put("code", "0"); json.put("data", problemlist); json.put("count", count); }else { json.put(commonenum.return_msg, "error"); json.put(commonenum.return_code, "222222"); } return json;}
service及其实现类:
service:
public interface problemservice extends iservice<problem> { list<problem> getproblempagelistinfo(map<string,object> parammap); integer getproblempagetotalcount(map<string,object> parammap);}
service实现类:
@servicepublic class problemserviceimpl extends serviceimpl<problemdao, problem> implements problemservice { @autowired private problemdao problemdao; @override public list<problem> getproblempagelistinfo(map<string, object> parammap) { return problemdao.getproblempagelistinfo(parammap); } @override public integer getproblempagetotalcount(map<string, object> parammap) { return problemdao.getproblempagetotalcount(parammap); }}
problemdao.xml:
<?xml version="1.0" encoding="utf-8"?><!doctype mapper public "-//mybatis.org//dtd mapper 3.0//en" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.test.sass.mapper.problemdao"> <!-- 通用查询映射结果 --> <resultmap id="baseresultmap" type="com.test.sass.entity.problem"> <id column="problem_id" property="problemid" /> <result column="title" property="title" /> <result column="description" property="description" /> <result column="input" property="input" /> <result column="output" property="output" /> <result column="sample_input" property="sampleinput" /> <result column="sample_output" property="sampleoutput" /> <result column="spj" property="spj" /> <result column="hint" property="hint" /> <result column="source" property="source" /> <result column="in_date" property="indate" /> <result column="time_limit" property="timelimit" /> <result column="memory_limit" property="memorylimit" /> <result column="defunct" property="defunct" /> <result column="accepted" property="accepted" /> <result column="submit" property="submit" /> <result column="solved" property="solved" /> <result column="p_ladder_level" property="pladderlevel" /> <result column="p_ladder_type" property="pladdertype" /> </resultmap> <!-- 通用查询结果列 --> <sql id="base_column_list"> problem_id as problemid, title, description, input, output, sample_input as sampleinput, sample_output as sampleoutput, spj, hint, source, in_date as indate, time_limit as timelimit, memory_limit as memorylimit, defunct, accepted, submit, solved </sql> <select id="getproblempagelistinfo" resultmap="baseresultmap"> select distinct problem.problem_id,problem.title from privilege as p left join problem on( replace(p.rightstr,'p','') = problem.problem_id) where p.user_id =#{userid} and problem.problem_id !=0 and p.rightstr != 'problem_editor' and p.rightstr != 'contenst_creator' limit #{start},#{size} </select> <select id="getproblempagetotalcount" resulttype="integer"> select count(distinct problem.problem_id) from privilege as p left join problem on( replace(p.rightstr,'p','') = problem.problem_id) where p.user_id =#{userid} and problem.problem_id !=0 and p.rightstr != 'problem_editor' and p.rightstr != 'contenst_creator' </select></mapper>
实体类:
public class problem extends model<problem> { private static final long serialversionuid = 1l; @tableid(value = "problem_id", type = idtype.auto) private integer problemid; private string title; private string description; private string input; private string output; @tablefield("sample_input") private string sampleinput; @tablefield("sample_output") private string sampleoutput; private string spj; private string hint; private string source; @tablefield("in_date") private string indate; @tablefield("time_limit") private string timelimit; @tablefield("memory_limit") private string memorylimit; private string defunct; private integer accepted; private integer submit; private integer solved; @tablefield(exist=false) private string pladderlevel; @tablefield(exist=false) private string pladdertype; public integer getproblemid() { return problemid; } public void setproblemid(integer problemid) { this.problemid = problemid; } public string gettitle() { return title; } public void settitle(string title) { this.title = title; } public string getdescription() { return description; } public void setdescription(string description) { this.description = description; } public string getinput() { return input; } public void setinput(string input) { this.input = input; } public string getoutput() { return output; } public void setoutput(string output) { this.output = output; } public string getsampleinput() { return sampleinput; } public void setsampleinput(string sampleinput) { this.sampleinput = sampleinput; } public string getsampleoutput() { return sampleoutput; } public void setsampleoutput(string sampleoutput) { this.sampleoutput = sampleoutput; } public string getspj() { return spj; } public void setspj(string spj) { this.spj = spj; } public string gethint() { return hint; } public void sethint(string hint) { this.hint = hint; } public string getsource() { return source; } public void setsource(string source) { this.source = source; } public string getindate() { return indate; } public void setindate(string indate) { this.indate = indate; } public string gettimelimit() { return timelimit; } public void settimelimit(string timelimit) { this.timelimit = timelimit; } public string getmemorylimit() { return memorylimit; } public void setmemorylimit(string memorylimit) { this.memorylimit = memorylimit; } public string getdefunct() { return defunct; } public void setdefunct(string defunct) { this.defunct = defunct; } public integer getaccepted() { return accepted; } public void setaccepted(integer accepted) { this.accepted = accepted; } public integer getsubmit() { return submit; } public void setsubmit(integer submit) { this.submit = submit; } public integer getsolved() { return solved; } public void setsolved(integer solved) { this.solved = solved; } public string getpladderlevel() { return pladderlevel; } public void setpladderlevel(string pladderlevel) { this.pladderlevel = pladderlevel; } public string getpladdertype() { return pladdertype; } public void setpladdertype(string pladdertype) { this.pladdertype = pladdertype; } @override protected serializable pkval() { return this.problemid; } @override public string tostring() { return "problem [problemid=" + problemid + ", title=" + title + ", description=" + description + ", input=" + input + ", output=" + output + ", sampleinput=" + sampleinput + ", sampleoutput=" + sampleoutput + ", spj=" + spj + ", hint=" + hint + ", source=" + source + ", indate=" + indate + ", timelimit=" + timelimit + ", memorylimit=" + memorylimit + ", defunct=" + defunct + ", accepted=" + accepted + ", submit=" + submit + ", solved=" + solved + ", pladderlevel=" + pladderlevel + ", pladdertype=" + pladdertype + "]"; }}
效果如下：
更多layui知识请关注layui使用教程栏目。
以上就是layui中table.render的使用的详细内容。