masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial Layui > layui中table.render的使用

layui中table.render的使用

尚
Lepaskan： 2020-01-09 17:41:09
ke hadapan
8469 orang telah melayarinya

layui中table.render的使用

前端实现代码如图(完整代码):

<!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: &#39;../../layuiadmin/&#39; //静态资源所在路径
  }).extend({
    index: &#39;lib/index&#39; //主入口模块
  }).use([&#39;index&#39;, &#39;table&#39;], function(){
    var admin = layui.admin
    ,table = layui.table;
  
    table.render({
      elem: &#39;#test-table-toolbar&#39;
       ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userId=youcongtech"
      ,toolbar: &#39;#test-table-toolbar-toolbarDemo&#39;
      ,title: &#39;程序设计题绑定&#39;
      ,cols: [[
        {type: &#39;checkbox&#39;, fixed: &#39;left&#39;},
        {field:&#39;problemId&#39;, width:300, title: &#39;ID&#39;, sort: true}
        ,{field:&#39;title&#39;, width:400, title: &#39;题目&#39;}
        ,{width:215, align:&#39;center&#39;, fixed: &#39;right&#39;, toolbar: &#39;#test-table-toolbar-barDemo&#39;}
      ]]
      ,page: true
    });
    
    //头工具栏事件
    table.on(&#39;toolbar(test-table-toolbar)&#39;, function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case &#39;getCheckData&#39;:
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
        break;
        case &#39;getCheckLength&#39;:
          var data = checkStatus.data;
          layer.msg(&#39;选中了：&#39;+ data.length + &#39; 个&#39;);
        break;
        case &#39;isAll&#39;:
          layer.msg(checkStatus.isAll ? &#39;全选&#39;: &#39;未全选&#39;);
        break;
      };
    });
    
    //监听行工具事件
    table.on(&#39;tool(test-table-toolbar)&#39;, function(obj){
      var data = obj.data;
      if(obj.event === &#39;del&#39;){
        layer.confirm(&#39;真的删除行么&#39;, function(index){
          obj.del();
          layer.close(index);
        });
      } else if(obj.event === &#39;edit&#39;){
        layer.prompt({
          formType: 2
          ,value: data.email
        }, function(value, index){
          obj.update({
            email: value
          });
          layer.close(index);
        });
      }
    });
  
  });
  </script>
</body>
</html>
Salin selepas log masuk

核心js代码如下:

table.render({
   elem: &#39;#test-table-toolbar&#39;
 ,url:"http://localhost:8090/program-web/api/magic_change/oj/problem/page_list?userId=youcongtech"
   ,toolbar: &#39;#test-table-toolbar-toolbarDemo&#39;
   ,title: &#39;程序设计题绑定&#39;
,cols: [[
  {type: &#39;checkbox&#39;, fixed: &#39;left&#39;},
     {field:&#39;problemId&#39;, width:300, title: &#39;ID&#39;, sort: true}
     ,{field:&#39;title&#39;, width:400, title: &#39;题目&#39;}
     ,{width:215, align:&#39;center&#39;, fixed: &#39;right&#39;, toolbar: &#39;#test-table-toolbar-barDemo&#39;}
   ]]
   ,page: true
 });
Salin selepas log masuk

要求后台返回数据格式必须为:

{
  "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
    }
  ]
}
Salin selepas log masuk

不然的话，会出现相关提示(如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;

}
Salin selepas log masuk

Service及其实现类:

Service:

public interface ProblemService extends IService<Problem> {
   
    List<Problem> getProblemPageListInfo(Map<String,Object> paramMap);
    
    Integer getProblemPageTotalCount(Map<String,Object> paramMap);

}
Salin selepas log masuk

Service实现类:

@Service
public 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);
    }

}
Salin selepas log masuk

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,&#39;p&#39;,&#39;&#39;) = problem.problem_id) WHERE
        p.user_id =#{userId} AND problem.problem_id !=0 AND p.rightstr !=
        &#39;problem_editor&#39; AND p.rightstr != &#39;contenst_creator&#39; 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,&#39;p&#39;,&#39;&#39;) = problem.problem_id) WHERE
        p.user_id =#{userId} AND problem.problem_id !=0 AND p.rightstr !=
        &#39;problem_editor&#39; AND p.rightstr != &#39;contenst_creator&#39; 
    </select>
</mapper>
Salin selepas log masuk

实体类:

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 + "]";
    }
}
Salin selepas log masuk

效果如下：

1.jpg更多layui知识请关注PHP中文网layui使用教程栏目。

Atas ialah kandungan terperinci layui中table.render的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
layui
sumber：cnblogs.com
Artikel sebelumnya：Layui实现input输入和选择的方法 Artikel seterusnya：使用layer弹窗和layui表单做新增功能的方法
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2282
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2417
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2033
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1919
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1991
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan