layui中table.render的使用示例

前端實(shí)現(xiàn)代碼如圖(完整代碼):

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、織金網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為織金等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

  
  
  
  
  
  
  



  

    

      主頁
      組件
      數(shù)據(jù)表格
      開啟頭部工具欄
    
  
  
  

    

      

        

          
開啟頭部工具欄
          

            
            
            
             
            
          
        
      
    
  
  
    
  

核心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: '程序設(shè)計(jì)題綁定'
,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
 });

要求后臺(tái)返回?cái)?shù)據(jù)格式必須為:

{
  "msg": "success",
  "code": "0",
  "data": [
    {
      "title": "for循環(huán)輸出",
      "problemId": 1139
    },
    {
      "title": "測(cè)試2",
      "problemId": 1138
    },
    {
      "title": "測(cè)試1",
      "problemId": 1137
    },
    {
      "title": "for循環(huán)-Plus",
      "problemId": 1140
    },
    {
      "title": "第一個(gè)C++程序",
      "problemId": 1141
    }
  ]
}

不然的話，會(huì)出現(xiàn)相關(guān)提示(如code對(duì)于的值必須為0，而不能為000000，以及data對(duì)應(yīng)數(shù)據(jù)必須像上面這樣的，不然cols里面不好自動(dòng)對(duì)應(yīng)上。

后臺(tái)實(shí)現(xiàn)代碼如下:

控制層代碼(路由)

@GetMapping("/page_list")
@ApiOperation(value="根據(jù)用戶ID獲取題目分頁列表",httpMethod="GET",notes="根據(jù)用戶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();
    
    //當(dāng)前頁
    Integer page = Integer.parseInt(pageno.trim());
    //每頁的數(shù)量
    Integer size = Integer.parseInt(pagesize.trim());

    Map paramMap = new HashMap<>();
    paramMap.put("userId", userId);
    paramMap.put("start", (page - 1) * size);  //當(dāng)前頁的數(shù)量
    paramMap.put("size", size);  //當(dāng)前頁
    
    List 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及其實(shí)現(xiàn)類:

Service:

public interface ProblemService extends IService {
   
    List getProblemPageListInfo(Map paramMap);
    
    Integer getProblemPageTotalCount(Map paramMap);

}

Service實(shí)現(xiàn)類:

@Service
public class ProblemServiceImpl extends ServiceImpl implements ProblemService {

    @Autowired
    private ProblemDao problemDao;
    
    @Override
    public List getProblemPageListInfo(Map paramMap) {

        return problemDao.getProblemPageListInfo(paramMap);
    }

    @Override
    public Integer getProblemPageTotalCount(Map paramMap) {

        return problemDao.getProblemPageTotalCount(paramMap);
    }

}

ProblemDao.xml:

    
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        


        
        
    

    
    
        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
    


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

實(shí)體類:

public class Problem extends Model {

    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中table.render的使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

新聞標(biāo)題：layui中table.render的使用示例
URL標(biāo)題：http://www.jiaotiyi.com/article/iidihh.html