Heim > Artikel > Web-Frontend > Die Verwendung von table.render in Laui

Die Verwendung von table.render in Laui

尚nach vorne: 2020-01-09 17:41:098415Durchsuche

Der Front-End-Implementierungscode ist wie in der Abbildung dargestellt (vollständiger Code):

<!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>

Der Kern-JS-Code lautet wie folgt:

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
 });

Das erforderliche Hintergrund-Rückgabedatenformat muss sein:

{
  "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
    }
  ]
}

Andernfalls werden relevante Eingabeaufforderungen angezeigt (z. B. muss der Wert des Codes 0 und nicht 000000 sein, und die entsprechenden Daten müssen andernfalls wie oben sein). Es wird nicht automatisch in Spalten abgebildet.

Der Hintergrundimplementierungscode lautet wie folgt:

Steuerschichtcode (Routing)

@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;

}

Dienst und seine Implementierungsklasse:

Dienst:

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

}

Dienstimplementierungsklasse:

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

}

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>

Entitätsklasse:

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 + "]";
    }
}

Der Effekt ist wie folgt :

Die Verwendung von table.render in Laui Für mehr Laui-Wissen folgen Sie bitte der Spalte Tutorial zur Verwendung von Laui auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonDie Verwendung von table.render in Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Layui implementiert Eingabe-Eingabe- und AuswahlmethodenNächster Artikel：Layui implementiert Eingabe-Eingabe- und Auswahlmethoden

In Verbindung stehende Artikel

Mehr sehen